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

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

• Implementing image sprites in CSS - CSS: Cascading Style Sheets | MDN
• Front End Interview Handbook