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.
Syntax:
data:[<mediatype>][;base64],<data>
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.
Examples:
data:,Hello%2C%20World!
Simple text/plain data
data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D
base64-encoded version of the above
data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E
Embedding an image in the HTML using data url:
E.g.
<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7"
width="16" height="14" alt="embedded folder icon">
Useful resourcesl:
https://developer.mozilla.org/en/The_data_URL_scheme
