Генератор спрайт-изображений

Нажмите, чтобы загрузить изображение

Поддерживаемые форматы: PNG, JPG, WebP

Макет

Интервал между изображениями: 10px

050

Загрузите изображение для предпросмотра спрайта

Объединяйте несколько маленьких иконок в CSS-спрайтшит онлайн. Локальная обработка в браузере, без загрузки на сервер, а CSS-код с background-position генерируется автоматически для горизонтальной, вертикальной и сеточной раскладок.

Что такое спрайт-изображение (CSS Sprite)?

Спрайт (CSS Sprite) — это техника, при которой множество маленьких изображений объединяются в одно большое, а нужная иконка отображается через background-position. Слово «sprite» пришло из ранних игровых приставок, где несколько кадров анимации упаковывались в одну большую картинку и быстро переключались. Веб-фронтенд перенял эту идею и использует её, чтобы загружать множество маленьких иконок одним запросом.

**Зачем нужны спрайты?** В эпоху HTTP/1.1 каждая картинка порождала отдельный HTTP-запрос с TCP-рукопожатием, TLS-рукопожатием и накладными расходами на заголовки. Сто иконок — сто запросов. Спрайт складывает все иконки в одну картинку и завершает их загрузку одним запросом, заметно ускоряя первый экран. Мультиплексирование HTTP/2 снижает часть этого преимущества, но спрайт по-прежнему полезен для кэша CDN, gzip-сжатия и совместимости с HTTP/1.1.

**Базовый принцип:** Представьте спрайт 200×60 с тремя иконками 60×60 в ряд. Чтобы показать первую, задайте элементу 60×60: `background: url(sprite.png); background-position: 0 0;`. Для второй укажите -60px 0, для третьей — -120px 0. Наш инструмент автоматически выдаёт все эти координаты.

**Современные альтернативы:** SVG + use/symbol (рекомендуется, вектор, изменяемый цвет, анимация), Icon Font (широкая совместимость, кроссплатформенность), HTTP/2 Server Push, веб-шрифтовые иконки. У каждого варианта свои сценарии — выбирайте исходя из реальных требований проекта.

Варианты использования

Веб-проект с множеством маленьких иконок, которые нужно объединить в спрайт, чтобы сократить число HTTP-запросов и ускорить первый экран
Фронтенд-разработчик хочет централизованно управлять иконками проекта и автоматически генерировать CSS-код background-position
Команда готовит пакетную генерацию спрайта и CSS-кода и сразу передаёт результат коллегам для интеграции
После объединения прогнать итоговую картинку через [инструмент сжатия](/image/compress/), чтобы уменьшить общий размер и улучшить показатель LCP
Приложение, Electron или десктоп-клиент, где статические иконки нужно собрать в один файл внутри сборки
Email-HTML-шаблоны или статические блоги, где требуется несколько иконок с учётом совместимости с почтовыми клиентами
Дизайнер передаёт иконки в виде спрайта, чтобы фронтенд-инженер мог быстро встроить их в проект
Отдельный 2x-спрайт для Retina-экранов с адаптацией под 1x и 2x дисплеи через background-size

Как использовать

Нажмите на область загрузки или перетащите несколько изображений (поддерживаются JPG, PNG, WebP, GIF и др.)
Измените порядок иконок в левом списке с помощью ручки перетаскивания или кнопок вверх/вниз
Выберите в левой панели раскладку «Горизонтально», «Вертикально» или «Сетка»
Отрегулируйте отступ между иконками ползунком (рекомендуется 1–5 px)
Следите за живым предпросмотром справа, затем нажмите «Скачать» для сохранения PNG и «Копировать» для CSS-кода в проекте

Функции

Объединение одним кликом: загрузите несколько маленьких иконок или картинок и получите единый спрайт автоматически
Три режима раскладки: горизонтальная, вертикальная и сетка — свободное переключение под разные сценарии
Настраиваемый отступ: ползунок 0–50 px гибко управляет расстоянием между иконками
Сортировка перетаскиванием: меняйте порядок иконок прямо в списке, CSS-координаты обновляются автоматически
Мобильная сортировка: кнопки вверх/вниз для изменения порядка, удобно и в мобильном браузере
Автогенерация CSS: автоматически выдаются background-position, ширина и высота для каждой иконки
Живой предпросмотр: спрайт пересобирается мгновенно при любом изменении картинки или параметра
Копирование CSS в один клик: встроенная кнопка копирует полную таблицу стилей в буфер обмена
Скачивание PNG одним кликом: объединённое изображение сохраняется локально с фиксированным именем sprite.png
Локальная обработка в браузере: объединение через Canvas API без отправки файлов на сервер
Поддержка форматов: JPG, PNG, WebP, GIF и другие популярные форматы изображений
Сохранение прозрачности: итоговый PNG сохраняет альфа-канал исходных иконок, удобно для склейки

