CSS Sprites: Are they worth the trouble?

Question

I can't help but wonder whether CSS sprites are very much over-used.

First of all, if I stick all my images in a single file it makes an aweful lot of empty space. I know, that shouldn't make an image file too much bigger, but sprite.png by itself is generally going to be bigger than (small1.png + small2.png ... + [http headers for all those individual connections]).

Second, any individual image attributes that might make an image file inherently small or compressible are lost on sprite.png. For example, a grayscale image stuck in a not-grayscale sprite.png is no longer grayscale.

Third, all those CSS blocks add up. If the following is all you have to add to your old fashioned <img src=small1.png> to turn it into a sprite...

#small1 { background:url(sprite.png) n n; height:n; width:n; } id=small1 height=n width=n

...then 12 sprites equals 1KB (and change) in extra payload - above and beyond the images themselves. Before you say "big deal!", remember we are talking about small sprite-able images here, and 1KB is significant, relatively speaking. Also, CSS can sneak up on you.

Actually that's my post in a nut-shell: Isn't this "optimization" kind of silly?

I'm not saying sprites should not be used. I just think there has got to be more to it than "one request is always better than many". Especially when you've got HTTP Keepalive and a well-optimized web server and file system. And all things considered, what is the point in focusing on such mundane detail, while there are surely much bigger in-efficiencies to nit-pick about in any web application?

Answer 1

TLDR; It depends but I think it is worth it.

It isn't always the case that one request is better than many, but when sprites are used correctly it is generally a worthwhile optimisation.

Why is there empty space? You can pretty much get away with a pixel worth of padding between elements in a sprite. And remember that the real saving with a sprite is when it is cached, so it is one file cached once then used across many pages, as opposed to several background images being requested and cached at various times in the users journey.

Regarding the image optimisations, that is true, but perhaps if you have enough greyscale images you would consider two sprite files?

Sprites shouldn't be used for content that should go within an <img> element, semantically that makes no sense, sprites should be used when styling other elements, so background-url was always going to be needed.