Create CSS sprites based on colour?

Question

I have a large set of thumbnails I wish to display on a page (over 200). I'd like to use CSS sprites to load them to minimise the HTTP requests. I think putting all of them in one massive file is a bad idea, but splitting them into about 6 files of 40-50 thumbnails should work nicely.

All of the thumbnails are fairly low colour (can be reduced to 256 colours without quality drop), but in total all the thumbnails cover a lot more colours.

So, is there an easy way to group them based on their colour? Putting each group of files in separate folder is fine, since I can stitch together with ImageMagick or an online sprite tool later. But doing all of that in one (with CSS) would be nice too.

Update: the reason for grouping by colour:
The idea is to save more bandwidth. If I have 10 mostly-blue thumbnails, 10 green and 10 red, I can combine them to 3 images, reducing each to 256 colours. If I mix thumbnails then reducing to 256 colours makes the images poorer quality.

Answer 1

Firstly, I would suggest not worrying too much, and saving as a 24bit png. It may seem that the image is getting a lot bigger by doing this, but if the thumbnails are small you'll probably find that there is a large amount of bandwidth currently being using with just http headers that will go away that you can use to make your images look better.

However, if you want automate the process you could try working out the average colour (one way of doing something close to this is to resize them to 1x1, then look at the rgb colour for that pixel). Once you have a colour per images, convert to hsv and sort by hue. You can then bundle them based on that sort order. I've not actually tried this, but it may produce acceptable results.

Adjusting the number of images that get bundled will also effect the output quality. If it sucks when you put 30 images per file, try 25 and see how much difference it makes. Actually, might be smarter to think about the number of files...

• Put them all into a single file.
• Does it look bad, as there aren't enough colours?
• add one extra file and split them equally across all the files. Goto step 2.

Answer 2

Well I did some testing by grabbing a sample by hand of one "tint" and comparing it to a montage created by just taking the first N images. There was only a difference of a few kilobytes, which was reduced to about 30 bytes after I found PNGcrush. Fanastic tool!

So in short, my crackpot idea has been disproven. :p

Answer 3

Now, this is nothing more than theoretical blabbering, but, I understand that animated GIFs have support for a distinct color palette per frame. Theoretically, you could place each image on a separate frame of the animation (leaving most of that frame transparent), and set the pause time between frames to 1ms. Set the animation to only go through once, and you could (potentially) have an effective CSS sprite with reduced to 256 colors per image.

Like I said, theoretical blabbering.