16

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?

Ben Carey
  • 16,540
  • 19
  • 87
  • 169
  • 1
    "Each time the sprite is referenced on the page, the image is created in memory, which in turn slows down the clients browser" [citation needed] – BoltClock Aug 21 '12 at 08:04
  • 1
    Each time one writes `background-image:url('imageaddress');`, the image is cached in the computers memory and therefore slows down the browser. Does that make sense? :-) – Ben Carey Aug 21 '12 at 08:09
  • 1
    http://stackoverflow.com/questions/8050152/why-use-a-sprite-sheet-rather-than-individual-images/ – Kyle Aug 21 '12 at 08:11
  • I have just tried and failed to find a great article I read recently, which actually tested the spriting theory, and found that yes, sprites save memory. I will come back and post the article if I can find it again... – zenkaty Aug 21 '12 at 08:14
  • 2
    Why would the browser need to store the same image multiple times in memory? That doesn't make any sense. – BoltClock Aug 21 '12 at 08:16
  • @BoltClock Exactly what I said, that is why I am asking you pros. I want to make sure my theory is correct – Ben Carey Aug 21 '12 at 08:19

3 Answers3

15

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.

Guffa
  • 687,336
  • 108
  • 737
  • 1,005
  • 1
    Gosh I love fiddles that crash Firefox :) – David Barker Aug 21 '12 at 08:13
  • 2
    @DavidBarker - What is Firefox? :P – Rafael Herscovici Aug 21 '12 at 08:18
  • 1
    @Dementic a crashed piece of *&^£ :P – David Barker Aug 21 '12 at 08:20
  • @Guffa When I left it for 5 mins it did come back, tbh fiddles with lots of code usually do hang Firefox (for me anyhows). It was no poke at you as the answer is good :) – David Barker Aug 21 '12 at 09:04
  • @Ben Carey this link http://www.w3schools.com/css/css_image_sprites.asp it explains and gives this statement "A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth." but if you see the demo still he call images by 2 times what is the point in that to say it reduces multiple request and bw. – user2826111 Oct 09 '13 at 10:42
  • @user2826111: If you use the same image in multiple places in the page, it will only be requested (or loaded from cache) once. – Guffa Oct 09 '13 at 13:08
  • @Guffa how can you say it loaded from cache, ya i am getting 304 it means it's loaded from cache and How can we see the content of cache – user2826111 Oct 09 '13 at 13:11
  • @user2826111: You can use a tool like Firebug or IE F12 developer tools, and look at the network traffic. If an image is loaded from cache, it won't show up as network traffic at all. – Guffa Oct 09 '13 at 13:19
  • @Guffa ok I got it, i'll try & let you know – user2826111 Oct 09 '13 at 13:36
0

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.

A.M. D.
  • 928
  • 6
  • 10
0

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.

vuamitom
  • 173
  • 2
  • 8