when not to use CSS sprites ?

Question

I just want to know when not to use css sprites ... css sprites works great... but if are there some any occasions when they create a lot of headache...m asking from very experienced people....

Answer 1

We had a tough time when we wanted to position the image dynamically.

background-image: url(../images/a.gif);
background-repeat: no-repeat;
background-position: left bottom;

This is tricky (if not impossible) to do using a sprite.

Answer 2

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 3

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.

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

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.