Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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?

share|improve this question
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 Aug 3 '12 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 Feb 7 at 13:55
add comment

1 Answer 1

up vote 1 down vote accepted

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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