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.

Document.open()

The document.open(mimeType) method appears to support the following way of replacing a document with a computed image.

document.open("image/gif");
document.write(gifImageData);
document.close();

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,[...]">

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:

javascript:'GIF89a\1\0\1\0\200[...]\1\0;'

var imageDataVar = 'GIF89a\1\0\1\0\200[...]\1\0;'

javascript:imageDataVar

javascript:functionReturningImage()

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.

Notes

[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.