logo
GeekFormat

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

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

Формат поддержки: {форматы}

050

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

Объединяйте иконки в CSS-спрайт онлайн. Автоматическая генерация CSS-кода, перетаскивание для сортировки и настраиваемые отступы.

Похожие

Сканер QR-кодов

Изменение размера

Поворот и отражение

Изображение в ASCII

Base64 в Изображение

Генератор slug

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

  • Объединить иконки навигации сайта в один спрайт для ускорения загрузки
  • Создать sprite sheet для библиотеки UI-компонентов
  • Оптимизировать загрузку иконок интернет-магазина
  • Подготовить набор иконок для веб-приложения с минимальным количеством запросов

Функции

  • Объединение одним кликом: загрузите несколько иконок и получите готовый CSS-спрайт для сокращения HTTP-запросов
  • Автоматический CSS-код: точные значения background-position рассчитываются автоматически — копируйте и вставляйте в проект
  • Гибкая раскладка: горизонтальная, вертикальная или сеточная — перетаскивайте иконки для изменения порядка
  • Настраиваемые отступы: задайте расстояние между иконками для корректного CSS-позиционирования
  • Предпросмотр и экспорт: просматривайте результат и CSS-код в реальном времени, скачивайте без потерь

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

  1. Загрузите иконки (PNG, JPG) для объединения в спрайт
  2. Настройте порядок иконок перетаскиванием и выберите раскладку
  3. Задайте отступы между иконками при необходимости
  4. Скачайте спрайт-изображение и сгенерированный CSS-код

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

Что такое CSS-спрайт и зачем он нужен?

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

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

Загрузите иконки (PNG, JPG), и инструмент автоматически объединит их в спрайт. Меняйте порядок перетаскиванием, выбирайте раскладку и получите готовый CSS-код с точными значениями background-position.

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

Да. Задайте горизонтальные и вертикальные отступы, чтобы иконки не перекрывались при CSS-позиционировании.

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

Горизонтальная, вертикальная и сеточная раскладки. Выберите оптимальное расположение для вашего проекта.

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

Нет. Обработка без потерь происходит в браузере — иконки сохраняют исходную чёткость и детали.