CSS Sprite

A CSS sprite is a technique where multiple images are combined into a single image file, and CSS background-position properties are used to display only the relevant portion of the combined image. This reduces the number of HTTP requests required to load a page, improving load times — a technique popularized before HTTP/2 multiplexing reduced its necessity.

The performance impact of CSS sprites is measured using Google PageSpeed Insights and Lighthouse, which track the number of HTTP requests and waterfall loading diagrams. While HTTP/2 has reduced the need for sprites, they are still used in high-traffic sites where minimal request overhead is critical.