Почему PNG-файлы изначально тяжёлые
PNG — формат без потерь: каждый пиксель хранится точно, а вся экономия достигается универсальным компрессором, похожим на ZIP. Типичный PNG из программы для скриншотов или графического редактора хранится в полноцветном режиме с альфа-каналом, то есть по 4 байта на пиксель до сжатия. Скриншот 1920×1080 — это около 8 МБ сырых пиксельных данных, и даже после сжатия он часто весит от 1 до 3 МБ.
Большая часть этой информации не используется. На скриншоте веб-страницы может быть всего несколько сотен различных цветов. В логотипе — с десяток плюс сглаженные оттенки по краям. Хранить каждый пиксель полноценным 32-битным значением для таких изображений избыточно, и именно этот зазор использует инструмент.
Как работает квантование палитры
Вместо того чтобы хранить цвет для каждого пикселя, индексированный PNG держит палитру до 256 цветов и записывает каждый пиксель одним байтом-ссылкой на неё. Вся работа — в выборе палитры. Инструмент раз за разом делит цвета изображения на группы вдоль того направления, где они различаются сильнее всего, пока групп не станет столько, сколько задаёт выбранный уровень, а затем берёт среднее значение каждой группы как элемент палитры. После этого каждый пиксель сопоставляется с ближайшим элементом.
Прозрачность входит в тот же процесс: у каждого элемента палитры своё значение альфа, поэтому мягкая тень или сглаженный край на прозрачном фоне сохраняются в виде нескольких полупрозрачных цветов палитры, а не превращаются в жёсткий вырез.
Три кнопки задают размер палитры:
- Высокое · 256: максимум цветов, который может вместить PNG с палитрой. Иконки, логотипы, скриншоты интерфейсов и диаграммы обычно выглядят идентично оригиналу.
- Среднее · 128: всё ещё чисто на плоской графике и иллюстрациях с ограниченным набором цветов. Стоит попробовать для скриншотов интерфейсов.
- Низкое · 64: для простой графики — диаграмм, штриховых рисунков и иконок с небольшим числом цветов. На плавных градиентах начинают проступать ступеньки.
Затем изображение записывается со стандартным сжатием PNG и сохраняет исходное имя файла.
Какие изображения подходят, а какие нет
Квантование лучше всего работает на контенте, созданном в цифровом виде:
- Скриншоты приложений и сайтов, особенно с большими однотонными областями.
- Логотипы, иконки и значки с прозрачностью.
- Графики, схемы, карты и макеты интерфейсов.
- Пиксель-арт, который часто переживает даже уровень «Низкое» без изменений.
Плохо ему даются плавные градиенты и фотографии. Инструмент сопоставляет каждый пиксель с ближайшим цветом палитры без дизеринга, поэтому небо или мягкая виньетка, которым нужны тысячи оттенков, превращаются в заметные полосы. Для фото лучше подойдёт формат с потерями: пропустите их через PNG в JPG, если прозрачность не нужна, или сохраните её с помощью PNG в WebP.
Проверка результата
В строке каждого файла исходный и новый размер показаны рядом. Если квантование не может уменьшить файл, инструмент возвращает оригинал нетронутым, а в строке написано, что оригинал сохранён. Так бывает с PNG, которые уже были индексированными или сильно оптимизированы другим инструментом, а также с изображениями, полными мелкого шума.
Чтобы оценить качество, откройте оригинал и результат рядом в инструменте сравнить изображения и проведите ползунком по градиентам и краям. Если видите полосы, поднимитесь на уровень выше; если «Среднее» выглядит так же, как «Высокое», берите файл поменьше.
Практические замечания
- Текстовые блоки и метаданные оригинала, например название программы-создателя или встроенные комментарии, не переносятся, потому что изображение декодируется и записывается заново. Файл, возвращённый без изменений из-за того, что его не удалось уменьшить, их сохраняет.
- Принимаются только PNG. Работают файлы до 50 МБ каждый, но очень большие изображения обрабатываются дольше: для построения палитры нужно проанализировать каждый пиксель, поэтому PNG 6000×4000 может занять заметно больше времени, чем скриншот.
- Там, где это поддерживается, обработка идёт в фоновом воркере в браузере. Ничего не загружается на сервер, а пачку можно скачать одним ZIP-архивом.
- Уменьшение размеров часто важнее палитры. У скриншота с ретина-экрана, уменьшенного в 2 раза до размера отображения, вчетверо меньше пикселей ещё до начала квантования.