Что такое sprite

Спрайт — это изображение, содержащее несколько графических элементов (иконки, кнопки и т.д.), объединённых в один файл. Используется для оптимизации загрузки, уменьшая количество HTTP-запросов.

Пример использования в CSS:

.icon {
  background-image: url('sprite.png');
  background-repeat: no-repeat;
  width: 32px;
  height: 32px;
}

.icon-home {
  background-position: 0 0;
}

.icon-settings {
  background-position: -32px 0;
}

Преимущества:

• Меньше запросов к серверу
• Ускорение загрузки страницы
• Удобство управления графикой

Недостатки:

• Сложность обновления (нужно пересобирать спрайт)
• Избыточность, если используются не все элементы