Блог | Сжатие PNG для Web

С форматом JPEG уже давно все более или менее понятно. Оптимизировать JPEG-файл для публикации на сайте означает сжать его до уровня качества от 50% до 80%, что подразумевает сжатие с потерями. Почти никому не приходит в голову выкладывать фотографии в формате JPEG, сжатые без потерь. Но JPEG годится далеко не для всяких изображений. Фактически, он годится только для фотографий.

Для всего остального есть PNG. Этот формат существует уже много лет и поддерживается всеми браузерами. Однако у многих даже не возникает мысли, что с ним нужно работать аналогично тому, как это происходит с форматом JPEG. Перед публикацией PNG-файлы тоже следует сжимать. Под сжатием PNG я подразумеваю преобразование полноцветного PNG файла в PNG-8 с палитрой не более 256 цветов.

PNG-32, размер - 72879:

PNG-24

PNG-8, размер - 25096:

PNG-8

На сайте Optimin под оптимизированным/сжатым PNG файлом мы подразумеваем именно файл в формате PNG-8. Наша позиция состоит в том, что все PNG файлы, которые выкладываются на сайте, должны быть сжаты. Исключение составляют лишь те, которые либо не выигрывают в размере от сжатия, либо сильно теряют в качестве от такого преобразования. Оба этих случая довольно редки.

Эта позиция отражена в нашем тесте для веб-страниц и в инструменте для сжатия изображений.

Чем сжимать?

Проблема в том, что уменьшение количества цветов - сложная математическая задача. Идеального и единственного решения не существует, но есть постоянно совершенствующиеся библиотеки и утилиты. Лучшая из тех, что я знаю - pngquant. На нашем сайте используется именно она. В этом и кроется одна загвоздка. Если ваш любимый редактор и позволяет сохранять файлы в формате PNG-8, не факт, что он делает это с помощью самого лучшего алгоритма. Поэтому результат такого преобразования может иметь весьма плохое качество и/или слишком большой размер.

Если для вашего редактора нет плагина, который использует последнюю версию pngquant, то самое лучшее решение - из редактора сохранять файлы как полноцветный PNG, а затем, с помощью специальных утилит или онлайн-сервисов, конвертировать их в формат PNG-8. Я рекомендую использовать те программы, которые заявляют, что используют библиотеку pngquant. Что касается онлайн-сервисов, они почти все ее используют. Разница может быть только в версии и параметрах. Например, известный сервис TinyPNG сильно убивает полупрозрачность, потому что использует pngquant в режиме совместимости с IE6 (это видно по результатам). Но не следует думать, что все ограничивается только применением pngquant. Чтобы достичь идеального результата, нужна целая комбинация программ, с правильно подобранными параметрами.

Однако, идеальный результат нужен далеко не всегда. Если необходимо массовое автоматическое преобразование в PNG-8, то следует применять консольную утилиту pngquant. Если вы оптимизируете элементы интерфейса, и вам нужно максимальное сжатие, то для этого вам подойдут следующие инструменты:

  1. ImageAlpha - только для Mac OS
  2. Color Quantizer - для Windows
  3. Pngyu - для Windows и Mac OS
  4. Photoshop-плагин - только для Mac OS
  5. Optimin - онлайн-инструмент

В общем и все. Остальные программы и сервисы, что я пробовал, не выполняют работу должным образом. Например программа RIOT, которая хороша для JPEG, использует старую библиотеку для PNG и, вообще, тонет в каких-то ошибках, при попытке сжать PNG. Онлайн-сервисов существует много, но ни один, кроме Optimin (и его клонов), не позволяет вручную сокращать палитру. А между тем, ручное сокращение палитры - обязательная функция для такого инструмента.

Сравнение инструментов

Но все равно всегда интересно сравнивать разные инструменты в работе. Давайте испытаем упомянутые выше и несколько других, не включенных в список. Добавим следующие онлайн-сервисы в наше сравнение:

  • TinyPNG - самый популярный сервис
  • Kraken.io - платный, есть бесплатная версия с ограничениями
  • PunyPNG - платный, бесплатная версия не дает скачивать PNG-8, только показывает размер

Есть еще сайт http://www.8bitalpha.com, но качество его преобразования настолько низкое, что я не включаю его в список вариантов.

Чтобы не было подозрений, что я специально подбирал "выгодные" изображения, чтобы наш сервис показал себя в лучшем виде, я беру образцы со страницы Google, посвященной испытанию формата WebP. Только на этот раз я беру не фотографии, как в статье про JPEG, а изображения с прозрачностью, что больше характерно для PNG.

