background-image: to sprite or not to sprite?

Question

Can anyone comment on the decision to use sprites for images or not? I see the following benefits/trade-offs (some of which can be mitigated):

---

Sprites over individual images

Pros:

• Fewer images to manage
• Easier to implement themed images
• Image swaps (JS/CSS) happen faster (because they do not require additional image loads)
• Faster image loads due to fewer HTTP requests
• Fewer images to cache (although virtually no difference in overall KB)

Cons:

• More background positions to manage
• Image payload may be over-inflated (sprite may contain unused images), causing page load may be slower
• Slower images loads because they cannot be downloaded synchronously

Answer 1

I don't thing there's one definitive answer to this. Opinions will differ according to need and individual preference.

My guideline is to always evaluate the benefit for the end user vs. the benefit for the developers. ie. what is the real value of the work you're doing as a developer.

Reducing the number of HTTP requests is always one of the first things to fix when optimizing a web page. Proper usage of caching can achieve much of the same thing as using sprites does. After all, very often graphics can be cached for a really long time.

There might be more benefit from minimizing scripts and stylesheets rather than adding graphics into a sprite.

Your code for managing sprites might increase complexity and developer overhead, especially as number of developers increases.

Learning proper use of cache-headers and configure your web-server or code properly might often be a more robust way of improving performance in my opinion.

Answer 2

If you've got a decent amount of menu entries in which you want to do roll-over images I'd recommend going to a sprite system as opposed to doing multiple images, all of which need to be downloaded separately. My reasons for so are pretty much inline with what you have mentioned in your post with a couple modifications:

The image swaps wouldn't be done with javascript; most of the sprites I've seen just use the :hover on the link itself within an unordered list.

Depending on the filetype/compression the download of the image file itself will be negligible. Downloading one image as opposed to multiple is generally faster in overall download and load.