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.
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.
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.