Оптимизация PNG и JPEG без потери качества

Введение

Сейчас я расскажу Вам, как же происходит оптимизация PNG и JPEG без потери качества. Под «без потери качества» я подразумеваю, что визуально оригинальная и оптимизированная изображения ни чем не будут отличатся. Я видел на Хабре довольно много статей посвященные данному вопросу, но скажу, большая часть полная чушь, в них констатируются факты, а не причины. Данная статья посвящена людям, которые имеют базовые знания об оптимизации изображений.

PNG

И так, как же происходит оптимизация? Давайте разберемся по порядку, в основном это происходит из-за нескольких причин, и сейчас Мы их рассмотрим.

Non-interlaced или Interlaced

Существует два метода отображения изображения в браузере при ее загрузке:

• Non-interlaced — браузеры загружают их последовательно, сверху вниз, по мере поступления информации из сети.
• Interlaced — до полной загрузки файла изображение в браузере отображается в низком разрешении. т.е. сначала Вы увидите изображение низкого качества, затем, по мере поступления графической информации, качество изображения будет постепенно улучшаться. Чересстрочное отображение позволяет уменьшить субъективное время загрузки и показать пользователям, что изображение загружается, однако чересстрочное отображение также увеличивает размер файла.

Chunks

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

ColorType и BitDepth

ColorType нужна для оптимизации количества цветов в изображении. По этому критерию бываю следующие виды (форматы) PNG:

1. Grayscale;
2. Grayscale + alpha;
3. Palette (256 цветов);
4. RGB;
5. RGB + alpha;

Технология ColorType как раз выбирает тот формат, при котором изображение будет весить меньше всего, но при этом визуально не изменится.
BitDepth — битовая глубина, бывает двух видов:

1. 8-bit;
2. 16-bit;

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

Оптимизация палитры

Данная технология может быть реализована только в PNG Palette, технологию поддерживают многие программы-оптимизаторы PNG. Может уменьшить размер изображения, хотя и не на много.

Оптимизация альфа-канала

Про эту технология я узнал от Сергея Чикуенока (Про PNG. Часть 3). Сейчас эта технология развита, и используется очень часть. Дает существенный прирост к оптимизации. Я могу привести в пример две программы:

• PNGKT от автора Color Quantizer. Сейчас данная технология встроена и в TruePNG
• CryoPNG — более продвинутая технология оптимизации, и требует большего времени для оптимизации. Иногда существенно увеличивает степень сжатия, ее технология описана в справке.

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

Оригинал. Размер — 214 471 байт, время оптимизации — 2 мин. 36 сек.





PNGKT. Размер — 107 456 байт, время оптимизации — 3 мин. 1 сек.





CryoPNG. Размер — 105 239 байт, время оптимизации — 5 мин. 52 сек.





Выводы можете сделать сами.

Алгоритм сжатия Deflate + Фильтрация строк

Как Мы же говорили, PNG состоит из Chunks, в данном случаи, нас интересует Chunks — IDAT. Для его сжатия в основном играют два фактора, фильтрация строк и алгоритм сжатия Deflate. Давайте об этом поговорим поподробнее.

Фильтрация строк

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

1. None — фильтр отсутствует;
2. Sub смотрит байт в той же строке;
3. Up — с тем же номером, что и текущий в предыдущей;
4. Average берет оба и считает от них среднее арифметическое;
5. Paeth смотрит байт перед байтом в предыдущей строке, сравнивает разницу и кодирует наименьшую.

Понятно, что в PNG с палитрой все байты — индексы в палитре, поэтому их бессмысленно фильтровать, но в остальных случаях изображение будет сжиматься заметно лучше. Вообще говоря, нет каких-то определенных рекомендаций, какой фильтр выбирать. Для каждой строки можно выбрать свой фильтр, поэтому часто просто применяют все фильтры подряд и смотрят, с каким сжатие получается лучше всего. Существует еще один фильтр- Adaptive, — можно сказать это «микс» из фильтров. Фильтры поддерживают почти все программы оптимизаторы PNG, но лично мне известны только две программы которые имеют более продвинутую систему создания фильтров:

• TruePNG
• PNGWolf

PNGout не создает такие фильтры, однако в новой версии появилась поддержка встроенных фильтров. Это было сделано по моей просьбе.

Алгоритм сжатия Deflate

На сегодняшний день есть несколько библиотек, основанных на алгоритме сжатия Deflate:

• Zlib. По сравнению с другими библиотеками очень быстрый, но в тоже время степень сжатия низкая. На ее базе реализованы такие программы как TruePNG, OptiPNG, PNGWolf (использет одновременно и Zlib, и 7-zip).
• 7-zip. По сравнению с другими библиотеками, скорость и степень сжатия — средняя. На ее базе реализованы такие программы как AdfDef и PNGWolf.
• Kzip. По сравнению с другими библиотеками, скорость низкая, степень сжатия высокая. На ее базе реализована программа — PNGout.

