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

Объедините несколько изображений в один лист спрайтов и сгенерируйте CSS-код.

Перетащите изображения сюда

или нажмите, чтобы загрузить несколько файлов

Why Use This Tool?

Высокоэффективные утилиты для оптимизации фронтенда

Reduce HTTP requests and speed up loading.

Автоматическая генерация координат

Мы делаем математику, чтобы вам не пришлось. Мгновенно получайте точные координаты X и Y для каждого отдельного изображения в вашем консолидированном спрайт-листе.

Алгоритм упаковки Smart-Grid

Наш движок интеллектуально упорядочивает изображения разного размера в максимально эффективную сетку, минимизируя пустое пространство и уменьшая итоговый размер файла.

Готовые к использованию CSS-классы

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

Настраиваемые режимы макета

Выбирайте между вертикальными полосами, горизонтальными полосами или наиболее эффективным режимом «Сетка» в зависимости от потребностей архитектуры вашего конкретного проекта.

Контроль отступов и интервалов

Добавьте пользовательский интервал между спрайтами, чтобы предотвратить «просачивание пикселей» — когда части соседней иконки случайно отображаются в вашем интерфейсе.

Защита локальной обработки памяти

Ваши ресурсы пользовательского интерфейса — ваша собственность. Вся упаковка и генерация кода происходят прямо в вашем браузере, гарантируя, что никакие данные никогда не покинут ваше устройство.

Руководство по высокоскоростным активам: как использовать генератор

Create sprites in minimal steps.

Соберите свои мелкие активы

Соберите все маленькие иконки, кнопки или кадры анимации, которые вы хотите объединить. Убедитесь, что они в высококачественном формате, например PNG.

Пакетная загрузка в инструмент

Выберите все файлы сразу и загрузите их. Инструмент немедленно создаст визуальный предварительный просмотр того, как их можно упаковать вместе.

Настройте оптимизацию

Отрегулируйте «Отступ», если вы беспокоитесь о краях, появляющихся на экранах retina, или выберите «Вертикальный» макет, если вы создаете боковое меню или диафильм.

Проверьте предварительный просмотр спрайта

Проверьте сгенерированный лист. Убедитесь, что каждый элемент виден, а сетка плотная и эффективная без лишнего пространства.

Скачайте изображение атласа

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

Мастерство создания спрайт-листов: секреты создания игровых активов

Актуальны ли спрайт-листы с HTTP/2?

Да! Хотя HTTP/2 лучше справляется с несколькими запросами, спрайт-листы все равно быстрее, поскольку они уменьшают общий объем метаданных и накладные расходы на сжатие.

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

Наш алгоритм smart-grid разработан для этого! Он упорядочит ваши изображения всех форм и размеров в максимально компактный прямоугольник.

Что использовать: JPG или PNG для моего спрайт-листа?

Мы настоятельно рекомендуем PNG. Он лучше справляется с «острыми краями» иконок и поддерживает прозрачность, что важно для большинства работ с веб-интерфейсом.

Есть ли ограничение на количество изображений, которые я могу включить?

Технически нет. Однако мы рекомендуем придерживаться около 50-100 изображений на лист, чтобы размеры файла не становились слишком большими.

Что такое «просачивание пикселей»?

Это происходит, когда субпиксельный рендеринг показывает полоску следующего изображения на листе. Добавьте 1-2 пикселя «Отступа» в нашем инструменте, чтобы предотвратить это.

Поддерживает ли этот инструмент SVG?

Этот инструмент предназначен для растровых спрайтов (PNG/JPG). Для SVG следует использовать подход «SVG Sprite», который обрабатывается по-другому в современных браузерах.

Как обновить спрайт-лист позже?

Просто загрузите исходные иконки плюс новую. Наш инструмент предоставит вам новый лист и новый CSS за секунды.

Бесплатен ли этот инструмент для разработчиков игр?

Да! Независимо от того, создаете ли вы веб-сайт или мобильную игру, наш генератор на 100% бесплатен без каких-либо коммерческих ограничений.

Могут ли браузеры кэшировать спрайт-листы?

Да! Это одно из самых больших преимуществ. Браузеру нужно кэшировать только один файл, чтобы иметь каждую иконку готовой для всех страниц вашего сайта.

Защищены ли мои собственные данные иконок?

Безусловно. Поскольку ваши файлы обрабатываются локально в вашем браузере, ваши дизайны никогда не загружаются, не сохраняются и не просматриваются нашей системой.