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

Плюсы:

• Уменьшение количества HTTP-запросов (все изображения в одном файле)
• Ускорение загрузки за счет кеширования одного файла
• Упрощение управления hover/active состояниями через CSS
• Меньший вес по сравнению с отдельными файлами (нет накладных расходов на каждый файл)

Минусы:

• Сложность обновления (изменение одного иконки требует перегенерации всего спрайта)
• Неэффективно если используются не все иконки из спрайта
• Проблемы с ретиной (нужно создавать спрайты в 2x размере)
• Сложность позиционирования (нужно точно указывать background-position)

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

.icon {
  background-image: url('sprite.png');
  width: 20px;
  height: 20px;
}
.icon-home {
  background-position: 0 0;
}
.icon-user {
  background-position: -20px 0;
}