Definition
A performance technique combining many small images (icons, buttons) into one file and using background-position to display the correct portion—reducing HTTP requests on high-latency connections.
Why It Matters
Although newer technologies have reduced its necessity, the sprite technique remains a classic optimization for managing multiple visual assets. It teaches the fundamental principle of amortizing network latency by batching requests into a single download.
Core Concepts
- Single Image File: Contains all icon states in a grid or strip.
background-image: Points to the sprite sheet.background-position: Negative offsets window the desired icon into view.- Tradeoff: Fewer HTTP requests vs harder maintenance when icons change individually.
.icon {
background-image: url('icons.png');
display: inline-block;
width: 20px;
height: 20px;
}
.icon-home { background-position: 0 0; }
.icon-mail { background-position: -20px 0; }