https://developers.google.com/speed/webp/gallery2

Вот эти файлы: 1, 2, 3, 4, 5.

К сожалению, не получилось установить плагин для Photoshop на Mac OS, из-за каких-то проблем совместимости с версией системы.

Вот окончательный список инструментов для тестирования:

  1. ImageAlpha
  2. Color Quantizer
  3. Pngyu
  4. TinyPNG
  5. Kraken.io
  6. PunyPNG
  7. Optimin

Везде, где это возможно, я выбирал 256 цветов. Нужно отметить, что Optimin вычисляет для каждого изображения максимальную палитру, которая ему необходима для преобразования с приемлемыми потерями, и устанавливает слайдер на этот уровень. Но при тестировании я каждый раз поднимал слайдер до 256. TinyPNG, Kraken.io и PunyPNG всегда преобразуют полную палитру в 256. Если загрузить в эти сервисы PNG-8, то Kraken.io и PunyPNG его не трогают, а TinyPNG продолжает уменьшать до полной деградации. Поэтому TinyPNG нельзя применять повторно. Optimin не предлагает уменьшать палитру, если она уже меньше 256.

Я нигде не ставил флаг совместимости с IE6, так как это сильно портит полупрозрачность. Хотя и может уменьшить размер изображения, если таких пикселей много. К сожалению, TinyPNG по умолчаню делает файлы в режиме совместимости с IE6, что дает ему некоторую фору при сравнении размеров сжатых файлов. В программах я всегда выбирал максимальное сжатие. В частности, ImageAlpha, для дополнительной оптимизации, требует установки программы ImageOptim, того же автора. Я добросовестно скачал ее и установил. Качество полученных изображений почти не отличалось, за исключением тех, что сжал TinyPNG, по причинам, озвученным ранее. В частности, этот сервис больше всего испортил изображение номер 3.

Результаты

Исходное изображение 1

Инструмент Размер %
ImageAlpha 12873 26.78
Color Quantizer 12280 25.55
Pngyu 13062 27.18
TinyPNG 12021 25.01
Kraken.io 12435 25.87
PunyPNG 13428 27.94
Optimin 11836 24.63

Исходное изображение 1

Инструмент Размер %
ImageAlpha 13482 45.55
Color Quantizer 11803 39.88
Pngyu 13526 45.70
TinyPNG 12748 43.07
Kraken.io 12654 42.76
PunyPNG 14014 47.35
Optimin 12278 41.49

Исходное изображение 1

Инструмент Размер %
ImageAlpha 9466 26.91
Color Quantizer 9065 25.77
Pngyu 9595 27.28
TinyPNG 8970 25.50
Kraken.io 9003 25.60
PunyPNG 9779 27.80
Optimin 8670 24.65

Исходное изображение 1

Инструмент Размер %
ImageAlpha 7858 28.04
Color Quantizer 7904 28.20
Pngyu 8006 28.57
TinyPNG 7773 27.73
Kraken.io 7780 27.76
PunyPNG 7970 28.44
Optimin 7717 27.54

Исходное изображение 1

Инструмент Размер %
ImageAlpha 20065 19.96
Color Quantizer 20143 20.04
Pngyu 19584 19.48
TinyPNG 18664 18.57
Kraken.io 18694 18.60
PunyPNG 20788 20.68
Optimin 18467 18.37

Выводы

Как я и ожидал, Optimin почти все изображения сжал лучше всех. Исключение составляет лишь изображение номер 2, где его обогнала программа Color Quantizer. Если специально не ставить 256 цветов, а позволить сервису выбрать палитру самостоятельно, то можно выиграть еще несколько процентов в размере. Но в целом, все инструменты показали себя неплохо.

Из таблиц очевидным образом следует, что PNG сжимать необходимо. Изображения уменьшаются в 3-5 раз. Такой значительный выигрыш просто нельзя игнорировать, если вы хоть немного озабочены оптимизацией вашего сайта по скорости загрузки.

В повседневной работе, конечно, лучше пользоваться программами, которые устанавливаются на компьютер. Программа Color Quantizer сжимает лучше других, однако она мне показалась слишком сложной для понимания. Поэтому я рекомендую ImageAlpha и Pngyu. Если нужна автоматическая обработка изображений, то однозначно требуется консольная утилита pngquant. Не советую использовать pngnq из-за плохого качества преобразования. Из онлайн-сервисов для этой работы годится только Optimin (и его клоны). Все-таки часто нужно вручную уменьшать размер палитры, а больше никакие сервисы не позволяют это делать, на данный момент. Кроме того, он все равно сжимает лучше всех.

- Глеб