Ответ
Плюсы:
- Уменьшение количества 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;
}