Сжатие в JPG: Photoshop, MozJPEG, Guetzli

Сжатие в JPG: Photoshop, MozJPEG, Guetzli

Размышляя над оптимизацией картинок для сайта, набрёл на статью-сравнение различных JPG-кодировщиков с разбором, какой из них лучше и качественнее жмёт в JPG. Однако статьи статьями, но свои-то выводы, сделанные на своих (а не журнально-тестовых) исходниках, ничто не заменит.

Поэтому я решил закатать рукава и самостоятельно проверить, насколько велика разница по качеству JPG-сжатия между различными компрессорами, чтобы на основании личного опыта решить, стоит ли вообще игра свеч.

В качестве исходника я взял одну фотографию. Вот эту, про запрет купаться в листьях:

Технически это фото не особенно высокого качества: чуть занижен ISO, вблизи заметна небольшая «шевелёнка», поскольку снято на ходу без штатива. Но для теста оно годится как нельзя лучше, ведь на нём одновременно присутствуют разнообразные зоны — как мелкие, пёстрые текстуры (листва, трава, кора дерева), так и большие однородные цветовые пятна (инфо-щит), а также «проблемные зоны» — тонкие линии и контрастный текст, которые при сжатии в JPG обычно страдают сильнее всего.

Участники соревнований

Эту исходную фотку, сконвертированную из RAW в PNG без компресии, я сжал с помощью трёх разных программ:


1. Adobe Photoshop 2020, опция Save for Web (Legacy). Этот участник в представлении не нуждается: что такое Фотошоп, сегодня знают, наверное, и дошкольники. Программа, естественно, платная (около 500 р/мес.)

2. MozJPEG v 3.11. Это один из проектов корпорации Mozilla — тех самых ребят, которые дали миру браузер Firefox и почтовый клиент Thunderbird (его я, к слову, очень рекомендую в качестве замены Outlook).

MozJPEG — бесплатная программа с открытым исходным кодом, что для пользователя должно быть одним большим плюсом. Однако у MozJPEG есть и минус: официально она не существует в виде готового исполнимого файла, который вы можете скачать, кликнуть по нему мышкой и всё заработает. Чтобы работать с MozJPEG на вашем компьютере, вам придётся (сюрприз!) самостоятельно скомпилировать исполнимый файл под вашу платформу из исходного кода.

На мой взгляд, отсутствие готовых исполнимых файлов у бесплатных программ с открытым кодом — чудовищная глупость со стороны разработчиков, если, конечно, они заинтересованы, чтобы их программа была сколько-нибудь популярна. Как по-вашему, какое число пользователей умеет компилировать бинарники из исходного кода? По моим прикидкам, около 1%, если не меньше. (Полагаю, это примерно те же люди, кто умеет ставить root-права на свой телефон.) Остальные 99% просто скачают программу-конкурент, пусть платную, лишь бы не париться с этим чёртовым компилированием.

3. Guetzli, проект корпорации Google. Чувствуете, как сразу запахло несметными деньжищами и нейросетями? Однако спокойствие: этот компрессор бесплатный (спойлер: и правильно). Guetzli (произносится «гюцли») — это такие немецко-швейцарские печеньки из песочного теста. По названию можно предположить, что разработчики Guetzli сильно охочи до сладкого. А может, всё дело в том, что они находятся в Цюрихе.

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

Разумеется, можно плюнуть на все эти сложности с самостоятельной компиляцией и воспользоваться одним из бесплатных онлайн-компрессоров, сжимающих JPG с помощью MozJPEG и прочего. Однако я исхожу из предположения, что производители этих программ вообще-то конкурируют друг с другом и, предоставляя возможность сравнить компрессию онлайн, могут быть заинтересованы в подтасовке результатов.

К примеру, кодируя файл в MozJPEG с помощью онлайн-конвертера Squoosh (если ссылка не откроется, попробуйте зайти через VPN) производства Google, я не могу быть уверен в чистоте эксперимента, ведь я понятия не имею, с помощью какого кода на самом деле обрабатываются фотографии на их сервере. Поэтому, чтобы исключить подтасовку, я скомпилировал MozJPEG и Guetzli из исходного кода выложенного на GitHub, и установил на свой комп.

Результаты

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

