Пакетное сжатие прозрачных PNG без порчи краёв логотипа

Только что закончил набор бренд-ассетов для интернет-магазина. Шестнадцать прозрачных PNG — логотипы в трёх размерах, несколько угловых значков, пара дизайнов стикеров. В Figma выглядят идеально. Экспортируешь как PNG с включённой прозрачностью, кидаешь папку на рабочий стол и проверяешь общий размер: 2,4 МБ. На шестнадцать маленьких графики. На мобильном это две секунды загрузки до того как хоть что-то на странице начнётся.

Запускаешь компрессор. Размеры падают драматически — отлично. Но потом загружаешь сжатую версию на страницу магазина и замечаешь что-то не то по краям логотипа: тонкая белая линия где был плавный переход, или зубчатая лесенка вдоль изогнутого края. Это ловушка сжатия прозрачных PNG и почти никто об этом не говорит, потому что большинство инструментов прячет проблему за слишком маленьким превью. Я покажу что именно происходит под капотом, дам реальные цифры и скажу какой подход для какого типа ассета подходит.

Цифры: реальный прозрачный логотип, три пути сжатия

Я специально создал тестовое изображение: композиция 1200×1200 пикселей с центральным бейджем-логотипом, размытым свечением (мягкий альфа) и несколькими жёсткокрайми стикерами в углах. Используется RGBA — четыре канала вместо трёх — каждый пиксель несёт красный, зелёный, синий и непрозрачность. Прогнал через три пути и замерил всё:

Что реально делает PNG8 (и почему он портит мягкие края)

PNG8 означает индексированный PNG. Вместо хранения отдельного RGB-значения для каждого пикселя кодер строит палитру — до 256 цветов всего — и каждый пиксель это просто число указывающее на запись палитры. Это радикально меньше, потому что один байт на пиксель заменяет три (или четыре с альфой).

Проблема в том как PNG8 хранит прозрачность. В индексированном PNG каждая запись палитры получает одно значение прозрачности. Большинство кодеров округляет это до полностью прозрачного или полностью непрозрачного — нет места для «37% полупрозрачного». Каждый пиксель который был полупрозрачным (анти-алиасинг края, тени, свечение, затухающие градиенты) прыгает к одному из двух крайних значений.

В моём тестовом изображении у оригинала было 649 298 пикселей с промежуточными значениями альфы — всё мягкое свечение плюс анти-алиасинг вокруг круга и звезды. После конвертации PNG8 через тот же движок что использует наш сайт (upng-js медианная-срез квантизация, округление альфа до 1-bit) это число упало ровно до нуля. Каждый из этих 649 тысяч пикселей стал либо 255 (непрозрачным) либо 0 (прозрачным). Визуально — это ореол что видишь на центральной панели выше: жёсткое кольцо где свечение раньше плавно угасало.

Это имеет значение? Полностью зависит от что внутри твоего прозрачного PNG.

Когда PNG8 совершенно безопасен (используй смело)

Если твоя прозрачная картинка содержит только формы с жёсткими краями — плоские цветные логотипы, плоские иконки, квадратные или скруглённые стикеры, вырезки продуктов сфотографированных на чисто-белом фоне — PNG8 это практически бесплатные деньги. Альфа-канал нечего мягкого испортить, и ты получаешь сокращение размера более 90% при нулевой визуальной разнице.

• Брендовые логотипы экспортированные из Illustrator/Figma как плоские векторные экспорты. Без свечения, без падающей тени, без размытия. Эти прекрасно сжимаются в PNG8. Мои угловые элементы стикеров в тесте тому доказательство — выглядят идентично до и после.
• Вырезки продуктов (ecommerce-фото с удалённым белым фоном). Граница между продуктом и прозрачностью — обычно чистая маска от инструмента пера или волшебной палочки Photoshop. Жёсткий край, без затухания. Безопасно для PNG8.
• Наборы UI-иконок, эмодзи-стиль графика, пиксель-арт игровые ассеты. Все с жёсткими краями по дизайну. PNG8 практически для них и изобретён.
• Дизайны стикеров print-on-demand. Большинство POD-платформ хотят простой прозрачный PNG с сплошной формой. Без эффектов. PNG8 режет размер загрузки с сотен КБ до менее 15 КБ, что важно когда управляешь десятками дизайнов.

Когда PNG8 кусается (избегай или обходи)

• Логотипы с падающими тенями, свечением или внешним размытием. Они зависят от мягких альфа-градиентов. PNG8 превращает эти градиенты в концентрические жёсткие кольца. При обычном размере отображения (200–400 px шириной на телефоне) может не заметить. При полном разрешении или экране Retina ореол очевиден.
• Анти-алиасированный текст рендеренный как прозрачный PNG. Маленькие размеры шрифта (до 24 px) используют субпиксельный анти-алиасинг создавая много частичных альфа-пикселей вдоль краёв символов. PNG8 делает текст зубчатым или слегка толще/тоньше в зависимости от порога. Если твой логотип содержит читаемый текст, внимательно инспектируй после сжатия.
• Водные знаки или оверлей-графика с переменной непрозрачностью (например штамп «50% прозрачности»). PNG8 коллапсирует все промежуточные значения. Твой водной знак становится либо полностью видимым либо невидимым — нет середины.

Если твой ассет попадает в эту категорию, у тебя три варианта:

1. Сначала сплющай эффект.Объедини слой свечения/тени с сплошным фоновым цветом, затем экспортируй как не-прозрачный PNG или JPEG. Теперь у тебя нет альфа чтобы испортить. Сжимай нормально. Так большинство про-дизайнеров обращаются с финальными продакшн-ассетами.
2. Используй только lossless-оптимизацию.Пропусти PNG8. Прогони файл через lossless-PNG-оптимайзер (OxiPNG, zopfli) который пере-кодирует deflate-поток эффективнее не трогая значения пикселей. Сэкономишь может 15–25% вместо 93%, но каждый пиксель останется как задумано. Достаточно для hero-изображений и header-логотипов где качество не торгуется.
3. Принять и проверить в размере отображения.Сожми как PNG8, скачай результат, открой рядом с оригиналом в реальном размере в котором он будет на веб-странице (не увеличено). Если ореол невидим при 1:1, используй. Большинство пользователей видят логотипы 80–200 px ширине где ореол в 2 px ниже порога восприятия. Но не предполагай — проверь.

Батч-воркфлоу: сжать 20 прозрачных PNG за один раз

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

1. Собери свои прозрачные PNG.Положи все в одну папку. Смесь логотипов, стикеров, вырезок — всё что нужно ужать.
2. Быстро проверь каждый при 200% зуме.Ищи мягкие края, свечения или затухающие области возле границ форм. Раздели на две стопки: «только жёсткие края» и «есть мягкий альфа».
3. Закинь весь батч в браузерный компрессор.Инструмент что я использую принимает до 20 файлов одновременно, работает целиком в твоём браузере (ничего не грузится на сервер), авто-детектит формат. Закинь все 20 одним drag-and-drop.
4. Дай движку запустить PNG8.Для стопки «жёсткие края» дефолтный вывод уже оптимален. Для стопки «мягкий альфа» просмотри каждый результат при 1:1 перед решением оставить или переключиться на lossless-режим.
5. Скачай батч.Один клик скачивает всё как отдельные файлы. Имена файлов сохраняются. Бросай прямо в CMS или платформенный аплоадер.

Общее время от открытия папки до готовой закачки: около 30 секунд на батч из 20 файлов. Без установки софта. Без создания аккаунта. И критично: твои исходные файлы никогда не покинули устройство — сжатие произошло локально во вкладке браузера.

Ошибки которые съедают часы (я допустил большинство)

• Конвертировать прозрачные PNG в JPEG.Полностью уничтожает альфа-канал. Твои прозрачные области заполняются белым (или чёрным в зависимости от инструмента). У JPEG нет концепции прозрачности. Любая платформа ожидающая прозрачный логотип отклонит или отрендерит неправильно. Держи PNG как PNG.
• Не проверять ореолы перед массовым аплоадом.Сжимаешь 50 логотипов, чувствуешь хорошо с 90% экономией, заливаешь всё в магазин, и через три дня клиент пишет: «твой логотип сломался на моём телефоне». Теперь переделывать всё. Проверяй точечно при 1:1 заранее.
• Использовать серверные компрессоры для неопубликованных ассетов.Твой бренд-материал до релиза едет на чужой сервер. Браузерные инструменты полностью избегают этого — файл никогда не покидает машину.
• Предполагать что все PNG ведут себя одинаково.Скриншот сохранённый как PNG хорошо сжимается PNG8 (в основном плоские цвета). Фото сохранённое как PNG уже ошибка (должно быть JPEG). Прозрачный логотип со свечением — третья категория с собственными правилами. Подбирай метод под тип контента.
• Переквантование до 64 или меньше цветов.Переход с 256 на 128 или 64 почти не даёт дополнительных байт (мой тест показал 11,3 КБ на всех трёх уровнях — палитра уже достаточно мала при 256). Но визуальное качество заметно ухудшается: полосы в градиентах, сдвиг цветов. Оставайся на 256 если только тебе не нужно попасть под очень специфический лимит ниже 10 КБ.

Связанные гайды для специфических ситуаций

Твои нужды по прозрачным PNG могут пересекаться с другими задачами по изображениям. Эти гайды глубже покрывают смежные темы:

• Сжатие фоток продуктов (настройки качества JPEG, требования платформ)? Читай гайд по сжатию фоток продуктов.
• Общее PNG-сжатие без забот о прозрачности (скриншоты, документы, плоская графика)? туториал PNG-сжатия охватывает базу.
• Работаешь со скриншотами которые размываются при сохранении как JPEG? Гайд по скриншотам объясняет почему PNG8 сохраняет текст резким.
• Понимание уровней качества JPEG подробно? Подробное сравнение качества JPEG сравнивает q50–q95 по разным типам изображений.
• Уменьшение изображений для email-вложений? Гайд email-сжатия описывает батч-воркфлоу для любого формата.

Итог

Прозрачные PNG раздуты потому что RGBA добавляет четвёртый канал и большинство дизайн-инструментов экспортирует неоптимизированно. PNG8-сжатие (медианная-срез палитрная квантизация с 1-bit альфой) может ужать их более чем на 90% во вкладке браузера без установки ПО. Единственное за чем следить — мягкий альфа: свечение, падающие тени, анти-алиасированный текст — что PNG8 превращает в жёсткие края. Если у твоих ассетов ничего такого нет — сжимай без колебаний. Если есть — сплющай эффект, используй lossless-режим, или проверь в размере отображения что ореол невидим.

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