Best Practices

Retina 2x: используйте исходники 2x

Если ваши пользователи работают на Retina-экранах (Mac, iPhone, HiDPI Windows), загружайте 2x-исходники (например, иконки 32×32) и собирайте спрайт из них, а в CSS указывайте background-size: 32px auto для уменьшения до 16×16. Так и 1x, и 2x экраны будут выглядеть чётко при одной сборке.

Спрайты по-прежнему ценны и в проектах на HTTP/2

Мультиплексирование HTTP/2 снижает остроту проблемы числа запросов, но спрайты выигрывают в четырёх сценариях: переиспользование кэша CDN, высокая степень сжатия gzip/Brotli, прохождение внутренних прокси и совместимость с HTTP/1.1. Корпоративные интрасети, государственные и банковские системы, email-HTML-шаблоны по-прежнему опираются на HTTP/1.1, где спрайт незаменим.

PNG-8 vs PNG-24: иконки — PNG-8, градиенты — PNG-24

Инструмент выдаёт PNG фиксированно, но глубину цвета исходника выбираете вы. Плоские или одноцветные иконки лучше хранить в PNG-8 (без потерь с альфа-каналом, на 60–80% меньше PNG-24). Для иконок с градиентами, тенями и подсветкой нужен PNG-24. Инструмент принимает любые форматы, поэтому сначала оптимизируйте исходники PNG-компрессором.

CDN-стратегия: добавляйте хэш в имя файла

Не оставляйте итоговый sprite.png с фиксированным именем. Переименуйте его по контентному хэшу (например, sprite.a3f2b1.png) и настройте Cache-Control: max-age=31536000 для постоянного кэширования. Браузер скачает файл один раз, дальше он отдаётся из локального кэша и экономит больше трафика, чем HTTP/2. Наш инструмент отдаёт файл с именем sprite.png — переименуйте его вручную после загрузки.

Сжатие gzip / Brotli делает спрайт ещё компактнее

Объединённое изображение обладает большей непрерывностью пикселей, поэтому gzip/Brotli сжимают его намного эффективнее, чем разрозненные маленькие картинки. Nginx + gzip на уровне 1 уменьшает спрайт на 60–80%, Brotli — на 85% и более. С включённым Content-Encoding 1 МБ спрайта реально передаётся как 200–300 КБ — это самое недооценённое преимущество спрайтов.

CSS Modules / Vue scoped: оборачивайте :global()

Если проект использует CSS Modules или Vue scoped CSS, имена классов .icon-home и .sprite, выдаваемые инструментом, будут локально хэшированы и перестанут работать. Оберните общие классы через :global(.sprite) { ... } в .module.css и подключайте их за пределами scoped-блока. Альтернативно — не используйте CSS Modules, а опирайтесь на соглашение об именовании BEM.

Сочетайте с Icon Font: ключевые иконки в шрифт, сложные в спрайт

Самый стабильный подход в продакшене — комбинированный. UI-иконки общего назначения (настройки, закрыть, поиск, пользователь) делайте в Icon Font (изменяемый цвет, вектор, кроссплатформенность). Сложные цветные иконки (логотипы продуктов, баннеры) выносите в спрайт. Так вы используете сильные стороны обоих подходов и не получаете проблем тотальной поддержки одной схемы.

Для инженерных проектов — spritesmith, для прототипов — наш инструмент

В долгоживущих проектах подключайте spritesmith (Webpack) или gulp.spritesmith к сборочному конвейеру: правки исходников автоматически пересобирают спрайт, выдают файл с хэшем в имени, генерируют переменные SCSS/LESS. Наш инструмент рассчитан на прототипы без зависимостей и небольшие поставки, а для CI/CD-конвейеров больше подходят сборочные плагины.

Современные проекты могут мигрировать со спрайта на SVG symbol

Если проект поддерживает современные браузеры (Chrome / Safari / Firefox / Edge, а также IE 11+), имеет смысл мигрировать со спрайта на SVG symbol: один файл управляет всеми иконками, CSS управляет цветом и анимацией, отпадает поддержка координат background-position. Спрайт, выданный нашим инструментом, остаётся одноразовым активом и подходит на роль промежуточного решения при миграции.

Часто задаваемые вопросы

Что такое спрайт-изображение и зачем объединять картинки?

Спрайт (CSS Sprite) — это техника, при которой множество маленьких изображений объединяются в одно большое, а нужная иконка отображается через background-position. После объединения все иконки загружаются одним HTTP-запросом, что заметно сокращает число запросов и ускоряет отрисовку первого экрана по сравнению с загрузкой десятков отдельных файлов. Это классический приём фронтенд-оптимизации.