В качестве отправной точки, вот фрагмент исходного файла (сам файл — 2000х1500 пикселей, без компресии) с 4х-кратным увеличением. Разумеется, чтобы разглядеть детали, желательно просматривать всё это на экране монитора, а не на смартфоне.

Поскольку ISO низковат, а съёмка велась без штатива, на изображении присутствует небольшой горизонтальный сдвиг, особенно заметный на линии, изображающей воду.

Теперь сжимаем файл разными компрессорами, увеличиваем в 4 раза и смотрим, насколько заметны JPEG-артефакты на контрастных элементах.

1. Adobe Photoshop (опция Save for Web), JPEG Quality 70 (размер файла — 1,3 мегабайт)

• Заметен мелкий равномерный «песочек» из артефактов вдоль волнистой линии;
• Появился небольшой шум вокруг белых букв на красном фоне;
• Диагональная красная линия приобрела характерный ореол а-ля Unsharp Mask;

Что я могу сказать по поводу качества? Если вы не собираетесь продавать эту фотографию в фотобанк или использовать в профессиональной полиграфии, на мой взгляд, фотошопный JPG 70 (иногда 65-75, в зависимости от сюжета) сегодня является тем компромиссом, который позволяет выложить картинку в онлайн и не хранить в архиве её дубликат с более высоким качеством.

Да, по теперешним стандартам фотка размером 2000х1500 пикселей и весом 1,3 мегабайт для веба тяжеловата. Однако обращаю внимание, что эффективность сжатия существенно зависит от характера самого изображения. На этом, например, много мелкой листвы, есть контрастные элементы и шрифт, тогда как фотографии с меньшим количеством контрастных деталей при сжатии с качеством 70 могут весить в 1,5-2 раза меньше. Опять же, посмотрим, насколько изменятся представления о допустимых размерах веб-картинок лет через пару лет…

2. MozJPEG, Quality 70 (размер файла — 730 килобайт)

А вот результат работы компрессора производства Mozilla. Если вы знаете, что такое JPEG-артефакты, полагаю, мне больше ничего не нужно говорить. Потому что при качестве 70 они тут практически повсюду, где линии хоть немного отклоняются от горизонтали с вертикалью. В дополнение к этому:

• на изгибах чёрной волнистой линии появлась «кафельная плитка» из квадратиков 8х8;
• шум вокруг букв резко усилился и стал похож на окантовку из полупрозрачного скотча;
• красной диагональной линии досталось больше всего: вдоль её границ появились цветные голубоватые артефакты.

По сравнению с фотошоповским JPG-ом, размер файла уменьшился практически вдвое. Однако за это пришлось заплатить почти двойным ухудшением качества. Я пробовал ослабить компрессию MozJPEG и повышать качество до 85 и выше, но, увы, результат во всех случаях был хуже, чем Photoshop JPG 70, а разница в размере файла не искупала ухудшения качества. Так что мой ответ MozJPEG — «нет, спасибо».

3. Guetzli, Quality 85 (размер файла — 630 килобайт)

Официально признанной особенностью компрессора Guetzli является повышенная ресурсоёмкость (а неофициальной — феноменально медленная скорость работы). Что, согласно документации, вполне нормально: да, ресурсов требуется уйма, зато качество и размер файла вас приятно удивят.

Подтверждаю: по части скорости и ресурсов всё именно так. На изготовление одного JPG-файла на моей достаточно мощной машине (AMD Ryzen 7 2700X, 32ГБ RAM) у Guetzli ушло около 4 минут. Вам не почудилось: МИНУТ! При этом процессор был задействован на полную, а вентиляторы гудели, как при обсчёте увесистой 3D-графики.

Почему для Guetzli я выставил качество 85, а не 70? Потому что при попытке выставить 70 он выдал сообщение, что 84 — это минимально низкая планка качества, с которой он вообще готов работать. Иначе, сказал он, будут гроссен артефактен и аллес капут.

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

И вот что я получил спустя четыре минуты:

Слушайте, но это же какой-то позор, размышлял я, глядя на результат. Не может же быть, чтобы швейцарская (!) программа производства самого Гугла (!!), которая сверхпрофессионально, мегаинтеллектуально и ультрапедантично сопит и трудится над каждой картинкой по четыре минуты (!!!), воссоздавая её, как драгоценную римскую мозаику, буквально по пикселям, — не может же она выдать настолько отстойный результат? И самое интересное, как удалось MozJPEG выдать ровно такую же дрянь буквально за секунду?»

