The most important part of increasing the webpage performance is to reduce the number of http requests,Which can be achieved by CSS Sprites.Sprite images require single http request to load the sequence of images but usually the sprite images are somehow difficult to construct and there is no automated tool available.Data URI is the alternate way of performance improvement instead of css sprites.
Data URI
Uniform Resource Identifier scheme provides the resources for webpages rendered in-line. Which means you can use the images and other files directly in the html and css.Instead of specifying the image location you can specify the data uri in the html which will be rendered by the browser without doing any http server request.This will reduce the server load and improve the speed of the webpage as well.
Illustration
This css style require a http request by the browser to fetch the image file located on the server.
Convert the Image file as data URI using Base64
When we convert the image file to data uri using base64 encoding we get series of characters like the one given below
1 | iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12P4fwYAAs0BzFaJyDQAAAAASUVORK5CYII= |
Instead of providing the location of the image in css we can use the base64 encoded string.
similar example usage of data URI in HTML code
1 | <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12P4fwYAAs0BzFaJyDQAAAAASUVORK5CYII=)" alt="" /> |
Unlike css sprites, When the browser renders the webpage it decodes the data instead of requesting the server which improve web page performance.
nice tutorial, it would help me to develop my app.