CSS спрайты: оптимизация иконок и графики для веб-сайта

Каждый HTTP-запрос к отдельной иконке замедляет загрузку страницы. CSS спрайты решают эту проблему радикально: объединяют десятки изображений в один файл и избавляют браузер от лишних сетевых запросов.

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

CSS спрайт — это единое изображение (PNG, WebP или SVG), содержащее несколько иконок или картинок, расположенных в определённой сетке. В CSS каждая иконка задаётся как background-image с точным background-position, показывающим нужный фрагмент общего файла.

Спрайт уменьшает количество HTTP-запросов, а значит — ускоряет первую загрузку страницы. Раньше это было критически важно при HTTP/1.1, когда браузер мог открывать лишь 6 параллельных соединений на домен.

Как работает CSS спрайт

Допустим, спрайт содержит три иконки размером 24×24 пикселя, расположенных в ряд:

.icon {
  background-image: url('/sprites/icons.png');
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
}

.icon-home    { background-position: 0 0; }
.icon-search  { background-position: -24px 0; }
.icon-profile { background-position: -48px 0; }

Отрицательные значения background-position сдвигают изображение влево/вверх, показывая нужный фрагмент в «окне» элемента. Браузер загружает один файл, а CSS выбирает нужную иконку по смещению.

SVG спрайты — современный подход

Растровые PNG-спрайты теряют чёткость на Retina-дисплеях. Современная альтернатива — SVG-спрайты: масштабируемые, чёткие при любом разрешении и меньшие по весу.

Symbol + use pattern

SVG-спрайт определяет иконки через <symbol> с уникальным id, а затем вставляет их через <use>:

<!-- sprite.svg (скрытый спрайт, inline в HTML) -->
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
  </symbol>
  <symbol id="icon-search" viewBox="0 0 24 24">
    <path d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z"/>
  </symbol>
</svg>

<!-- Использование иконки -->
<svg class="icon"><use href="#icon-home"/></svg>
<svg class="icon"><use href="#icon-search"/></svg>

Преимущества SVG спрайтов

• Масштабируемость: чёткость на экранах любой плотности пикселей
• Стилизация через CSS: цвет, размер и hover-эффекты через fill и stroke
• Accessibility: можно добавить <title> и aria-labelledby прямо в <symbol>
• Меньший вес: SVG-иконки обычно весят меньше PNG-аналогов при лучшем качестве

Когда использовать спрайты

Спрайты остаются актуальными в конкретных сценариях:

Сценарий	Рекомендация
HTTP/1.1 сервер, много иконок	PNG или SVG спрайт обязателен
HTTP/2 или HTTP/3	Спрайты менее критичны (мультиплексирование)
Иконочный шрифт (FontAwesome)	SVG спрайт — лучшая замена
Анимированные иконки	CSS-анимация спрайта или Lottie
Единичные крупные иллюстрации	Спрайты не нужны

При использовании HTTP/2 браузер мультиплексирует запросы в одном соединении, поэтому выгода от спрайтов снижается. Тем не менее единый SVG-файл по-прежнему упрощает поддержку иконочной системы.

Инструменты для создания спрайтов

Собирать спрайт вручную неудобно — положение каждой иконки нужно вычислять точно. Автоматизировать процесс помогают:

• онлайн-генераторы: загружаете SVG-файлы, получаете готовый спрайт и CSS-карту
• gulp-svg-sprite / webpack-svg-sprite: интеграция в сборку проекта
• svg-sprite (npm): CLI-утилита для пакетной обработки иконок
• Figma → SVG export: экспорт иконок из дизайна с именами, совпадающими с id спрайта

Подробнее об оптимизации SVG-файлов и генерации спрайтов читайте в руководстве по SVG Sprite Generator, а об оптимизации изображений для SEO — в руководстве по image optimization.

Инструмент на reChecker

Генератор CSS спрайтов на reChecker позволяет загрузить набор SVG-иконок и получить готовый спрайт-файл вместе с CSS-картой смещений — без установки инструментов сборки.

Открыть инструмент на reChecker →