Какие плюсы и минусы sprite?

CSS-спрайты (объединение изображений в один файл). Плюсы: меньше HTTP-запросов, экономия. Минусы: сложность поддержки, устарели с HTTP/2 и SVG-иконками.

Что такое спрайт

Объединение нескольких изображений (иконок) в один файл; нужную часть показывают через background-position:

.icon-home {
  background: url('sprite.png');
  background-position: -20px 0; /* вырезаем нужную иконку */
}

Плюсы

• Меньше HTTP-запросов — одна картинка вместо десятков (актуально было для HTTP/1.1 с лимитом ~6 параллельных запросов).
• Быстрее загрузка (исторически) — меньше оверхеда на соединения.
• Кеширование — один файл кешируется целиком.

Минусы

• Сложность поддержки — при изменении одной иконки пересобирать весь спрайт, пересчитывать позиции.
• Негибкость — трудно менять размеры, цвета (растровые).
• Устарели — с HTTP/2 мультиплексирование убрало проблему множества запросов, поэтому выгода спрайтов исчезла.
• Retina — нужны отдельные спрайты под плотность экрана.

Современные альтернативы

• SVG-иконки (inline или SVG-спрайты) — векторные, масштабируемые, красятся через currentColor.
• Иконочные шрифты (устаревают).
• HTTP/2 — множество мелких запросов больше не проблема.

Коротко для собеседования

CSS-спрайты объединяют изображения в один файл (показ через background-position). Плюсы: меньше HTTP-запросов, кеширование (актуально для HTTP/1.1). Минусы: сложность поддержки (пересборка при изменении), негибкость, устарели с HTTP/2 (мультиплексирование) и SVG-иконками (векторные, масштабируемые, currentColor).