Как объединить несколько иконок в спрайт онлайн?

Загрузите изображения — инструмент автоматически объединит их в выбранной раскладке с живым предпросмотром. Справа автоматически выводится CSS-код background-position (с шириной и высотой) для каждой иконки, готовый к вставке в таблицу стилей. Итоговый спрайт сохраняется в формате PNG и скачивается одним кликом.

Как использовать сгенерированный CSS-код?

Положите sprite.png в каталог проекта (например, /img/sprite.png) и вставьте CSS-код в таблицу стилей. Добавьте класс .sprite и соответствующий .icon-xxx к элементу, который должен показывать иконку, например: <i class="sprite icon-home"></i>. Имена классов автоматически генерируются из исходных имён файлов.

Какие варианты раскладки поддерживаются?

Три режима: горизонтальный (иконки в один ряд слева направо), вертикальный (иконки в один столбец сверху вниз) и сеточный (иконки автоматически выстраиваются в квадратную матрицу, число столбцов — корень из количества, округлённый вверх). Переключайте режимы в левой панели для предпросмотра.

Можно ли регулировать отступ между иконками?

Да. В левой панели есть ползунок отступа от 0 до 50 px, рекомендуется 1–5 px. Разумный отступ предотвращает интерференцию крайних пикселей при CSS-позиционировании, но на использование не влияет: отступ находится внутри спрайта, а в CSS используются только точные координаты background-position.

Можно ли менять порядок иконок?

Да. Каждый элемент в левом списке можно перетаскивать мышью за специальную ручку, а на мобильных устройствах порядок меняется кнопками вверх/вниз. Спрайт и CSS-координаты пересобираются автоматически сразу после изменения порядка.

Какие форматы изображений поддерживаются?

Поддерживаются все распространённые форматы: JPG, PNG, WebP, GIF и другие. На выходе всегда PNG (с сохранением прозрачности). Для иконок рекомендуется PNG: прозрачный фон корректно сохраняется после объединения в спрайт.

Нужны ли спрайты в современных проектах?

После распространения HTTP/2 мультиплексирование уменьшило часть преимуществ спрайта, но он по-прежнему полезен для кэша CDN, gzip-сжатия и быстрой загрузки ключевых иконок на первом экране. Если у вас меньше десяти иконок или нужны цвет и анимация, лучше перейти на SVG symbol или Icon Font. Для большого набора статичных PNG-иконок спрайт остаётся стабильным и надёжным решением.

Размывается ли спрайт на Retina-экранах? Как это исправить?

Да, может размываться. У Retina-экранов (Mac, iPhone, HiDPI Windows) физических пикселей в 2–3 раза больше, чем CSS-пикселей, и обычный 1x-спрайт растягивается до 2x, из-за чего края выглядят размытыми. Решение: используйте 2x-исходники (32×32 вместо 16×16) и в CSS укажите background-size: 32px auto, уменьшив спрайт обратно до 16×16.

Теряется ли качество при объединении иконок?

Качество не теряется. Объединение просто размещает каждое изображение в нужной позиции большого холста. Никакой ресэмплинг, сжатие или коррекция цвета не выполняются. Итоговый PNG сохраняет исходное качество. Если нужно дополнительно уменьшить итоговый файл, воспользуйтесь нашим [инструментом сжатия изображений](/image/compress/).

Загружаются ли изображения спрайта на сервер? Безопасно ли это?

Нет, не загружаются. Всё объединение выполняется в вашем локальном браузере через Canvas API. Файлы не покидают устройство и удаляются после обработки. Внутренние иконки и неопубликованные логотипы можно обрабатывать без опасений.

Как скачать готовый спрайт?

Как только изображения загружены, инструмент автоматически строит предпросмотр. Нажмите кнопку «Скачать» слева, чтобы сохранить sprite.png локально. CSS-код выдаётся автоматически, а кнопка «Копировать» отправляет его в буфер обмена.

Можно ли задать имена классов вручную?

В текущей версии имена классов автоматически генерируются из исходных имён файлов с префиксом .icon-. Например, home.png превращается в .icon-home. Используйте в именах файлов латиницу, цифры и дефисы, чтобы получать чистые и читаемые CSS-классы.

Что выбрать: спрайт, Icon Font или SVG Symbol?

Зависит от сценария. Множество статичных PNG-иконок или нужна совместимость со старым IE — спрайт. Универсальные UI-иконки, которым нужно менять цвет и работать на разных платформах — Icon Font. Современный проект с цветом, анимацией и единым файлом — первый выбор это SVG Symbol. На практике схемы часто комбинируют: ключевые UI-иконки в Icon Font, сложные цветные — в спрайт.

