Как вообще сжимается PNG
PNG — формат без потерь, и «сжать» его можно двумя принципиально разными способами.
- Палитра (PNG-8). Вместо полного цвета в файле остаётся таблица до 256 цветов, а пиксели ссылаются на неё номерами. На логотипах, иконках, схемах и скриншотах интерфейса это даёт кратное падение веса почти без визуальной разницы. Ползунок «Палитра» — ровно этот рычаг.
- Lossless-оптимизация (oxipng). Перебор фильтров и более плотная упаковка потока: те же самые пиксели, просто меньше байт. Бесплатно по качеству, но и выигрыш скромный — единицы или первые десятки процентов.
Первый способ радикальнее, второй безопаснее. Мы всегда прогоняем PNG-вывод через oxipng, а палитру отдаём вам.
Где палитра ломается
На гладких градиентах — небо, блик, размытый фон. 256 цветов на плавный переход не хватает, и появляется бандинг: вместо перехода видны полосы. Признак того, что картинка «фотографическая», а не «плоская». В этом случае честный ответ — не PNG, а WebP или AVIF: там фотография сожмётся в разы сильнее, а прозрачность останется.
На нашей тестовой картинке (зернистый блик с прозрачностью, 1259 КБ) видно обе стороны медали: PNG-8 на 64 цветах — 194.6 КБ (−84%), тот же кадр в WebP — 27.8 КБ (−98%).
Что ещё стоит покрутить
- Разрешение — самый недооценённый рычаг: половина стороны это четверть пикселей.
- Целевой вес — задайте «не больше 100 КБ», и палитра подберётся сама (отдельная страница).
- Применить ко всем — настроили один файл, перенесли настройки на всю пачку.
FAQ
Прозрачность сохранится?
Да, и в PNG-8 тоже: индексированный PNG хранит альфу для каждого цвета палитры.
Почему сжатый файл иногда больше исходного?
Значит, исходник уже оптимизирован — такое бывает после экспорта из современных редакторов. Ориентируйтесь на цифру «После»: она снята с настоящего файла.
Метаданные удаляются?
Да, в вывод не переносятся.
Файлы уходят на сервер?
Нет, ни один байт. Кодеки — WebAssembly в вашей вкладке.