Изображения вносят самый большой вклад в размер веб-страниц. По мнению многих экспертов, оптимизация изображений, их сжатие – приоритет номер один в списке мероприятий по ускорению производительности сайтов. Для этого могут использоваться различные методы сжатия – с потерями или без потерь, а также конвертация в другие форматы – SVG или WebP.

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

Что такое Guetzli?



Guetzli – «печенье» у германоговорящих швейцарцев, новый алгоритм сжатия JPEG-изображений, продвигаемый Google. Согласно информации Google, Guetzli сжимает изображения до 35% более эффективно, чем другие известные сегодня алгоритмы. Guetzli похож на другой алгоритм Google, Zopfli, и так же не требует от пользователей менять форматы файлов.

Чтобы продемонстрировать разницу между результатами сжатия алгоритмом Guetzli и обычно использующимся libjpeg, Google приводит следующую картинку:


Слева – исходное изображение, в центре – сжатое при помощи libjpeg, справа – Guetzli. Как можно заметить, на обработанном Guetzli изображении в самом деле меньше артефактов.

И теперь Google заявляет, что можно добиться меньшего размера изображений без существенной потери качества, но проблема Guetzli в том, что он требует гораздо большего времени для обработки изображения, а кроме того, он не создает прогрессивный JPEG. Это может иметь решающее значение для вас при выборе кодировщика изображений, а может и не иметь, но в любом случае – ниже мы привели некоторые характеристики нового кодировщика в сравнении с известными и широко использующимися.

Как сжимать изображения с помощью Guetzli?


Прежде чем углубиться в сравнение, расскажем о том, как использовать этот алгоритм для ваших целей. Это можно сделать несколькими способами:


В зависимости от ваших задач, процесс установки может различаться. Для целей данной статьи Guetzli был установлен с помощью Homebrew согласно инструкции для установки на Mac OS, находящейся на GitHub.

  1. Установить Homebrew
  2. Ввести brew install guetzli

Guetzli в сравнении с сжатием с потерями и WebP


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

time guetzli --quality 85 --verbose imagename.jpg output.jpg

Надо заметить, что параметр качества у Guetzli не может быть ниже 84, потому, если вам нужно еще большее сжатие, надо брать другой инструмент. Параметр качества 85 был выбран согласно рекомендациям по сжатию JPEG-изображений от Google.

Уменьшите качество до 85, если оно выше. Более высокий параметр качества приводит к быстрому росту размеров файла, но визуальное качество меняется мало.

Для сжатия с потерями и формата WebP был использован Optimus developer API. Для проверки работы алгоритмов мы взяли 4 изображения:

Файл Размер Guetzli Lossy WebP
test-1.jpg 712 Кб 67 Кб / 38,30с 83 Кб / 2с 53 Кб / 3c
test-2.jpg 1,7 Мб 231 Кб / 81с 238 Кб / 4с 254 Кб / 3с
test-3.jpg 2,2 Мб 346 Кб / 150с 416 Кб / 4с 344 Кб / 4с
test-4.jpg 4,6 Мб 478 Кб / 286с 499 Кб / 5с 322 Кб / 5с

Как видно из результатов, победитель – WebP как по скорости сжатия, так и по размерам файлов. За исключением изображения номер 2.

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

За и против Guetzli


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

За


  • Создает меньшие по размеру файлы, чем другие алгоритмы сжатия с потерями
  • Сохраняет тип файлов (в отличие от WebP, который меняет формат и расширения файлов)
  • Совместим со всеми браузерами, поскольку изображение остается в JPEG формате

Против


  • Работает гораздо медленнее, чем остальные алгоритмы компрессии
  • WebP при сжатии дает файлы меньшего размера
  • Не поддерживает прогрессивный JPEG
  • Не позволяет устанавливать параметр качества ниже 84

Резюме


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

С другой стороны, тесты показывают, что WebP создает файлы меньшего размера и затрачивает на это в десятки раз меньшее время. Да, он поддерживается не всеми браузерами, это минус, но есть способы обойти эту проблему. В частности, некоторые плагины WordPress выдают тем браузерам, которые не поддерживают WebP исходные PNG- или JPEG-изображения.
Поделиться с друзьями
-->

Комментарии (3)


  1. Alexsandr_SE
    30.05.2017 13:00

    Смотря на график, как-то Lossy выглядит лучше всех. Размер чуть не тот, но скорость приличная и качество на уровне должно быть.
    Т.к. нет примеров того, что получилось при сжатии, а выбрал бы Lossy.


  1. Aingis
    30.05.2017 13:32
    +1

    Что такое Lossy? Это что за эксперимент, в котором никак не обговорено что происходит?


    Картинка №2 явно отличается от остальных множеством контрастных деталей. Можно сделать вывод, что Guetzli особенно хорош для сжатия таких изображений. Впрочем, выборка довольно мала и сложно сказать что-либо конкретное, не видя полученных в результате изображений. Судя по размеру, изображения явно больше превьюшек из поста.


    Выводы довольно слабые, как и сам пост.


  1. Denai
    30.05.2017 16:38

    Для сжатия нужно брать png. Даже если выставлено 100% quality — артефакты сжатия уже есть в картинке, а вы её дальше жмёте.
    Где сравнение исходных/итоговых изображений? Они же не одинаковые будут. Очередной тест ради заголовка.