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

TL;DR

A CSS sprite packs several raster images into one file and reveals one region with background-position, fixed dimensions, and sometimes background-size. It historically reduced request overhead, but HTTP/2 and HTTP/3, caching, SVG symbols, and ordinary image files often make sprites a poor default today. Sprites can still be useful for tightly coupled small assets or frame-based game animation when one decoded sheet is operationally convenient.

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

A build tool usually packs the source images and records each region's coordinates. Every displayed sprite uses the same background image but shifts it so only the intended region appears.

.icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url('/images/icons.png');
  background-repeat: no-repeat;
}

.icon--cart {
  background-position: 0 0;
}

.icon--arrow {
  background-position: -24px 0;
}

<button type="button">
  <span class="icon icon--cart" aria-hidden="true"></span>
  Add to cart
</button>

The element's dimensions must match the sprite cell. A high-density sheet also needs a deliberate background-size so its device pixels map to the intended CSS-pixel grid.

Tradeoffs

Sprites reduce the number of independently requested files and ensure all regions arrive together. They also couple unrelated assets: changing one icon invalidates the whole sheet, unused regions are downloaded, coordinates are brittle, and responsive or differently colored icons are awkward.

Use backgrounds only for decorative imagery. A meaningful icon needs an accessible name from visible text or the containing control; the background itself cannot provide alternative text. SVG sprites or inline SVG are usually more flexible for single-color interface icons, while ordinary <img> elements are better for content images with alt, responsive candidates, and independent caching.

Measure request overhead, transfer size, decode cost, cache invalidation, and maintenance complexity before retaining a sprite pipeline solely for historical performance reasons.

Exercises

Beta

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

TL;DR