Можно ли уменьшить готовый спрайт с помощью инструмента сжатия?

Да. Наш инструмент выдаёт PNG без потерь, и файл может быть довольно большим. Рекомендуемый процесс: соберите спрайт здесь, затем уменьшите PNG или конвертируйте в JPG (если прозрачность не нужна) с помощью [инструмента сжатия](/image/compress/), а при необходимости переведите в WebP через [инструмент конвертации](/image/convert/). Комбинация инструментов максимально ускоряет загрузку.

Глоссарий

Спрайт (CSS Sprite): Техника, при которой множество маленьких изображений объединяются в одно большое, а нужная иконка отображается через background-position. Классический приём оптимизации производительности фронтенда.
background-position: CSS-свойство, задающее начальную координату фонового изображения. Спрайты используют отрицательные значения, чтобы сдвигать фон влево или вверх до нужной иконки. Например, background-position: -60px 0 показывает иконку со смещением 60 px.
background-size: CSS-свойство, задающее размер отображаемого фонового изображения. Ключ к адаптации под Retina: после генерации спрайта из 2x-исходников используйте background-size: 32px auto в CSS, чтобы вернуть 1x-размер; так 1x и 2x экраны останутся чёткими.
Сеточная раскладка (Grid Layout): Сеточный режим этого инструмента автоматически вычисляет число столбцов как корень из количества иконок (округлённый вверх) и располагает иконки по строкам в квадрат. Например, девять иконок превращаются в сетку 3×3.
Отступ иконок (Padding): Пиксельный зазор между соседними изображениями в спрайте. Рекомендуется 1–5 px, чтобы избежать интерференции крайних пикселей. Зазор находится внутри спрайта, а в CSS используются только точные координаты.
Прозрачный канал PNG: Формат PNG поддерживает альфа-канал, поэтому фон иконок может быть прозрачным. Спрайт сохраняет формат PNG, и прозрачные иконки корректно отображаются после объединения.
Мультиплексирование HTTP/2: Протокол HTTP/2 обрабатывает несколько запросов параллельно в одном соединении, что снижает часть преимуществ спрайта. Однако HTTP/2 уступает объединённой картинке в настройке CDN, совместимости со старыми браузерами и степени gzip-сжатия.
SVG Symbol: Элемент <symbol> в SVG и ссылки на него через <use>: все иконки хранятся в одном SVG-файле, а CSS управляет заливкой, обводкой и анимацией. Первая замена спрайта в современных проектах.
DPR (соотношение физических и CSS-пикселей): Device Pixel Ratio — отношение физических пикселей к CSS-пикселям. У Retina-экранов DPR = 2, поэтому иконке 16×16 в CSS нужны 32×32 физических пикселя. DPR — ключевой параметр адаптации спрайта к Retina-экранам.

Сравнение трёх режимов раскладки спрайта

Режим раскладки	Правило размещения	Типичное применение
Горизонтально	Иконки в один ряд слева направо	Навигация, кнопки Tab, горизонтальные панели
Вертикально	Иконки в один столбец сверху вниз	Вертикальные меню, префиксы списков, верх-низ структуры
Сетка	Автоматически в квадратную матрицу по числу иконок	Универсальный вариант, лучший старт при неизвестном числе

Отступ (px)	Сценарий	Рекомендация
`0px`	Чистые края иконок, есть прозрачный padding	Максимальная плотность, возможны помехи на краях
`1-2px`	Высококачественные иконки, минимальный запас	Рекомендуемое значение, баланс плотности и стабильности
`3-5px`	Обычные иконки с тенью или обводкой	Безопасная дистанция, популярный выбор
`6-10px`	Сильная разница размеров иконок, обводка	Крупные иконки не закрывают мелкие
`10-50px`	Отладка и визуальная группировка	Только для предпросмотра, не для продакшена

Параметры адаптации 2x-спрайта для Retina-экранов

DPR экрана	CSS-размер	Размер исходника	background-size
`1x`	`16×16`	`16×16`	`auto`
`2x`	`16×16`	`32×32`	`32px auto`
`3x`	`16×16`	`48×48`	`48px auto`
`2x`	`24×24`	`48×48`	`48px auto`

Authoritative References

ReferenceMDN - CSS background-position
ReferenceMDN - Реализация спрайтов в CSS
ReferenceMDN - background-size
ReferenceMDN - SVG <symbol> и <use>
ReferenceWeb.dev - Замена картинок CSS-спрайтами
ReferenceWikipedia - Спрайт (компьютерная графика)