Inline Images
       Data URL
       JavaScript URL

Inline Images on Web Pages

It would be really nice if images could be included inside JavaScript or otherwise inlined into a web page rather than always being fetched from the web server.

Firstly, it would give us some more control over the presentation of our ideas. When I put up a desk calculator, I want all of the button images to display at once. I don't want my users watching an unscripted animation as the images are one by one stitched over the skeleton of my page. I don't want them looking at skeletons at all, I want them to see the complete web page.

Secondly, it would give us more flexibility. If my client side script needs a particular image, there's no reason why I should have to make a roundtrip to Timbuktu for a precomputed image or so a server side program can generate the image. I can draw it on the client side so I should be able to insert it into the page.

So, given that a JavaScript could compute or simply store an image in some format, how does it get the browser to display the image? There are three ways, none of which works as well as I'd like.

I should mention that haven't spent much time exploring these issues with Internet Explorer. Most of my JavaScript seems to give Explorer indigestion, and IE's script error reporting is abysmal. So anyone who can enlighten me further on IE's capabilities for inline image display should do so.

And eventually these issues will go away. The W3 has a proposed Scalable Vector Graphics standard, SVG, which will make for some very spiffy client side graphics if anyone ever implements it.

The method appears to support the following way of replacing a document with a computed image."image/gif");
Both Goodman [1] and Flanagan [2] discuss this as if it works. Unfortunately, the document.write() method in NN4+ truncates its data at the first ascii NUL character. It's reported that this worked in NN3, but I haven't confirmed that.

And even if it did work, it would be a less than ideal solution since it would require inline images to exist in layers which could be written into. This would limit its use to browsers with DHTML support and its usefulness to pages which were written in a particular way.

Data URL

The data url format allows the value of a small object to be encoded inline as base64 content. This looks like this:

<IMG SRC="data:image/gif;base64,[...]">
where the [...] is replaced with the base64 encoded image data. Since the content of an html element is limited, in worst case, to 1024 bytes, only fairly small images could be displayed this way. (I'm not sure where my memory of this limit comes from.)

Another annoyance is that NN4+ only partially supports data URLs. A data URL may appear in HTML source, but if you use one in JavaScript to update an Image.src you will get the message: illegal URL method 'data:'. Thus it works only if the image data is written into the web page, not in the general case.

JavaScript URL

The javascript:imageData method was offered by Martin Webb on the comp.lang.javascript newsgroup when I asked for help. This uses a javascript url to supply the value for the src= attribute of an IMG element, or for the .src property of an Image object. The data is neither written nor encoded, it is simply supplied as the result of a javascript expression. Thus we may write a url as:

which specifies a gif as a javascript literal string. Or we might store that data into a global variable:
var imageDataVar = 'GIF89a\1\0\1\0\200[...]\1\0;'
and then write the url as:
which references the value of the variable. Or we might write a function which returns the image data string and write the url as:
which calls the function to supply the image data.

The drawbacks of this method are that it is browser specific; that it doesn't cache well; that it cannot be used for multiple images on the same page unless special efforts are made to keep Netscape from running multiple threads in the JavaScript interpreter.


[1] Goodman, Danny, JavaScript Bible, 3rd Edition, IDG Books, Foster City, CA, 1998.

[2] Flanagan, David, JavaScript : The Definitive Guide, 3rd Edition, O'Reilly, Cambridge, 1998.

Roger E Critchlow Jr
Last modified: Sun Oct 30 22:51:55 MST 2005