Изображения вносят самый большой вклад в размер веб-страниц. По мнению многих экспертов, оптимизация изображений, их сжатие – приоритет номер один в списке мероприятий по ускорению производительности сайтов. Для этого могут использоваться различные методы сжатия – с потерями или без потерь, а также конвертация в другие форматы – 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 напрямую с GitHub
- Использовать последнюю версию ImageOptim
- Использовать FileOptimizer
В зависимости от ваших задач, процесс установки может различаться. Для целей данной статьи Guetzli был установлен с помощью Homebrew согласно инструкции для установки на Mac OS, находящейся на GitHub.
- Установить Homebrew
- Ввести
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
Резюме
С другой стороны, тесты показывают, что WebP создает файлы меньшего размера и затрачивает на это в десятки раз меньшее время. Да, он поддерживается не всеми браузерами, это минус, но есть способы обойти эту проблему. В частности, некоторые плагины WordPress выдают тем браузерам, которые не поддерживают WebP исходные PNG- или JPEG-изображения.
Поделиться с друзьями
Комментарии (3)
Aingis
30.05.2017 13:32+1Что такое Lossy? Это что за эксперимент, в котором никак не обговорено что происходит?
Картинка №2 явно отличается от остальных множеством контрастных деталей. Можно сделать вывод, что Guetzli особенно хорош для сжатия таких изображений. Впрочем, выборка довольно мала и сложно сказать что-либо конкретное, не видя полученных в результате изображений. Судя по размеру, изображения явно больше превьюшек из поста.
Выводы довольно слабые, как и сам пост.
Denai
30.05.2017 16:38Для сжатия нужно брать png. Даже если выставлено 100% quality — артефакты сжатия уже есть в картинке, а вы её дальше жмёте.
Где сравнение исходных/итоговых изображений? Они же не одинаковые будут. Очередной тест ради заголовка.
Alexsandr_SE
Смотря на график, как-то Lossy выглядит лучше всех. Размер чуть не тот, но скорость приличная и качество на уровне должно быть.
Т.к. нет примеров того, что получилось при сжатии, а выбрал бы Lossy.