Генератор CSS-спрайтов

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

🧩

Перетащите изображение сюда или нажмите, чтобы загрузить

PNG, JPG, WEBP, BMP (до 40)

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

CSS-спрайт объединяет множество иконок в одно изображение и использует background-position для отображения нужной части на странице.

Это значительно сокращает количество запросов изображений, которые делает браузер, — распространённая оптимизация производительности фронтенда.

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

Создайте спрайт за три шага:

  • Загрузите несколько изображений (до 40).
  • Выберите горизонтальную, вертикальную или сеточную раскладку и настройте отступ.
  • Нажмите «Создать», чтобы скачать спрайт и скопировать CSS-код.

Советы

  • Сначала приведите размеры иконок к единому виду — спрайт-лист будет аккуратнее.
  • PNG сохраняет прозрачность, что отлично подходит для иконок.
  • Сгенерированный CSS использует относительный путь sprite.png — поправьте его под фактическое место хранения файла.

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

Что такое CSS-спрайт?+
Спрайт объединяет несколько маленьких изображений в одно большое. CSS-свойство background-position используется, чтобы показывать только его часть, уменьшая количество HTTP-запросов и ускоряя загрузку.
В чём разница между тремя раскладками?+
Горизонтальная раскладка располагает все изображения в ряд, вертикальная — друг под другом, а сеточная — по строкам и столбцам из примерно квадратных ячеек.
Как использовать сгенерированный CSS?+
Каждая иконка соответствует стилю .icon-N, содержащему её ширину, высоту, путь к фоновому изображению и отрицательные смещения. Просто скопируйте его в свою таблицу стилей.
Сколько изображений можно объединить за раз?+
Вы можете загрузить до 40 изображений за раз и регулировать отступ между ними — перегенерация происходит в реальном времени.

Похожие инструменты

Изображение в ASCII-артВеб-оптимизатор изображенийГенератор SVG-волн

Генератор CSS-спрайтов — Бесплатные онлайн-генератор css-спрайтов, генератор спрайт-листов, спрайт-лист, css спрайт, объединение изображений. Без регистрации. Работает в вашем браузере.