Quiz Questions/CSS

Explain CSS sprites, and how you would implement them on a page or site.

Importance
Mid
Quiz Topics
CSSPERFORMANCE

CSS sprites combine multiple images into one single larger image file and uses a combination of CSS background-image, background-position and background-size to select a specific part of the larger image as the desired image.

It used to be a commonly-used technique for icons (e.g. Gmail uses sprites for all their images).

Advantages

  • Reduce the number of HTTP requests for multiple images (only one single request is required per spritesheet). But with HTTP2, loading multiple images is no longer much of an issue.
  • Advance downloading of assets that won't be downloaded until needed, such as images that only appear upon :hover pseudo-states. Blinking wouldn't be seen.

How to implement

  1. Use a sprite generator that packs multiple images into one and generate the appropriate CSS for it.
  2. Each image would have a corresponding CSS class with background-image and background-position properties defined.
  3. To use that image, add the corresponding class to your element.

The generated stylesheet might look something like:

.icon {
background-image: url('https://example.com/images/spritesheet.png');
width: 24px;
height: 24px;
}
.icon-cart {
background-position: 0 0;
}
.icon-arrow {
background-position: -24px 0;
}

And can be used in the HTML as such:

<span class="icon icon-cart"></span>
<span class="icon icon-arrow"></span>

References