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

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.

Answer 2

It is a good idea if

• Speed matters

• You don't care about accessibility (screen readers reading the ALT text of an image, etc, all that is gone when you use sprites)

• You don't care that your thumbnails are not going to be printed by default in any browser

• You can do it without it becoming a maintenance nightmare (which image was on position 461 again?)

As to your second question, it is probably advisable to put all sprites into one or very few container images to minimize loading times.

Answer 3

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