Если честно сказать, кто сжимает лучше, 7-zip или Kzip, вопрос спорный, но в целом Kzip лучше.
Но помните, все эти программы дополняют друг друга, и они сильны когда едины. Это самое большая проблема, когда из используют отдельно.

Заключение о PNG

В заключении, об оптимизации PNG скажу, именно по этим причинам и проходит оптимизация PNG без видимых изменений. Почти со всеми Авторами приведенных программа я общался, и все они очень талантливые люди. Хотел отдельно поблагодарит x128, можно сказать, это мой Учитель.

JPEG

И так Мы переходим к JPEG. Здесь все гораздо проще, и так продолжим. Но перед этим скажу, что JPEG нельзя пересохранить не потеряв качество. Есть только одна программа для этого BetterJPEG. Описание есть на сайте, поэтому не будем останавливаться над этим.

Markers

JPEG в отличии от PNG состоит из маркеров. Рекомендую прочитать статью «Структура файла, маркеры», так же рекомендую вообще посмотреть сам сайт. Самая мощьная программа, по изучению структуры JPEG — JPEGsnoop. Есть еще программы, но о них я расскажу в конце.
Удаления некоторых маркеров (APP0-APP15, COM, DQT, SOF, Trailer), может существенно уменьшить размер изображения. Мне больше все нравится программа — Jhead, наиболее простая и удовлетворяет моим потребностям.

Progressive и Optimized

Существую, три метода отображения изображения в браузере при ее загрузке.

• Стандартный. Сейчас почти не используется, аналогичен Оптимизированному методу (степень сжатия хуже).
• Оптимизированный (Optimized) — создается улучшенный файл JPEG с меньшим размером файла. Браузеры загружают их последовательно, сверху вниз, по мере поступления информации из сети.
• Прогрессивный (Progressive) — изображение выводится как последовательность наложений, что позволяет отобразить изображение с низким разрешением до полной его загрузки, т.е. сначала Вы увидите изображение низкого качества, затем, по мере поступления графической информации, качество изображения будет постепенно улучшаться. Internet Explorer, включая восьмую версию, не поддерживает прогрессивную загрузку JPEG, он его показывает только после полной загрузки файла, что сильно отличается от поведения «традиционного» JPEG, когда изображение отображается сверху вниз, по мере загрузки.

Какой метод (Progressive или Optimized) будет весить меньше, точно сказать нельзя.

Библиотека создания JPEG

А вот здесь начинается самое интересное. Ни кто не задумывался, как создается JPEG? Оказывается существую библиотеки, и их не так и много, рассмотрим некоторые из них:

• Adobe использует свои собственные библиотеки, их вообще несколько, например, Adobe Photoshop, Save for web — используется для сохранения в WEB.
• Apple Aperture, знаю, что он существует, встречается крайне редко.
• LibJPEG. Использую почти все программы, которые умеют сохранять в JPEG, включая Adobe Fireworks, интересно да получается. В библиотеке LibJPEG есть очень интересная программа JPEGTran (оптимизирует изображение, без потери качества). Имеет смысл применять, если Вы создаете изображения JPEG через Photoshop или Illustrator и оптимизируете через JPEGTran, то получаете максимальный эффект оптимизации, т.к. выходит используются две библиотеки. К сожалению, я так и не смог заставить Photoshop сохранять в JPEG, без потери качества.

Заключение о JPEG

Именно таким образом, получается оптимизация JPEG без видимых изменений.

Заключение

Это конечно все причины, но это наиболее существенные.
Хотел еще показать, как определить, изменилась ли картинка визуально или нет? Можно использовать метод описанный здесь.

И так в заключении я дам пару интересных ссылок, а также несколько других программ.

Полезные ссылки:

1. Работа с изображениями
2. Подготовка изображений к загрузке
3. Оптимизация GIF и PNG-8 для веб

Дополнительно ПО:

1. PhotoME — очень удобная программа для изучения структуры PNG и JPEG, не такая мощная как описанные выше. Использую ее как основную.
2. ExifTool — очень мощная программа для изучении структуры PNG и JPEG. Работает через командную строку, есть онлайн версия — Jeffrey's Exif Viewer
3. 010 Editor — Hex редактор, но имеет дополнение (JPEG, PNG + Chunks), которое помогает изучению структуры PNG и JPEG, иногда просто не заменим.

И еще не много...

В следующей части я покажу небольшую программу, которую сделал Сам. Она учитывает все выше описанные нюансы. Я не могу понят, почему нет целой программы, которая бы комплексно оптимизировала изображения. Кстати, я готов посоревноваться в оптимизации с Любым кто бросит мне вызов, хоть попрактикуюсь.