To increasing the website performance we need to reduce the http requests, which can be achieved by CSS Sprites. Sprite images require only one http request to load many number of images but that one is difficult to construct and there is no automated tool available to do the same. So i suggest Data URI as alternative.
First i like to tell the Pros and Cons of Data URI
- Quicker loading
- no file storage required
- Images can take up almost three times more storage space (that one can be over come using the Gzip compression method).
- your website can be seen as a spam site because many spam sites use base64 to force browsers to load images.
- Internet Explorer 5-7 version not supported the Data URI
Steps to do Data URI
- Remove the empty spaces in that image using lossless compression tools, i preferred “Smush.it™“
- Convert image to Data URI Using this online conversion tools
Some Useful Data URI Examples.
Data URI for empty.gif
<img src=”data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw%3D%3D” width=1 height=1>
The empty favicon is created with the LINK element
1 <link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAAF0lEQVRIx2NgGAWjYBSMglEwCkbBSAcACBAAAeaR9cIAAAAASUVORK5CYII=" rel="icon" type="image/x-icon" />
Using this technique we can able to attain 99/100 for google page speed…