Image Sprite
A technique combining multiple small images into a single file, using CSS background-position to display specific regions, reducing HTTP request count.
Image sprites combine multiple small images (icons, buttons) into one large image, using CSS background-position to display specific regions. This technique was widely adopted in the HTTP/1.1 era when reducing request count significantly improved performance.
Loading 20 individual icons requires 20 HTTP requests, but a single sprite requires just one. Each icon is displayed by specifying coordinates like background-position: -32px -64px;. Precise pixel-level coordinate management is required, with sprite generation tools automatically outputting coordinate maps.
HTTP/2 multiplexing has greatly reduced concurrent request overhead, diminishing the need for sprites. Modern icon delivery favors SVG or icon fonts, though animation sprite sheets remain relevant in game development and specific use cases.