CSS — Image Sprites

What a sprite is

One image file containing many icons, displayed through a keyhole:

.icon {
    width: 24px;
    height: 24px;                 /* the "keyhole" */
    background-image: url("icons.png");
    background-repeat: no-repeat;
}

.icon-home   { background-position: 0 0; }
.icon-search { background-position: -24px 0; }    /* slide left 24px */
.icon-user   { background-position: -48px 0; }

(Each element shows a different window onto the same sheet — negative positions shift the view.)

icons.png (the sheet)
┌──────┬──────┬──────┐
│ home │search│ user │     each cell = 24×24
└──────┴──────┴──────┘
      0    -24    -48   ← x offsets

Why this technique existed

In HTTP/1.1 days every file was a separate request. Fifty icons = fifty round-trips. Sprites bundled them into ONE request — a massive win circa 2010.

The math pattern

Grid sprites make positions predictable:

/* nth icon in a row: x = -(n-1) * CELL */
.icon:nth(4) { background-position: -72px 0; }

/* two-row sheet: y = -(row-1) * CELL */
.icon-mail { background-position: 0 -24px; }

Hover states live on the second row:

.icon-home:hover { background-position: 0 -24px; }  /* same icon, highlighted variant below */

Modern status: mostly historical

HTTP/2 multiplexes requests cheaply — separate SVG files no longer hurt. Better options now:

Need	Modern answer
Icons	inline SVG / icon fonts / SVG sprite (<symbol> + <use>)
Many small photos	srcset individual files
One-request bundling	build tools

The modern sprite: SVG symbols

<svg style="display:none">
    <symbol id="icon-home" viewBox="0 0 24 24">…</symbol>
    <symbol id="icon-search" viewBox="0 0 24 24">…</symbol>
</svg>

<svg class="ic"><use href="#icon-home"/></svg>
<svg class="ic"><use href="#icon-search"/></svg>

Same one-request benefit, but scalable, recolorable via currentColor, and addressable by ID instead of pixel math.

Where image sprites still appear

1. Legacy codebases (recognize and translate)
2. Game-style UIs / pixel art sheets
3. Massive repeated decorative assets on HTTP/1.1 embedded contexts

Reading legacy sprite CSS

Translation guide:

.sprite { background: url("sheet.png") no-repeat; }
.s-btn-save   { background-position: -16px 0;    width: 48px; }
.s-btn-cancel { background-position: -64px -16px; width: 64px; }

= "window at these coordinates into the shared sheet." Replace opportunistically with <use> icons.

Mini Practice

1. Build a 3-icon PNG sheet in any editor; wire three classes with positions.
2. Add hover variants in a second row.
3. Convert the same icons to an SVG symbol sprite with <use>.
4. Recolor the SVG version via currentColor — impossible with the PNG.
5. Find a sprite in any older codebase; document its grid math.

Next: counters →