Are image sprites actually more efficient than sep

Question

I started using image sprites around 2 years ago because I saw sites such as Apple and Facebook using them on their sites.

It goes without question that loading a page is faster if you download one 60kb image, instead of three 20kb images, however, I have recently been informed that sprites, albeit faster at loading, are in fact a lot more memory consuming on the client side.

In my eyes:

1. Sprites are faster at loading and use less bandwidth
2. From a developers point of view, they are easier to maintain because all of your graphics are in one place

However, in my colleagues eyes:

1. Each time the sprite is referenced on the page, the image is created in memory, which in turn slows down the clients browser
2. The difference in speed of loading is not sufficient enough to justify the increased memory usage of the browser
3. The internet is designed to transmit in small packets, therefore loading smaller images is better then loading larger ones

This leads me to ask the question, are sprites are actually worth using or is my colleague barking up the wrong tree?

Answer 1

Using sprites consumes more memory. Consider that your sprite consists of 40 frames. And even if only a handful of them need to be displayed at a time, browser still need to decode the whole sprite and keep it in memory.

Having said that, it really depends on the context. If you uses sprite for button icons which are always seen, memory usage is no different from having multiple images.

Answer 2

Using an image more than once in a page doesn't mean that there is one copy of the image for each place where it is used.

If it did, a page like this demo fiddle would use around 7 GB of memory. It doesn't.

---

Loading one image is always faster than loading several images. Reducing the number of requests is important when optimising the performance of a site. The fact that the internet is designed to transmit small packages only makes the impact of loading several small images less than it could have been.

Answer 3

Their value depends on the usage context. For devices I no longer bother, in order to save the client processing overhead.

It may also depend on the kind of image you use and whether you need transparency, and what kind of transparency. I read a paper (linke to follow!) on how battery life for mobile web was affected by different kinds of images - PNGs had a signicant rendering overhead compared to say JPGs.

Another consideration is what the images are used for on the page, but also what they're used for off the page. I once developed a template for a large site that used just one image for all sprites on the page, the loading overhead was small too. The site logo fitted nicely in the sprite, which was fine until people started to share the site on Facebook and we had every small icon, button state and so on appearing as the link thumbnail choice.