sprites vs image slicing

Question

I don't have much experience with the sprite approach to images (http://www.alistapart.com/articles/sprites). Anyone care to share some pros/cons of sprites vs. old-school slices?

Answer 1

The main advantage of sprites is that the browser has to request less pictures from the webserver. That reduces the number of HTTP requests and makes it possible to compress the parts of the design more effectively. These two points also represent the disadvantages of sliced images.

Here you can see some good examples how sprites improve the loading speed of web pages:

http://css-tricks.com/css-sprites/

Answer 2

Pros:

• It's far easier on the server to serve a single large image than many small ones.
• It's (slightly) faster for a web browser to load such an image.
• Browsers only load images as they needs them - if you are using multiple images in a rollover, the browser would "pause" the first time you roll over the element. This can be solved using sprites, because there is only one image to load.

Cons:

• It's kind of a pain to code (more so than using multiple images at least)

Answer 3

One often overlooked downside of using CSS sprites is memory footprint:

https://web.archive.org/web/20130605000516/http://blog.vlad1.com/2009/06/22/to-sprite-or-not-to-sprite/

Unless the sprite image is carefully constructed, you end up with incredible amounts of wasted space. My favourite example is from WHIT TV’s web site, where this image is used as a sprite. Note that this is a 1299×15,000 PNG. It compresses quite well — the actual download size is around 26K — but browsers don’t render compressed image data. When this image is downloaded and decompressed, it will use almost 75MB in memory (1299 * 15000 * 4).

When sprites get loaded into the browser, they are stored uncompressed. A 26 KB file can uncompress to take up a whopping 75 MB of RAM. You should be mindful of using sprites with very large dimensions.

There's also the issue of what happens in browsers with poor CSS support (legacy browsers). The sprites may end up totally broken.