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?

  • 2
    It's not about the amount of space the images take up, it's more about the HTTP requests, also that 1KB extra text you're writing in CSS will also be cached
    – Dunhamzzz
    Commented Aug 3, 2012 at 10:04
  • It also depends in how you implement CSS sprites. Looks there are better approaches to do it: webmasters.stackexchange.com/questions/57957/…
    – user35364
    Commented Feb 7, 2014 at 13:55

1 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.

  • "You can pretty much get away with a pixel worth of padding between elements in a sprite." - Depending on the elements you're putting in your sprite, you can get away with zero pixels worth of padding between elements.
    – Rounin
    Commented Dec 7, 2014 at 20:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.