CSS Sprites Basics: How Sprite Sheets Work

What Are CSS Sprites?

CSS sprites are a web performance technique where multiple small images are combined into a single larger image called a sprite sheet. Instead of loading each image as a separate HTTP request, the browser downloads one image and uses CSS background-position to display only the relevant portion for each element.

How Sprites Work

The core mechanism relies on three CSS properties:

.icon {
  background-image: url('sprite-sheet.png');
  background-repeat: no-repeat;
  width: 32px;
  height: 32px;
}

.icon-home {
  background-position: 0px 0px;
}

.icon-search {
  background-position: -32px 0px;
}

.icon-settings {
  background-position: -64px 0px;
}

Each element has a fixed width and height that acts as a viewport window. The background-position shifts the sprite sheet so only the desired icon is visible through that window. Negative values move the image left and up.

Why Sprites Improve Performance

Every HTTP request has overhead — DNS lookup, TCP handshake, TLS negotiation, and server processing time. Even with keep-alive connections, the browser has a limited number of concurrent connections per domain (typically 6 in HTTP/1.1). With 50 small icons, the browser must queue requests and wait.

With a sprite sheet:

• 1 request instead of 50
• Less total data because the single PNG compresses better than 50 separate files (shared color palettes, better deflate compression)
• No request queuing — the image is available immediately after one download
• Predictable caching — one cache entry instead of 50

Sprite Sheet Structure

A typical sprite sheet arranges images in a grid:

┌──────┬──────┬──────┬──────┐
│ icon │ icon │ icon │ icon │
│  1   │  2   │  3   │  4   │
├──────┼──────┼──────┼──────┤
│ icon │ icon │ icon │ icon │
│  5   │  6   │  7   │  8   │
└──────┴──────┴──────┴──────┘

Each cell has uniform dimensions. Optional padding between cells prevents pixel bleeding at fractional zoom levels or subpixel rendering.

When to Use Sprites

CSS sprites are most effective when:

• You have many small images (icons, UI elements, buttons)
• The images are used across multiple pages
• The images are unlikely to change frequently
• The connection is HTTP/1.1 (where request multiplexing is limited)
• You need to support email HTML clients