0

I notice some websites make giant collages of various images from icons to buttons. An example I can find is Youtube. Here's an example of Youtube's "collage". These sites only display a portion of this image instead of displaying multiple images.

To clarify, say a site has five icons each of 10x10px. Instead of displaying them individually, they'll make a 50x10px collage, load the one image and display five separate instances of the image, but each one only showing the portion that's needed. For example, image 1 might be 10x10px beginning at 0px width, another might be a 10x10px image beginning at 20px width, etc.

What's the benefit of this compared to loading each image individually? Since the browser is only loading one image, I imagine it loads it faster than multiple images. Is this true?

gator
  • 3,465
  • 8
  • 36
  • 76

1 Answers1

1

What you're talking about is called CSS sprites. http://css-tricks.com/css-sprites/ This page should have all the info you need. Basically, yes, it is faster -- there are fewer HTTP requests to slow the page down.

Here's a previous answer on the same subject that goes into more detail. https://stackoverflow.com/a/8050216/4317628

Community
  • 1
  • 1
JSilv
  • 1,035
  • 12
  • 26