Slightly Remarkable

I used a background image, that much is clear, but it’s not a remote link to an image. That would consume bandwidth, and what if I changed the address or something later on? It’s just unreliable to do such a thing. Instead, I embedded the image in the Greasemonkey script.

How in the world would I do that? Well, it’s not something you see everyday (probably because Internet Explorer, our loving, caring friend, doesn’t support it), but there’s a URI scheme called “data.” You know how there’s “javascript:” and “about:”? It’s the same thing (and, it’s part of an official RFC specification). By using this URI scheme, we can have the browser interpret a string as binary data (and even non-binary data, and even data inside of data — check out an example, and yes that’s a data URI link). Very cool. (If you look closely, the second level’s LINK tag is to a data URI which is a stylesheet, and in that stylesheet is a data URI with a rainbow gradient image.)

Oh, you want to know how to use it, do you? It’s nothing difficult. Basically anywhere you would normally place a URL to a file or a file itself (be it in a CSS background property, a web page itself, a link to a CSS stylesheet, etc.) you can put a data URI object there instead. To compress a file or some data into a data URI, head to the data URI kitchen and give it a shot. What think you?