Размер: сжатие изображений с использованием Google Guetzli

Перевод статьи Size Matters: Compressing Images Using Google’s Guetzli, автор Clément Hannicq

Как вы знаете, средняя веб-страница теперь тяжелее, чем Doom. Одна из причин этого увеличения - вес изображений и необходимость поддерживать более высокие разрешения.

Гугл в помощь

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

Это не новый формат изображения, а новый способ сжатия изображений JPEG. То есть, нет необходимости в настраиваемом устройстве чтения изображений, изображения отображаются везде, где уже отображается JPEG.

Guetzli в реальной жизни

В одном из моих проектов была большая страница с изображениями (около 30 Мб для одной только домашней страницы, 27 из них - изображения). Я решил попробовать Guetzli, чтобы убедить нашего владельца продукта и нашего дизайнера, что потеря качества будет приемлемой, я пробовал этот новый алгоритм на одном из снимков с высоким разрешением, которые мы не использовали (8574 × 5715, 22 МБ JPEG). 

Не получилось. Согласно Google (и мой опыт подтверждает цифры), Guetzli занимает около 300 МБ ОЗУ на 1Mpix изображения (примерно 15 ГБ для изображения, которое у меня было), и у меня не было той памяти, доступной в то время (полдюжины серверов узлов, Паровые докерные контейнеры, хром и паровые электронные экземпляры занимали достаточно места, чтобы вычислить мой компьютер). Я повторил после очистки каждого не жизненно важного процесса, Guetzli взял 12 ГБ оперативной памяти, но преуспел. Google также заявляет, что для обработки изображения требуется около одной минуты на MPix для Guetzli, что примерно соответствует времени, которое потребовалось мне (чуть выше 40 минут).

Полученное изображение взвешивалось под 7 МБ (с 22 МБ), и я не мог определить, глядя на них, который был сжатым (наш дизайнер мог, но признал, что разница была «невероятно мала»).

  • 6.9M home-guetzli.jpg
  • 22M home-raw.jpg

Это сжатие было выполнено с использованием настройки качества по умолчанию Guetzli (которая идет от 84 до 100, чтобы попасть под 84, вам нужно будет скомпилировать и использовать версию, в которой вы измените минимальное значение).

Дополнительные тесты и некоторые успехи

Затем я решил попробовать разные настройки качества для этого изображения (написал очень простой скрипт, чтобы сделать это, не перезапуская процесс каждые 40 минут и не смог сделать это во время сна). Результаты здесь (и, похоже, коэффициент качества по умолчанию у Гетцли равен 95).

  • 6.9M    ./home-guetzli.jpg
  • 22M ./home-raw.jpg
  • 3.0M    ./home-raw.jpg.guetzli84.jpg
  • 3.4M    ./home-raw.jpg.guetzli87.jpg
  • 4.2M    ./home-raw.jpg.guetzli90.jpg
  • 5.5M    ./home-raw.jpg.guetzli93.jpg
  • 8.8M    ./home-raw.jpg.guetzli96.jpg
  • 18M ./home-raw.jpg.guetzli99.jpg

И владелец продукта, и дизайнер согласились пойти с коэффициентом качества 84. Затем я преобразовал все наши активы, и мы пошли от 30 МБ до менее 8 МБ для главной страницы (3 МБ из тех, которые являются CSS / скриптом). Следует отметить, что раньше не было какой-либо формы сжатия изображения.

Предостережения

Установка Guetzli на моей машине была безболезненной (кто-то создал AUR-пакет, содержащий Guetzli на archlinux, многое благодаря тому, кто это сделал), и его запуск прямолинейно (если у вас достаточно ОЗУ). Кажется, есть пакет для пива (для пользователей macOs), но я не тестировал его.

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

Будучи кодировщиком JPEG, он не может выводить PNG (поэтому нет прозрачности). Но он может конвертировать и сжимать ваши PNG. Эффективность привязана к начальному качеству изображения: я заметил, что коэффициент сжатия составляет от 7x на наибольшем изображении до 2x на небольших изображениях. Потеря данных была также более заметна на этих небольших изображениях.

В нескольких случаях я также наблюдал потерю насыщенности цвета (что было признано приемлемым в моем случае).

TL; DR

Guetzli можно попробовать, это может дать вам не приемлемые результаты (особенно при низком качестве картинки), однако это поможет сэкономить несколько мегабайт на вашем сайте.