Как устроены CSS Sprites (по мотивам CSS-Tricks)?

Question

Accepted Answer

## Идея CSS Sprites

Несколько изображений упаковывают в один файл; через `background-position` показывают нужный фрагмент.

```css
.icon {
  width: 32px;
  height: 32px;
  background: url(sprite.png) no-repeat;
}
.icon-home { background-position: 0 0; }
.icon-user { background-position: -32px 0; }
```

Цель — сократить число запросов и заранее иметь hover-состояния в том же файле. С HTTP/2 мотивация слабее, но паттерн всё ещё встречается в legacy и иконочных наборах.

## Итог

Sprite = один bitmap + координаты кадра; альтернативы сегодня — SVG и отдельные оптимизированные ассеты.