Клуб технических писателей

Клуб технических писателей

Сжатие PNG без потерь

Помощь и остальную документацию Яндекса мы иллюстрируем картинками в формате PNG. Программы, которые работают с этим форматом, обычно не обращают особого внимания на размер получающихся файлов (или позволяют управлять качеством вручную, сваливая всю ответственность на пользователя). В результате практически любое PNG-изображение содержит какую-то долю бесполезной информации — то есть, занимает лишнее место на жестком диске и веб-странице.

Эту бесполезную часть можно автоматически отрезать, экономя до 30% объема (по нашему опыту).

Для этого предназначены следующие программы:

Длинно и по-английски

Технически исчерпывающе сжатие PNG без потерь описано здесь: http://optipng.sourceforge.net/pngtech/optipng.html

Коротко и по-русски

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

Строго говоря, это не совсем без потерь, так как оригинальный файл из обрезанного восстановить нельзя. Но нам нужно только чтобы картинка выглядела точно так же, и в этом смысле разницы между сжатым и несжатым PNG нет.

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

Пробный шар

Небольшая демонстрация — скриншоты одного из разделов нашей Помощи. Результат в ImageOptim — на 18,8 мегабайт картинок сэкономлено 4,7 мегабайт:

 

6 комментариев
Авторизуйтесь, чтобы оставить комментарий
Виктор Фигурнов
28 января 2016, 03:16

Я применяю для уменьшения размеров файлов картинок два способа.

1. Наверное, лучший инструмент для оптимизации изображений (в т.ч. PNG) без потерь — это программа FileOptimizer, она бесплатная и работает в Windows. Ссылка: http://nikkhokkho.sourceforge.net/static.php?page=FileOptimizer Рекомендую.

Пользоваться очень просто: надо перетащить мышью файлы картинок или каталоги с файлами в окно программы FileOptimizer и нажать кнопку Optimize all files. Через некоторое время файлы будут заменены их сжатыми версиями.

Программа применяет к каждому графическому файлу примерно 20 различных алгоритмов сжатия (без потерь), и выбирает лучший результат. Это не быстро, но обеспечивает наибольшее сжатие.

2. Для файлов скриншотов я предварительно сокращаю цветовое пространство.

На скриншотах обычно имеется не так много цветов, поэтому 24-битное цветовое пространство, используемое по умолчанию, для них избыточно. Обычно можно сократить его до 8 бит (256 цветов), и полученный графический файл либо будет полностью эквивалентен исходному (если в исходном файле использовалось не более 256 цветов), либо визуально практически не отличим. А размер полученного файла будет меньше в 1,5-2 раза, так как для каждого пикселя будут храниться не 24 бита цветовой информации, а только 8 бит.

Такое преобразование я обычно делаю пакетным действием в Фотошопе. Выполняемая операция: Сохранить для Web, палитра перцепционная, режим PNG-8,  цвета 256, дизеринг случайный 50%.

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

И последнее: эффект от оптимизаторов объясняется не столько тем, что они "выпиливают" служебную информацию, сколько тем, что они подбирают и применяют более эффективный алгоритм сжатия графической информации.

Jet Set Willy
28 января 2016, 03:16

Вся эта информация несколько устарела. Для сжатия щас обычно пользуются онлайновыми сервисами вроде TinyPNG; они не дают высокого качества, зато "удобно".

А правильно было бы использовать либо консольные современные утилиты вроде ScriptPNG и Image Catalyst, либо утилиты с графическим интерфейсом и поддержкой пакетного режима, например тот же Color Quantizer.

Виктор Фигурнов
28 января 2016, 03:16

Вы смешали в одну кучу инструменты для разных задач. Сервис TinyPNG предназначен для сжатия графических файлов с потерями за счет сокращения цветового пространства. Мне кажется, что Фотошоп (функция "Сохранить для Web") делает ту же задачу лучше, и в нем можно выбрать параметры обработки. 

Утилиты ScriptPNG, Image Catalyst и Color Quantizer, также как и как и FileOptimizer, выполняют сжатие графических файлов без потерь, и могут обрабатывать группы файлов. Почему вы считаете их "современными", а FileOptimizer устаревшим, не понятно.Последняя версия FileOptimizer от июня 2015 года.

