Сжатие изображений PNG

В чём силён PNG

PNG (Portable Network Graphics) появился в 1996 году как свободная от патентов замена GIF. Это формат без потерь: каждый декодированный пиксель в точности совпадает с сохранённым. Он поддерживает полный цвет, оттенки серого, индексированный цвет с палитрой и полноценный альфа-канал, так что края могут плавно переходить в любой фон. Поэтому PNG — обычный выбор для скриншотов, логотипов, иконок, элементов интерфейса, диаграмм и всего, где есть чёткий текст.

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

Почему PNG всё-таки можно уменьшить

PNG сжимается в два этапа. Сначала к каждой строке пикселей применяется фильтр (None, Sub, Up, Average или Paeth), который заменяет значения пикселей разницей с соседними; однотонные области превращаются в длинные серии нулей. Затем отфильтрованные данные упаковываются алгоритмом DEFLATE — тем же, что и в ZIP. Многие программы подбирают фильтры и параметры DEFLATE быстро, а не оптимально, поэтому те же пиксели часто можно хранить в меньшем числе байтов.

Отсюда два способа уменьшить PNG:

• Оптимизация без потерь. Инструмент запускает OxiPNG, который перебирает стратегии фильтрации и параметры сжатия и оставляет самый маленький результат. Изображение остаётся идентичным до пикселя. Выигрыш сильно зависит от того, как был сохранён файл: экспорт из простой программы для скриншотов часто заметно уменьшается, а уже оптимизированный файл почти не меняется.
• Сокращение палитры (с потерями). Полноцветный PNG с прозрачностью хранит 4 байта на пиксель. После перевода в палитру до 256 цветов остаётся 1 байт на пиксель ещё до начала DEFLATE, поэтому этот режим обычно экономит намного больше. Плоская графика и скриншоты переносят его хорошо, а на плавных градиентах и фото могут появиться полосы.

Сокращение палитры включено по умолчанию (режим «Умный», 256 цветов с дизерингом); переключите сжатие PNG в режим «Без потерь», если каждый пиксель должен остаться точным. Настройка количества цветов задаёт размер палитры: чем меньше цветов, тем меньше файл и тем выше риск заметных ступенек на градиентах.

Настройки для типичных задач

Частый источник огромных PNG — скриншоты с Retina-экранов: полноэкранный снимок на дисплее ноутбука 2880 × 1800 содержит больше 5 млн пикселей. Уменьшение длинной стороны до 1600 пикс. сокращает это число более чем втрое и обычно важнее любой настройки сжатия.

Для ориентира: в наших тестах четыре PNG-скриншота страниц Википедии, MDN и GitHub стали на 58–60 % меньше в режиме «Умный» по умолчанию и, по медиане, примерно на треть меньше в режиме «Без потерь». Ваши файлы могут уменьшиться сильнее или слабее.

Частые проблемы

• Полосы на градиентах после режима «Умный». Увеличьте количество цветов или вернитесь к сжатию без потерь.
• Рваный ореол вокруг прозрачного логотипа. Сглаженным краям нужно несколько уровней прозрачности; для таких изображений оставляйте не меньше 128 цветов.
• В режиме без потерь почти нет выигрыша. Файл уже был хорошо упакован. Реальную разницу дадут только сокращение палитры или уменьшение размеров, а если ничего меньше получить нельзя, инструмент вернёт исходный файл.
• PNG — это фотография. JPEG или WebP лучше подходят для такого содержимого и дадут куда меньший файл.

Вопросы о PNG

Другие инструменты для изображений

Компрессор изображений обрабатывает смешанный пакет файлов. Для анимированной графики есть компрессор GIF, а на странице «Как это работает» подробнее объясняется, что значит сжатие без потерь и с потерями.