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 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.