Что такое CSS-спрайты?

CSS-спрайты — это метод оптимизации, который позволяет объединить несколько изображений в одно большое изображение. Вместо загрузки каждого изображения отдельно, браузер загружает один большой файл, а затем использует CSS-свойства background-image, background-position и width/height для отображения нужной части этого изображения.

Преимущества использования CSS-спрайтов:

• Уменьшение количества HTTP-запросов: Загрузка одного файла вместо множества уменьшает нагрузку на сервер и ускоряет время отрисовки страницы.
• Кэширование: Одно большое изображение кэшируется браузером, что улучшает производительность при повторных посещениях.
• Уменьшение размера файла: В некоторых случаях объединение изображений может привести к небольшому уменьшению общего размера файлов из-за оптимизации сжатия.

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

<div class="icon home"></div>
<div class="icon settings"></div>

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

.icon {
  width: 32px; /* Ширина иконки */
  height: 32px; /* Высота иконки */
  background-image: url('sprites.png'); /* Путь к файлу спрайта */
  background-repeat: no-repeat;
}

.icon.home {
  background-position: 0 0; /* Позиция иконки "home" в спрайте */
}

.icon.settings {
  background-position: -32px 0; /* Позиция иконки "settings" в спрайте */
}

В данном примере sprites.png — это файл спрайта, содержащий иконки "home" и "settings". Свойство background-position задает смещение, чтобы отобразить нужную иконку.