Должно быть, я невнимательно прочёл инструкцию. Наверное, 85 в Швейцарии — это не просто нижний предел качества, а некий абсолютный ноль, когда оно вообще отсутствует. Давайте поддадим газу и посмотрим, что будет при 95. Небось, наступит красота?

А вот вам битте-дритте, сказал швейцарец спустя ещё четыре минуты:

4. Guetzli, Quality 95 (размер файла — 1 мегабайт)

Да, так заметно лучше. Однако даже этот результат — из разряда «на троечку с плюсом». То есть, чуть хуже (!), чем Photoshop JPG 70, который, замечу, делается не за 4 минуты, а мгновенно. Прибавка качества на 10 единиц радикально увеличила размер файла: с 630 кб до 1 МБ. Так стоит ли вся эта возня потраченного на неё электричества?

Не знаю. Зато я знаю, что получится, если выставить в Guetzli уровень качества 100:

5. Guetzli, Quality 100 (размер файла — 1,8 мегабайт)

Во, другое дело! Это по-нашему! Качество практически не уступает оригиналу и вполне заслуживает называться швейцарским: артефакты практически отсутствуют. Зер гут! Одно лишь плохо: размер файла увеличился до совершенно неприличных 1,8 мегабайт. Что почти в полтора раза больше, чем Photoshop JPG 70, с которого мы начинали.

Итого

Буду краток: ни MozJPEG, ни Guetzli не убедили меня в необходимости пользоваться ими для изготовления JPG-картинок для веба, поскольку оба компрессора выдают файлы хотя и меньшего размера, чем Photoshop 70, но при этом заметно худшего качества. А в случае, если мне понадобится изготовить легковесный JPG посредственного качества, я, пожалуй, воспользуюсь тем же Фотошопом: у него это получается поизящней.

P. S. Кажется, я знаю, почему Guetzli не позволяет устанавливать качество ниже 84. Очевидно, JPG в этом случае получается настолько ужасным, что его попросту стыдно показывать.

Поделиться
Отправить
Запинить
25 ноября   софт   технологии
2 комментария
Андрей Голубев

Степень качества jpg (от 0 до 100) не абсолютное. Каждая программа трактует эти цифры по-своему.
Сам пользуюсь гимп и jpegmini — любопытно было бы взглянуть на ваш исходник в png. Можете дать его для эксперимента?

PS если надо сжать картинку по максиму, но сохранить наилучшее качество, я использую сервис https://imagecompressor.com The Best! :)

Александр Токарев

Согласен, качество (а точнее — степень потери качества) в разных кодировщиках определяется немного по-своему. Столь же очевидно, что абсолютного нуля качества не может быть, поскольку красивость и некрасивость — понятия предельно субъективные. Однако, потестив Guetzli, я стал подозревать, что абсолютный ноль качества всё же существует. И в этой конкретной программе он где-то в районе 60-65 :)

Про Оптимизиллу ака imagecompressor.com слышал, но не пока не пользовался. Потестирую, сообщу о результатах, спасибо!

А вот исходник в png (5,9 МБ)

Андрей Голубев

Мои эксперименты подтверждают ваши выводы. Единственный вариант — использовать webp. Гимп поддерживает этот формат, сохранял с качеством 88/100. Размер файла 905 килобайт. https://adviko.by/no-swimming@2x.webp

В принципе уже на 85/100 я не видел уж сильной разницы. Размер файла при этом был 757 килобайт.

Александр Токарев

WebP как замена low-res JPG вполне хорош. Однако по состоянию на ноябрь 2019 он, к сожалению, всё ещё не поддерживается браузером Safari. Что означает, что на многих маках и айфонах картинки будут не видны от слова «совсем». Можно, конечно, хранить все картинки в двух форматах и с помощью скрипта в зависимости от браузера пользователя выдавать картинку в нужном формате, как это сделано, например, на «Медузе». Как только мой скромный блог дорастёт до размеров медиапортала, я непременно так и сделаю — но, думаю, к этому моменту Safari обзаведётся поддержкой не только формата WebP, но и чтения мыслей на расстоянии :)

Популярное