Указанные вами программы уступают FileOptimizer по степени сжатия файлов. Я взял один свой проект с примерно 1000 PNG файлов, и запустил обработку этих файлов четырьмя программами в режиме максимального сжатия без потерь. Отношение суммарного размера полученных файлов к суммарному размеру исходных файлов: 

ScriptPNG (режим оптимизации Best) - 78,2%, 

Image Catalyst (режим оптимизации XTreme) - 76,6%, 

Color Quantizer (уровень оптимизации Very Slow) - 75,4%

FileOptimizer - 75,2%.

Jet Set Willy
28 января 2016, 03:16

Фотошоп квантует значительно хуже TinyPNG, а он в свою очередь уступает утилитам, ибо настроек в нём нет совсем.

 

Пример:https://dl.dropboxusercontent.com/u/13729396/pic/ps-tp-cq-japan.png

 

Почему вы считаете их "современными" - потому, что я видел, как они устроены, и доволен уведенным.

 

Позволю себе несколько усомниться в вашей статистике. На примере того же CQ - оптимизация определяется не только уровнем, а еще и количеством итераций zopfli-движка - настраивается отдельно, в Options. Если я верно помню, по умолчанию там что-то около 10, а закручивать его можно до тысяч. Но будет медленно жать, разумеется. Но сильнее.

 

FO я гонял в 2014 году, результаты были отвратные. Сегодня перепроверю.

Виктор Фигурнов
28 января 2016, 03:16

Zopfi-движок неплох, но никто не сказал, что на конкретном изображении он даст лучшие результаты, чем все остальные движки, хоть позволь ему делать миллиард итераций.

FileOptimizer пробует разные движки, для PNG он применяет около десятка, и выбирает для каждого изображения наилучший результат. Этот примитивный подход и обеспечивает его преимущество по степени сжатия. За счет времени работы, естественно. 

О сравнительных тестах утилит для сжатия изображений можете прочесть, например, статьи: 

http://www.creativebloq.com/design/image-compression-tools-1132865

http://blarg.co.uk/blog/comparison-of-jpeg-lossless-compression-tools .

Приводить результаты сравнения для функции Save for Web фотошопа, не указывая настройки дизеринга, количества цветов и типа палитры, некорректно. От этих настроек существенно зависит результат. Для разных изображений эти настройки можно подбирать по-разному.

Jet Set Willy
28 января 2016, 03:16

> Приводить результаты сравнения для функции Save for Web фотошопа...

В моих тестах настроки всегда подобраны наилучшими для данной конкретной картинки. Я как бы намекаю, что лучше Фотошоп все равно не умеет, как над ним не трудись.

Между нами, я для прецизионных работ использую вообще "редкого зверя" - движок квантизации японцев из sdk плейстейшен, optpix, - он уделывает, кажется, вообще всех в мире. (Случайно наткнулся на следы его работы на форуме гейм-девелоперов, и долго пытал тамошних бойцов "откуда такие чудеса", бойцы таки раскололись...) Ну, всех, за исключением CQ в некоторых, редких случаях. 


> FileOptimizer пробует разные движки, для PNG он применяет около десятка

Да господь с вами, их нет десятка в природе! Всякие штуки вроде optipng уже давно не берут рекорды.

Я конечно покопался в папке плагинов, так там все "рекордсмены" с zopfli "на борту", в чем легко убедиться даже обычным поиском, например, в Тотал Коммандере.

...и кстати, используется в т.ч. и движок из CQ - truepng, только малость устаревший, годичной давности. Думаю, если его поменять руками на свежий, будет ваш FO жать ещё лучше. ;-)

 

А между тем мой тест закончился. Действительно, FO стал сжимать получше, чем его древние версии, но всё равно - CQ он разумеется не обогнал, проиграв где-то 0.5%, что в выборке из ~1000 файлов дает вполне честную стастическую картинку. Учитывая, что степень сжатия распределяется примерно так IC > CQ > SP, можно достоверно сказать, что FO обязан проиграть Image Catalyst'у, но проверять его я не стал - он слишком долго работает.