What's the idea behind image sprites, how to approach it?

Question

How do you approach the use of image sprites in css?

Should I take all the images in my website and combine them to one image sprite? Is it really that beneficial?

How hard is it to maintain those images and change them later on?

Answer 1

Should I take all the images in my website and combine them to one image sprite?

Of course not. You're taking it too literal.

I find sprites are best used for groups of similar images. Examples include:

1. All states of a graphical button
2. States of icons
3. All permutations of a background (unless it needs to tile two ways)

Is it really that beneficial?

If you have a lot of them on a busy site, very. It saves a request for each image, saving the user time and your server a whole bunch of concurrent connections.

How hard is it to maintain those images and change them later on?

If you've used them logically, pretty simple. If you need to add another navigation item, you open up your nav sprite and expand it. For things like navigation it can actually be easier to maintain because you have like comparisons right next to you in the same document.

Edit, having seen one of the more extreme examples, I'll add that I would never go that far because:

• It's 60k to download. Not huge but on slow connections, that's 60k that has to be downloaded before anything shows. If all your visual assets are tied up, it can make the load time seem longer.

• Your CSS becomes a nonsensical mish-mash of background-position commands. If you do want to make changes you have to go back to the sprite and measure everything. Again and again and again.

• God have mercy on your soul if you need to enlarge something in the top-left of the sprite. You'd probably just add a new sprite below the current ones.

• And that might lead to bloat. Indeed, just loading all these images might be loading a whole lot of material that some users will never actually see. Loading unused data is probably worse than a connection overhead (considering how easily static content can be served by multiple cheap servers or a CDN)

The other examples are a lot more simple and worthwhile (IMO).

Answer 2

Sprites are a great way of cutting down load-time on graphics (sometimes), and always a way of cutting down requests to the server. Generally speaking, they may take some serious planning as you don't simply want to drop a bunch of images onto a canvas and export as a jpeg. I would suggest you study some sprites currently in use by larger companies like Amazon. Get an idea for how they layout their elements, and what types of images they even consider for use in sprites.

You'll also want to evaluate your site and be sure whether you can successfully implement them or not. If you weren't planning on using them to begin with, it may require a lot of back-tracking and updating to prepare for them.

1. Amazon Sprite
2. Ebay Sprite
3. Current.com Sprite (Whoa)
4. Google