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

Sprites should never be used when the size of images are very different.
Because in that case the size of sprite is quite huge.
Recently I converted 3.5MB pictures to a sprite, and size shooted up to 17MB!

Answer 2

Using larger pic might be a headache... When pics are combined in smaller size, and neighbouring pics are just 1 or 2 px between each other, then CSS sprites can be a good solution. In our case, http://www.nbhuntop.com, we just use it for menu components including: Home, About, Products. And all the pics are in gif format, and no one will download these pics at all.

Answer 3

They can cause headache for your users if they want to download a particular image. First they won't get the "Save image as" option. If they figure out to use "View background image" they'll get a huge image with lots of other images on there too.

This is why sprites are best saved for "utility" (i.e. buttons) or design images.

Answer 4

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 5

CSS sprites works bad for <input type="text"> where the user can enter more than fits in the box, as the background then scrolls in some versions of IE.

They also works bad if you want to repeat the pattern.

Answer 6

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.