What are CSS sprites?

CSS

The short answer

CSS sprites combine multiple small images into a single image file. You use CSS background-position to show only the portion you need. This reduces the number of HTTP requests, which used to be a major performance concern. With HTTP/2 and modern icon solutions (SVG, icon fonts), sprites are less common today.

How they work

You have one large image containing all your icons. Then you use CSS to display just the right section:

.icon {
  width: 32px;
  height: 32px;
  background-image: url('sprites.png');
  background-repeat: no-repeat;
}
.icon-home {
  background-position: 0 0;
}
.icon-search {
  background-position: -32px 0;
}
.icon-settings {
  background-position: -64px 0;
}

Each class shifts the background position to show a different icon from the same image.

Why they existed

With HTTP/1.1, each image required a separate HTTP request. A page with 30 small icons meant 30 requests. Each request had overhead (DNS lookup, connection, headers). Combining them into one sprite reduced it to 1 request.

Modern alternatives

  • SVG icons — scalable, stylable with CSS, small file size
  • Icon fonts — Font Awesome, Material Icons
  • Inline SVG — no extra request at all
  • HTTP/2 — multiplexes requests over a single connection, reducing the need for sprites

Interview Tip

Explain that sprites solved a performance problem (too many HTTP requests) by combining images. Then mention that HTTP/2 and SVGs have made sprites largely unnecessary. This shows you know the history and what to use today.

Why interviewers ask this

This is a knowledge question about web performance history. Interviewers want to see if you understand why sprites existed and what replaced them. It also shows you understand how HTTP request overhead affects performance.

Table of Contents