Объясните CSS sprites и как их внедрить на сайте

Question

Accepted Answer

## CSS-спрайты

**CSS sprites** объединяют много мелких картинок в один большой файл — классика для иконок.

Как внедрять:

1. Собрать спрайт (генератор) и получить CSS.
2. Для каждой иконки — класс с `background-image`, `background-position`, при необходимости `background-size`.
3. Повесить класс на элемент.

**Плюсы:**

- меньше HTTP-запросов (один на spritesheet); при HTTP/2 выигрыш меньше критичен;
- hover-состояния уже в том же файле — меньше «мигания» при первой подгрузке.

```css
.icon {
  background-image: url(/sprites.png);
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
}
.icon-search { background-position: -48px 0; }
```

## Итог

Спрайты — оптимизация множества мелких bitmap-иконок; сегодня часто альтернативы — SVG-sprite / icon font / отдельные SVG.