The Insider

I was going through some blogs and I found this interesting concept of ‘spriting‘ . With a bit research in it I found how handy this technique is for page optimization. A bit of research in wikipedia confused the hell out of me and so I spoke to various experts in that part of the industry and came up with the following ideas:

‘Spriting‘ is a process where 2 or more images are merged to form a single image. Now I can see you all looking at my post and thinking”How the hell does this help in page optimization?” Have a look at the following url: http://nz.finance.yahoo.com/ Now in that if you have a look at the following image Sprited Image is a combination of 3 images. Now when required to show the calculator symbol using CSS this is shown and when required to show the graph symbol you can show it by CSS and hide the rest.

What is happening behind the scenes? If you had 3 different images instead of 1 then you would be doing 3 http requests to load these images. But because its only one image, the browser does only one http request the first time and later on it displays the image from the browser cache. So in this case instead of 3 http requests we have got only 1. And imagine if a page has some 24 images and instead these can be merged into 8 big images. So only 8 http calls instead of 24!! So your page can load 3 times faster!! (well technically it is faster, though not as fast as 3X)

Now this does have some limitations like if you are displaying a list and the images for the <li> are sprited, if the text in <li> is more than the width specified then you see the list is broken. Umm but it should be working well in most cases.

I also hear that there are some public (free) tools to sprite the images (accept 2 or more images, merge them into 1), but I could not find any in the first glance. If any of you have come across any such tools or have got previous experiences in this then feel free to share it here

Cheers