Sveinbjorn Thordarson's Website

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. It is a fully approved and finalized RFC standard.

Can you see the picture to the left? If so, you are using a browser which supports the data URL scheme -- if not, the chances are that you'll be visiting Mozilla.org in the next couple of seconds ;).

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 smallish Mac OS X utility app that generates embedded image data tags from image files -- an exercise in Sunday time-waste and futility. It bears the inventive and inspiring name DataURLMaker. The source code is also available.

I am thinking about working some sort of support for this into Mentat. Then again, maybe I'll just create a separate web application ala VirtualSafari or Vox Machina.