DATA URI scheme

This is a good-to-know piece of web development. Images, HTML, data objects can be rendered with a single URI.
The Hello world example of the URI data scheme is:

// copy this to the address bar
data:text/html;charset=utf-8,hello world

Example 2: Do you see this RSS icon? Right click on it and press "inspect element" if you have Firebug, or check the source code, it's base 64 encoded image data.

Unfortunately, Internet Explorer (who else) doesn't support it just the latest version 8.

The formula for creating data URI-s is:

data:[][;charset=""][;base64],

So, what's the use of this?

Reduce HTTP requests
Create crazy things, like: this and this.
Useful for bookmarklets
Generate images on the fly
CSS also supports it

Please note, that encoding files with base 64 makes your data much larger, than it was. More info on Wikipedia.

Tibor SzászInteraction matters

DATA URI scheme

hello world

Comments

Add new comment

Briefing

Topics

Friends

Feeling so social

Tags