In a previous post, I have made a point how to improve performance by reduce HTTP connections by stitching together content of css and js fragments. At that time I also mentioned a way to do it further is to reduce the number of images on a page. Because images are also loaded on HTTP connections. Again the same Cache-Control headers on the client can be used to reduce much of this traffic. But to reduce the Number of HTTP connections, You can employ a technique called CSS Sprites.
I have to confess, I don't know about this technique until I was researching on GWT's ImageBundle interface. Had I known this trick, my SarathOnline2.0 site would not have been lame - text only!
Simply the technique is to stitch all images together into one big image. This big image is called a Sprite. The images used on my site are sprite-d as shown on the left. How do we display them seperately? Using css backgrounds. To achieve this We will send a blank 1px gif. Then insert an img tag with src=blank.gif, and height and width set to the image that was orginally intended to be there (kick this, go Firebug > Inspect Element :) ). Then, using css background: url(path/to/sprite.png) no-repeat top left; background-position: 0 -5px; You can clip the background to show the exact image. As shown below.
This technique is so well discussed in detail all over the web. But you dont have to get intimidated about doing this whole stiching, and calculating the co-ordinates et al. This online css sprite genereator is simply awesome. Supply it with a zip file containing all the small gifs or pngs, and it will spit out a sprite and a piece of code for your css. If you are like me, have that css in a separate file and keep that deploy that image on to your site. And boom, you got your site running faster. If you need to add one more icon, dont worry, add it to your list images, zip them, generate this sprite again. Just keep the names of the images same. The class names generated will be the same, so you dont have to worry about modifying existing pages.
Awsome? Ain't it?
I have to confess, I don't know about this technique until I was researching on GWT's ImageBundle interface. Had I known this trick, my SarathOnline2.0 site would not have been lame - text only!
Simply the technique is to stitch all images together into one big image. This big image is called a Sprite. The images used on my site are sprite-d as shown on the left. How do we display them seperately? Using css backgrounds. To achieve this We will send a blank 1px gif. Then insert an img tag with src=blank.gif, and height and width set to the image that was orginally intended to be there (kick this, go Firebug > Inspect Element :) ). Then, using css background: url(path/to/sprite.png) no-repeat top left; background-position: 0 -5px; You can clip the background to show the exact image. As shown below. This technique is so well discussed in detail all over the web. But you dont have to get intimidated about doing this whole stiching, and calculating the co-ordinates et al. This online css sprite genereator is simply awesome. Supply it with a zip file containing all the small gifs or pngs, and it will spit out a sprite and a piece of code for your css. If you are like me, have that css in a separate file and keep that deploy that image on to your site. And boom, you got your site running faster. If you need to add one more icon, dont worry, add it to your list images, zip them, generate this sprite again. Just keep the names of the images same. The class names generated will be the same, so you dont have to worry about modifying existing pages.
Awsome? Ain't it?