Sunday, August 23, 2009


To fetch each file (images on your website, any plain text file) browser has to make separate http request with server. So the thumb rule to optimize any web application is to reduce the number of http requests.So lesser the number of requests made fast your application will load.
We use different techniques such as CSS Sprites to reduce these http requests.
Data URL is one of such techniques. And is supported in all major browsers including Internet Explorer 8.
There are many URL schemes available eg http, ftp,mailto: etc. each scheme has its own meaning. Similarly the data: URL scheme is a way to embed “immediate data” as if it was included externally.

The mediatype is a MIME type string, such as "image/jpeg" for a JPEG image file.
If omitted, defaults to text/plain;charset=US-ASCII
If the data is textual, you can simply embed the text (using the appropriate entities or escapes based on the enclosing document's type). Otherwise, you can specify base64 to embed base64-encoded binary data.

Simple text/plain data
base64-encoded version of the above

Embedding an image in the HTML using data url:
<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
width="16" height="14" alt="embedded folder icon">
Useful resourcesl: