Блог | Сжатие изображений

Сжатие 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 (и его клоны). Все-таки часто нужно вручную уменьшать размер палитры, а больше никакие сервисы не позволяют это делать, на данный момент. Кроме того, он все равно сжимает лучше всех.

- Глеб

Онлайн-сервисы для оптимизации JPEG

Рассмотрим существующие онлайн-инструменты для оптимизации/сжатия JPEG. Вот все сайты, которые я смог найти, просмотрев множество статей на эту тему:

  1. http://www.jpegmini.com/
  2. http://kraken.io/
  3. http://www.smushit.com/
  4. http://www.imageoptimizer.net/
  5. http://www.webresizer.com/resizer/
  6. http://jpeg-optimizer.com/
  7. http://punypng.com/
  8. http://tools.dynamicdrive.com/imageoptimizer/
  9. http://compressnow.com/
  10. http://www.jpegreducer.com/

Из них 1,2,7 - платные сервисы, которые имеют бесплатные версии с ограничениями. Остальные - бесплатные.

В этот список я, само собой, не включил наш сервис http://optimin.ru и его клоны на английском языке.

Пригодность для веб-оптимизации

С точки зрения оптимизации для веб, существует только одно требование к таким сервисам. Кандидаты должны иметь в своих возможностях сжатие с потерями, качеством 50-80%. Все, что больше 80% - избыточно для публикации в интернет. Если конечно ваш сайт не посвящен профессиональной фотографии. Цифры 50-80% уже много раз обсуждались в сети, интересующиеся могут убедиться сами. При этом желательно иметь возможность задавать качество вручную.

Проведем быстрый обзор, чтобы понять, какие из сервисов удовлетворяют основному требованию.

  1. JPEGMini не дает возможности задавать качество вручную. Создатели утверждают, что уровень сжатия определяется автоматически. Опыты показали, что качество действительно меняется в зависимости от изображения, поэтому назовем его условно годным.

  2. Kraken.io имеет серьезные ограничения на размер файла в бесплатной версии - 1MB. Что уже делает его мало полезным, если вы не намерены платить. По уровню искажений удалось определить, что Kraken.io сжимает JPEG с фиксированным качеством - 95%. Это делает его бесполезным для наших целей.

  3. SmushIt от Yahoo - не умеет сжимать с потерями. Эффект от его работы мизерный. Он совершенно бесполезен.

  4. ImageOptimizer.net - предоставляет программу для скачивания и веб-интерфейс, который... не работает.

  5. WebResizer - крайне неудобный сервис, так как автоматически уменьшает ваши изображения до размера, который он сам прописывает в форме. Приходится каждый раз изменять поля вручную, чтобы он не трогал размер и резкость. Зато позволяет задавать качество изображения. Поэтому оставим его пока.

  6. JPEG-Optimizer - как и предыдущий инструмент, считает, что лучше вас знает, какого размера должно быть ваше изображение, по умолчанию уменьшает его до 400 пикселов. Позволяет задавать качество, и есть возможность снимать флажок resize. Поэтому оставим и его.

  7. PunyPNG - обладает какими-то совсем уж смешными ограничениями в бесплатной версии. Несмотря на заявленный предел в 500KB, на все мои попытки закачать хоть какой-то файл в диапазоне от 100KB до 300KB, этот сервис отвечал, что превышена квота. Поэтому исключаем его из дальнейшего рассмотрения.

  8. DynamicDrive - не позволяет задавать качество, но выдает несколько вариантов закаченного изображения в разном качестве, что делает его вполне пригодным.

  9. CompressNow - позволяет задавать качество, но почему-то наоборот. 20% означает 80%. При этом все файлы переименовывает в image.jpg. Но мы его оставим для дальнейшего изучения.

  10. JpegReducer - аналог DynamicDrive.

Итак, для веб-оптимизации пригодны: 1 (условно), 5, 6, 8, 9, 10.

Теперь сравним наш компрессор с конкурентами. Так как JPEGMini не позволяет задавать качество, то сравнение требует особого подхода.

Алгоритм сравнения

  1. Сжать файл с помощью JPEGMini.
  2. Загрузить исходный файл в другой компрессор и подобрать то качество сжатия, при котором искажения вдоль четких контуров совпадают с тем, что выдал JPEGMini.
  3. Пользуясь качеством, определенным на шаге 2, сжать исходный файл другими сервисами.
  4. Сравнить размеры сжатых файлов.

Исходные фотографии

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

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

Исходные изображения в формате PNG я преобразовал в JPEG с качеством 100%. Вот эти файлы: 1, 2, 3, 4, 5.

Тест

Первая фотография, размер - 308238:

Оригинал

Я прогнал первую фотографию через JPEGMini, потом, сравнивая искажения (по береговым линиям реки), определил, что JPEGMini сжал ее на уровне 89-90%. На этом этапе уже понятно, что JPEGMini не годится для веб-оптимизации, т.к. его сжатие не всегда укладывается в заданные параметры (50-80%). Но так как этот сервис очень раскрученный, не будем его исключать из теста.

Вариант JPEGMini, размер - 80236:

JPEGMini

Вариант Optimin, качество 90%, размер - 65128:

JPEGMini

Вот результаты сжатия первого изображения с помощью разных сервисов, при качестве 90%.

Сервис Размер %
JPEGMini 80236 26.03
WebResizer 89165 28.93
JPEG-Optimizer 69986 22.71
DynamicDrive 89071 28.90
CompressNow 90446 29.34
JpegReducer 88628 28.75
Optimin 65128 21.13
RIOT 65433 21.23

* RIOT - это не онлайн-сервис. Это очень эффективная программа для сжатия JPEG, работающая, к сожалению, только под Windows. Я привожу результаты работы этой программы просто для информации, в качестве эталона.

Второе изображение было сжато JPEGMini с качеством примерно 85-86%. Но не все сервисы позволяют задавать такую цифру (не попадает в шаг), поэтому тестирую только те, что позволяют.

Сервис Размер %
JPEGMini 117795 28.18
WebResizer 125782 30.09
JPEG-Optimizer 106879 25.57
CompressNow 106584 25.50
Optimin 98211 23.50
RIOT 98924 23.67

Фотография 3 - интересный случай. Она размыта больше других, и на ней трудно найти четкие контуры, чтобы сравнивать искажения. Но все же, я смог достаточно надежно, как мне кажется, определить, что JPEGMini сжал ее с качесвом 75-77%. Помогли ветви дерева на фоне неба. Я заметил, что это нормально для JPEGMini, резко снижать качество на размытых фото, и с этой логикой трудно поспорить.

Сервис Размер %
JPEGMini 354150 24.64
WebResizer 330638 23.01
JPEG-Optimizer 286097 19.91
CompressNow 286353 19.93
Optimin 267616 18.62
RIOT 268539 18.69

Выводы

Как видно из таблиц, Optimin значительно опережает остальные сервисы. С другими фото картина повторяется. По результативности с Optimin может сравниться только хороший софт для компьютеров. Это удивительно. Ведь создать эффективный инструмент не так и сложно. Нужно лишь подобрать правильную последовательность применения нескольких свободно распространяемых программ, что и было сделано на Optimin. Самое интересное, что эти сервисы, созданные, видимо, домохозяйками, прошедшими трехмесячные курсы программирования на бирже труда, висят в топе гугля годами. И о них бесконечно пишут статьи.

Следует особо отметить "достижения" JPEGMini. В моих экспериментах с этим сервисом, я столкнулся с удивительным фактом. Судя по всему, перед сжатием изображения, JPEGMini пропускает его через шумоподавление. Волоски на руках исчезают, удаленная трава и удаленные кирпичные стены покрываются проплешинами. Эффект очень похож на то, что бывает при применении "patch-based image denoising". Если прогнать изображение через легкое шумоподавление, то это не сильно убьет контуры. Зато алгоритм сжатия JPEG будет намного эффективней, потому что во многих местах размываются резкие перепады цвета. Тем более удивительно, что JPEGMini сжимает фото настолько неэффективно. Автоматическое определение качества сжатия в этом сервисе представляется как "новая супертехнология", но алгоритм определения сильно хромает. Вполне возможно, что он основан на информации из того же шумоподавления. Боюсь, в лице JPEGMini мы видим очередную лже-технологию. Но, как я и говорил ранее, JPEGMini не поможет вашему сайту просто потому, что предназначен больше для уничтожения домашних фото-коллекций. Его сжатие неприемлемо для веб-оптимизации. Для ускорения сайтов потребуется что-то более эффективное.

Найти нужный софт для компьютера, я полагаю, не проблема. Если вы используете Windows, то можно установить бесплатный RIOT. Для Linux я бы порекомендовал консольную программу JPEGOptim. Из онлайн-инструментов, объективно, для веб-оптимизации подходит только Optimin (и его клоны). И не только потому, что это наш инструмент :-) Я действительно не видел более удобного и эффективного онлайн-инструмента для того, чтобы уменьшать размер фото до минимума.

- Глеб