Should I use a sprite-like technique for thumbnails on my website?

Question

On a website I'm creating, I have about 100 various thumbnails (64x64) that get displayed at different times. On some pages, only 5-15 thumbnails may be displayed. On others, all 100 are loaded.

I'm considering using a technique like CSS sprites to display the images. That is, rather than have image tags for each thumb, do something like:

<span class=thumb1"></span>

And then use CSS to take a slice of one single image with all the thumbs stitched together. That is, one image with all 100 thumbs (in this scenario, a 640x640 image).

My questions:

• Is this a good idea?
• If yes, should I do it on all pages the images occur, or only on the pages with all the images?
• Is there another technique other than sprites that may be better than simply including the images with img tags?

Answer 1

If you think that an ordinary user would visit at least two different pages with these thumbnails than my opinion is that using sprites would really be a good idea!

I would in fact make a single big image with all the thumbnails and then use it in all the pages!

Why?

• Fewer http requests (from 100 to 1)! And this is one of the most important thing about web site optimizations (read here from Yahoo Performance Team speed optimization rules )
• This way users will download the whole image only the first time and then they will get a super quick loading of that images in all the following pages
• The most famous websites on the internet already do that! See sprites used in Yahoo, Amazon or Youtube pages.
• You can add other UI or layout images to your sprite

Optimize the resulting PNG:

After you have generated your sprite, if a PNG, you can optimize the PNG even more using this tool: http://www.sitepoint.com/blogs/2009/09/18/squishing-the-last-drops-from-your-pngs/

When not to use sprites:

• When part of the images in the sprite change frequently
• In this specific case: when the majority of users would need less than the (about) 10% of the images

Answer 2

I'm not quite sure what you mean with "sprites", but this is what I think you mean: instead of 100 images seperately, you create 1 image, with a 10x10 raster. Each coordinate (x,y) contains one of the images you like to show. Now, if you display an image, you use CSS to set background-location: i.e. x * -64px and y * -64px, perhaps using JavaScript to calculate the x and y for each image-span, or Server-Side scripting to print out a dynamic CSS.

• Yes, this is a good idea: it reduces load time, since one only has to download one big image, instead of hundreds of smaller ones.
• It depends. If you have caching-abilities for a page, then you can "stitch" all thumbnails into one image file. If you have a very dynamic webpage, then it's quite harsh to build this stitched image every time the thumbnales are updated.
• Not sure, if this is what you ment with "sprites", then no, if you ment something else with "sprites", then yes: this answer is an example of one.