Сжатие JPEG с помощью Guetzli

Сжатие JPEG с помощью Guetzli

От автора: не так давно Google выпустила свой кодировщик JPEG-изображений Guetzli, который по заявлениям разработчиков на 20-30% сжимает файлы лучше, чем libjpeg. Будучи заинтригованным, я решил попробовать новый инструмент. Сам я уже на протяжении долгого времени для оптимизации JPEG использую jpeg-recompress, установщик можно скачать на jpeg-archive project. В инструменте масса настроек, он очень быстрый и реально оптимизирует JPEG. Но можно ли его сравнить с Guetzli?

Рудиментарный тест кейс

Для начала я использовал свое изображение:

Сжатие JPEG с помощью Guetzli

Сверху вы видите намного меньшую версию неоптимизированного JPEG-изображения, над которым я работал. Размер оригинала составлял 2560×2561 и весил 861 Кб. Я обработал это изображение в Guetzli с помощью следующей команды:

guetzli unoptimized.jpg guetzli.jpg

Обработка заняла время, довольно долгое время, если честно. Однако это не удивительно, ведь Google в readme проекта объясняет, что на каждый мегапиксель потребуется около минуты процессорного времени (мое тестовое изображение было 2.5 мегапикселя). На выходе Guetzli дал мне файл весом 770 Кб, что на 11% меньше исходного изображения. После этого я запустил jpeg-recompress для сжатия исходного изображения с помощью команды:

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее
jpeg-recompress --accurate --strip unoptimized.jpg guetzli.jpg

Jpeg-recompress справился немного лучше, выходной файл весил 662 Кб. Результат на 23% меньше неоптимизированного исходника и на 15% меньше версии на Guetzli. Значит ли это, что jpeg-recompress бесспорный победитель? Все зависит от множества факторов. Стандартный алгоритм jpeg-recompress заключается в проверке изображения в пределах стандартного диапазона качества от 40 до 95 для поиска оптимального соотношения качество/вес. По умолчанию установлено 6 циклов (обычно, этого достаточно), однако этот параметр можно настроить. При оптимизации моего портрета jpeg-recompress остановился на качестве 80. В Guetzli по умолчанию стоит 95. Что будет, если в Guetzli выставить сопоставимые настройки? К сожалению, я не смог этого сделать, в Guetzli запрещено ставить качество меньше 84. Чтобы результат был хоть как-то сопоставим с jpeg-recompress, я установил минимально возможно значение 84:

guetzli --quality 84 unoptimized.jpg guetzli-q84.jpg

И результат? После долгого ожидания оптимизированная в Guetzli версия изображения с качеством 84 стала весить 636 Кб. На 26 Кб меньше, чем версия на jpeg-recompress с качеством 80. Так как же сравнивать Guetzli с конкурентами в плане визуального качества? В случае с моим портретом оба оптимизированных изображения почти неотличимы.

Сжатие JPEG с помощью Guetzli

Конечно, это лишь один пример. Как Guetzli покажет себя с целым набором изображений? Давайте посмотрим!

Производительность Guetzli на примере с набором изображений

Один тест двух оптимизаторов изображений может быть полезным, но он дает лишь узкий взгляд на производительность. Если нужно получить полное представление о качестве работы оптимизатора, нужно проводить тесты на большом количестве изображений. Для тестирования я выбрал несколько оптимизаторов и около 500 изображений. На картинках была изображена различная еда. Такие изображения можно встретить на сайтах с рецептами. Для обработки пакета изображений я использовал команду find (с помощью техники, описанной в этом посте). Неоптимизированные изображения весили 37,388 килобайт. В каждом тесте я выставлял минимально допустимое в Guetzli качество в 84. Также я использовал команду time, чтобы определить время работы каждого оптимизатора. Ниже представлен результат с командами для каждого оптимизатора, временем обработки пакета неоптимизированных изображений в каждом инструменте, а также общий размер оптимизированных изображений:

Сжатие JPEG с помощью Guetzli

Заметка: бинарный файл cjpeg из mozjpeg 3.1

Выводы: Guetzli справился лучше всех с минимально доступным качеством 84, но обработка заняла зверски много времени. Большая часть оптимизаторов подбирается к схожим результатам, а обработка проходит на несколько порядков быстрее.

Кроме того, для веб-изображений можно понизить качество и ниже 84. Качество изображения необходимо расценивать как субъективную проблему, так как в процесс оценки пользователем изображения может быть вовлечено любое количество переменных. А как насчет расстояния просмотра, физических размеров устройства и разрешения экрана? Все просто: если вы не можете отличить неоптимизированное изображение от оптимизированного, то и пользователь не сможет. Если вы видите разницу, не факт, что пользователи ее заметят, так как у них нет исходной большой версии изображения для сравнения.

Я прогнал набор этих изображений в jpeg-recompress с диапазоном качества 30-70 и смог добиться размера 11,114 Кб. А это еще пара мегабайт, которые мог бы сэкономить Guetzli. Несмотря на худшее качество, результат был приемлем (хотя это субъективно).

Также стоит учесть, что Guetzli не умеет обрабатывать прогрессивный JPEG. Прогрессивный JPEG обычно меньше, чем стандартный JPEG. Еще лучше, прогрессивный JPEG минимизирует сдвиги макета из-за способа загрузки. Меньше сдвигов макета, меньше перерисовок страницы. Меньше перерисовок, меньше потребление батареи.

Guetzli очень эффективен в случаях, когда качество превыше всего, но лично я предпочитаю другие оптимизаторы. Guetzli легко выигрывает у конкурентов при сопоставимых настройках качества, но в нем нельзя установить качество ниже 84. Из-за этих ограничений, невероятной загрузки процессора, а также отсутствия поддержки прогрессивного JPEG я не могу рекомендовать этот инструмент.

Автор: Jeremy Wagner

Источник: https://davidwalsh.name/

Редакция: Команда webformyself.

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика оптимизации сайта: ускорение загрузки Вашего сайта в разы

Узнайте как ускорить загрузку сайта .

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree