Загружаются ли мои изображения на сервер?

Нет. Все работает в вашем браузере с использованием API Canvas. Ваши файлы никогда не покидают ваше устройство.

Сколько изображений я могу добавить в один спрайт?

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

Что делает настройка максимальной ширины строки?

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

Могу ли я использовать сгенерированный CSS напрямую в своем проекте?

Да. Каждый класс спрайта включает URL background-image (указывающий на ваш загруженный PNG), background-position, width и height — просто вставьте его в любой стиль и примените класс к вашим HTML-элементам.

Какие форматы изображений я могу использовать в качестве входных спрайтов?

Любой формат, который ваш браузер может декодировать — PNG, JPEG, WebP, GIF, SVG, AVIF и другие. Выходной спрайт всегда является одним PNG для максимальной совместимости.

Загружает ли этот инструмент мои данные?

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

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

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

🗂️

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

Упаковано в один PNG + CSS — в вашем браузере, без загрузки

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

Об инструменте

Этот инструмент использует API Canvas браузера, чтобы упаковать ваши изображения в компактный PNG-спрайт полностью на вашем устройстве — ничего не загружается на сервер. Перетащите столько изображений, сколько нужно, установите максимальную ширину строки и отступы между спрайтами, и упаковщик разместит их по строкам, чтобы минимизировать потерю места. После генерации вы можете загрузить объединенный PNG и скопировать фрагмент CSS, который содержит класс для каждого спрайта с правильными значениями background-image, background-position, width и height, готовыми к вставке в ваш стиль. Поскольку весь процесс выполняется локально в браузере, он мгновенный и полностью приватный.

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

Перетащите свои изображения в область загрузки или нажмите, чтобы выбрать несколько файлов сразу.
Установите максимальную ширину строки (в пикселях) и отступы вокруг каждого спрайта, чтобы контролировать, насколько плотно они упакованы.
Нажмите «Создать спрайт» для упаковки всех изображений в один объединенный PNG, который сразу отобразится на холсте.
Скопируйте сгенерированный CSS — каждый спрайт получает свой собственный класс с правильными значениями background-position, width и height.
Скачайте PNG-спрайт и вставьте CSS в ваш стиль проекта — готово.

Частые вопросы

Загружаются ли мои изображения на сервер?: Нет. Все работает в вашем браузере с использованием API Canvas. Ваши файлы никогда не покидают ваше устройство.
Сколько изображений я могу добавить в один спрайт?: Нет жесткого лимита — инструмент упаковывает столько изображений, сколько позволяет память вашего браузера. Для лучшей производительности сохраните размеры отдельных спрайтов разумными.
Что делает настройка максимальной ширины строки?: Она ограничивает, насколько широкой может быть каждая строка спрайтов, прежде чем упаковщик начнет новую строку. Более высокое значение даст более широкий лист; более низкое значение даст более высокий и узкий лист.
Могу ли я использовать сгенерированный CSS напрямую в своем проекте?: Да. Каждый класс спрайта включает URL background-image (указывающий на ваш загруженный PNG), background-position, width и height — просто вставьте его в любой стиль и примените класс к вашим HTML-элементам.
Какие форматы изображений я могу использовать в качестве входных спрайтов?: Любой формат, который ваш браузер может декодировать — PNG, JPEG, WebP, GIF, SVG, AVIF и другие. Выходной спрайт всегда является одним PNG для максимальной совместимости.
Загружает ли этот инструмент мои данные?: Нет. Всё выполняется прямо в вашем браузере, поэтому ваши данные никогда не покидают устройство — после загрузки страницы он работает даже офлайн.