Компрессор спрайтов изображений

• Мгновенное сжатие спрайтов изображений в браузере: сжимайте CSS-спрайты мгновенно в браузере с помощью квантования цветовой палитры методом медианного разреза — без загрузки на сервер, без облачной обработки и без ожидания. Компрессор спрайтов изображений обрабатывает ваш PNG полностью на устройстве за секунды.
• Безопасный онлайн-компрессор спрайтов изображений: ваш спрайт никогда не покидает устройство. Компрессор спрайтов изображений работает целиком в браузере: без загрузки на сервер, без передачи данных и 100 % конфиденциально. Безопасно для проприетарных UI-ресурсов, наборов иконок и рабочих спрайтов.
• 5 вариантов размера палитры для точного контроля: компрессор спрайтов изображений предлагает пять размеров палитры от 16 до 256 цветов, чтобы выбрать баланс между размером файла и визуальным качеством. CSS-спрайты с плоскими иконками обычно выглядят одинаково при 64–128 цветах с сокращением размера на 30–60 %.
• Онлайн-компрессор спрайтов изображений без установки: сжимайте CSS-спрайты прямо в браузере — без загрузки программ, без плагинов и без аккаунта. Работает в любом современном браузере в Windows, macOS и Linux.

• Оптимизация производительности старых сайтов: сжимайте CSS-спрайты, используемые на старых сайтах, чтобы сократить объём HTTP-запросов. Компрессор спрайтов изображений уменьшает размер PNG-спрайтов на 30–60 % с помощью квантования палитры, ускоряя загрузку страниц без изменения разметки спрайтов и значений CSS background-position.
• Оптимизация спрайтов тем WordPress: сжимайте спрайты, используемые в темах и плагинах WordPress, чтобы улучшить оценки PageSpeed Insights. Компрессор спрайтов изображений работает с любым PNG-спрайтом: загрузите спрайт, выберите размер палитры и замените исходный файл в папке ресурсов темы.
• Сжатие спрайтов иконок тем Shopify: уменьшайте размер спрайтов иконок, используемых в темах Shopify, чтобы ускорить загрузку магазина. Компрессор спрайтов изображений идеален для плоских по цвету спрайтов иконок: 64 цвета обычно дают визуально неотличимый результат при файле на 40–50 % меньше.
• Оптимизация ресурсов библиотек UI-компонентов: сжимайте спрайты иконок, используемые в библиотеках компонентов и дизайн-системах, перед публикацией в npm. Компрессор спрайтов изображений уменьшает размер загрузки графических ресурсов вашего пакета без необходимости в конвейере обработки изображений на этапе сборки.
• Сжатие спрайтов для игр: сжимайте спрайты для браузерных игр и интерактивных приложений, чтобы сократить время первоначальной загрузки. Компрессор спрайтов изображений сохраняет прозрачность и размеры изображения: сжатый спрайт работает как прямая замена оригинала.
• Миграция старых спрайтовых схем: сжимайте существующие CSS-спрайты в рамках аудита производительности перед переходом на SVG-иконки или иконочные шрифты. Компрессор спрайтов изображений помогает оценить экономию размера, достижимую при текущем подходе со спрайтами, в сравнении с усилиями на полную миграцию.

CSS-спрайт — это одно PNG-изображение, содержащее несколько меньших изображений (иконки, кнопки, элементы интерфейса), упорядоченных в сетку. CSS-правила background-position показывают отдельные спрайты, смещая фоновое изображение. Спрайты уменьшают число HTTP-запросов, но могут быть большими PNG-файлами. Наш компрессор спрайтов изображений уменьшает размер спрайта с помощью квантования цветовой палитры методом медианного разреза — алгоритма, который сокращает число уникальных цветов изображения с миллионов до фиксированной палитры (16–256 цветов) и затем перекодирует PNG. Это тот же приём, что используют pngquant и ImageOptim, реализованный полностью в браузере через Canvas API.

1. 1. Загрузите спрайт: перетащите PNG-спрайт в зону загрузки или нажмите, чтобы выбрать файл. Изображение загружается в Canvas API браузера — данные не отправляются ни на какой сервер. Поддерживаются форматы PNG, GIF, BMP и WebP.
2. 2. Выберите размер палитры и нажмите «Сжать спрайт»: компрессор сэмплирует пиксели изображения, строит оптимальную цветовую палитру методом медианного разреза, сопоставляет каждый пиксель с ближайшим цветом палитры и перекодирует результат в PNG. Обработка полностью выполняется в вашем браузере.
3. 3. Скачайте сжатый спрайт: сжатый PNG скачивается автоматически. Панель результатов показывает исходный размер, сжатый размер и процент сокращения. При необходимости нажмите «Скачать снова». Замените исходный файл спрайта в проекте — изменения CSS не требуются.

• Цветовая палитра: число уникальных цветов сокращается с миллионов (24-битный PNG) до выбранного размера палитры (16–256 цветов). Каждый пиксель сопоставляется с ближайшим цветом палитры по евклидову расстоянию в пространстве RGB.
• Кодирование PNG: перекодированный PNG использует индексированный цветовой режим (на основе палитры) вместо true color, что значительно лучше сжимается алгоритмом DEFLATE — тем самым, что применяется внутри PNG-файлов.
• Прозрачность сохраняется: значения альфа-канала сохраняются при квантовании — прозрачные и полупрозрачные пиксели исходного спрайта остаются в сжатом результате.
• Размеры не меняются: ширина и высота изображения идентичны исходным — сжатый спрайт является прямой заменой и работает с существующими CSS-правилами background-position без каких-либо изменений.

Для плоских по цвету спрайтов иконок (UI-иконки, иконки навигации, иконки соцсетей) 64 цвета обычно дают визуально неотличимый результат при файле на 40–50 % меньше. Для спрайтов с градиентами или на основе фотографий используйте 128 или 256 цветов, чтобы избежать заметной ступенчатости цвета. Если в сжатом результате видны цветовые артефакты, увеличьте размер палитры. Компрессор спрайтов изображений показывает точную экономию в байтах для каждого размера палитры, так вы найдёте оптимальную настройку для своего конкретного спрайта.