when not to use CSS sprites?

Question

I want to know when not to use CSS sprites. CSS sprites works great, but are there any occasions when they create a lot of headaches?

Answer 1

Like all things, there are times when it is useful, and there are times when it is harmful.

Many developers like to use CSS sprites because it saves on request time -- the browser makes one request, downloads the image, and all the various sprites are now automatically cached and blazing fast.

So how can it hurt?

Because download size != memory size.

That PNG or GIF that's only 10kb might actually be much, much greater in size once the browser loads it in memory. The issue is that while something like GIF will compress solid areas of color, the browser expands it out to a bitmap, where all images of equal dimensions use equal memory.

And it loads a new bitmap every time you use that image somewhere.

So everything in moderation.

See: http://blog.mozilla.com/webdev/2009/06/22/use-sprites-wisely/ for more info.

Answer 2

Maintainability of your site will suffer from using them. Only combine images that belong to the same logical unit and are unlikely to be updated separately. Keep images that are likely to change separate to begin with.