Update 2011: Check out DataURL.net for some open source tools for working with Data URLs.

I recently discovered that it is possible to embed raw image data in HTML documents instead of referring to an external file. This allows you to store a whole page, images and all, in a single HTML document, as opposed to parcelling the HTML and associated images into several files. Image embedding is done via the "data" URL scheme.

Can you see the picture to the left? If so, you are using a browser which supports the data URL scheme -- if not, you should visit Mozilla.org and get yourself a modern browser.

Now, the traditional way to include images in web pages consists of providing an external source for the image, e.g.

This requires the browser to send an extra HTTP request, which is a considerable overhead in cases where the size of the image itself is on par with the size of an HTTP header. If we use an embedded data URL, we provide the image data within the tag itself. The following HTML tag will, for example, display the image above:

The practical considerations are not insignificant. This is an extremely convenient way to deliver on-the-fly images in web apps without having to generate temporary files that subsequently need to be cleaned out. Unfortunately, embedded images do not benefit from caching in the same way as external images; they have to be loaded with each and every HTML document within which they are embedded. They also make HTML look very ugly. Well, that shouldn't bother me, if I am as aesthetically impaired as my critics maintain.

To top it all off I created a web application and a smallish Mac OS X utility app that generates embedded image data tags from image files: DataURLMaker. The source code is made freely available.

2 comments have been posted
Add Comment | RSS Feed

Magnusson | 29.11.2005 kl. 04:55

Argh! The ugly hurts my eyes!

Sveinbjörn | 3.12.2005 kl. 12:00

I've created a CGI application that works like the desktop application. It's a file form -- you just select an image, press submit and you get the image tag you need to insert into your HTML document.