Sprites

CSS Sprites consolidate multiple images into a single file to slash HTTP requests and accelerate page rendering.

Performance hinges on minimizing round-trips: Sprites achieve this by packing icons, buttons, and UI elements into one master grid. By using the CSS background-position property, developers display specific segments of the master image exactly where needed. This technique eliminates the flicker often seen during hover state transitions and reduces total file overhead by leveraging a single global color palette. It remains a core optimization strategy for high-traffic interfaces (like the Google search results page) where every millisecond of latency impacts the bottom line.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites