« Global warming tipping point | Main | Animation of embedded images »

Embedding data within HTML

After creating the interesting, though perhaps ultimately slightly pointless, online Asciifier recently, I was intrigued to learn of another method of inserting image data directly into an HTML page. The underused data:URI scheme involves a straightforward encoding a small amounts of data. The smallest example I could come up with is this 1x1 white pixel.

<img src='data:image/gif;base64,R0lGODdhAQABAIAAAP///////yw
AAAAAAQABAAACAkQBADs='/>

Once again downtrodden users of the ancient Internet Explorer 6 are left out in the cold, as that browser is not in tune with such modern lingo as this. People viewing this page with less antiquated software will now see a delightful image from the great Henry Fuseli - Silence, 1799-1801.

Despite being around for a number of years, data:URI has not been extensively used. Is this because it's not well-known, or because it's not very useful? I'm afraid it may be the latter, and until Internet Explorer supports it, it will remain a toy for internet nerds alone.

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)