CSS Sprites
Almost all the web sites which we develop will have some basic functionality like, e-mail, print, rss feed, logo, etc.. And usually these will be provided as a image link to the user. Obviously we will be referring to separate image for each link. And we know for each asset, whether it is a image or css the browser makes a separate call to web server to get the information. Since we have separate image for each functionality the number of hops increases.
Almost all the web sites which we develop will have some basic functionality like, e-mail, print, rss feed, logo, etc.. And usually these will be provided as a image link to the user. Obviously we will be referring to separate image for each link. And we know for each asset, whether it is a image or css the browser makes a separate call to web server to get the information. Since we have separate image for each functionality the number of hops increases.
Till now I have also did the same thing :) , i.e. by including separate image for each one. After knowing about CSS Sprites I was more inclined towards it.
Below is the sample data shows the actual time taken by the HTML markup when compared to other files that supports the HTML formation:
Source: css-tricks.com
As given most of the time browser spends to get the supporting files like images. Consider if we have single image which all the images contained in it. Then the browser just needs to download just a single image which can be served to all. This reduces number of hops dramatically and your performance of the application will increase. This technique of combining the smaller images into single large image (not very large) is called CSS Sprites.
As a contrary many will believe that having single large image file will increase the size of the image file which will have impact on the performance again. But, here is the comparison:
I tested with an simple web application where I had ten small icons, for which
1) Having individual image took:
Number of HTTP Requests: 10
Total Size of the Images downloaded: 12.3 kb
2) Having a single image file using CSS Sprite concept
Number of HTTP Requests: 1
Total Size of the Images downloaded: 7.62 kb
Image File can be created using : http://www.csssprites.com/
Here I am taking about a simple web application, consider large applications where we usually have plenty of images being used. In those scenario CSS Sprite will be very handy.
I thought of sharing this info to every one. For more details about CSS Sprite, use the below links:
Reference:
Regards,
Elango
Elango
