Painting the Web

The data: URI

Here's an oddball one for you, the data: URI. The principle behind the data: URI is to include image data inline rather than via an external file. The data can be HTML, script, an image, and, yes, even CSS. Our target browsers of Opera, Safari, and Firefox support the data: URI, but IE does not.

For web page purposes, the data: URI doesn't really buy us much. It is a way to generate an image using JavaScript without having to resort to a Flash-like workaround. However, with wider implement of both the canvas element and SVG, I'm not sure why the data: URI would be useful in the future for our own pages. It is, however, useful for posting images in forums that don't allow images but do allow links, since the data: URI is a link.

I'm including the data: URI mainly because it's an interesting and twisted trick, and the chapter wouldn't be complete without at least one such trick. I'm also including it because Greasemonkey scripts will use the data: URI to insert small graphics into web pages.

To create the URI for use as a data: URI, all you need is a base-64 encoding function, such as that provided by PHP and most other common programming languages. There are also web sites that generate the data: URI for us given a URL, HTML, text, image, or even script.

Tip

Greasemonkey, available at http://greasepot.net, is a Firefox extension that modifies web pages in the browser. One data: URI encoder is at http://www.scalora.org/projects/uriencoder/. Another is the data: URI kitchen, ...