Каждый 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-картой смещений — без установки инструментов сборки.