1

When I go to View Page Info -> Media in the Mozilla Firefox (or any other gecko-based browser).

I see one picture there which contains several elements of the site:

enter image description here

My questions are:

  1. How they get separated when rendering the website? (I know it's probably CSS, what I mean is how to define/know which region of this picture is a separated element)

  2. What are the advantages over using one picture for each element?

I would guess this lowers the bandwidth as it has less headers, but I don't know if there is something else about it.

Zistoloen
  • 10,036
  • 6
  • 35
  • 59
Mansueli
  • 111
  • 3

1 Answers1

2

Here are the sprites CSS of a site. They are useful to display little pictos (=icons) in a site.

The main advantage is the browser only loads one big image with all the pictos (performance because of less requests to the server). And to display these pictos separately, you just move a cursor with a fixed size in this big image.

Another advantage is also when you change a picto when an user action occurs, the picto is already loaded and you don't see the new picto blinking.

However, sprites CSS mustn't be used to display images related to the content of a site.

Zistoloen
  • 10,036
  • 6
  • 35
  • 59
  • 1
    To extend on top of Zistoleon Question the disadvantage would be that some mobile devices especially older ones do not cache when a file is over X amount. This amount is often low between 15kb-150kb per a resource. So multiple small files for mobile can be faster than serving a larger file due to caching limitations. – Simon Hayter Aug 15 '14 at 21:35