Размер важен: сжатие изображений с использованием 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, вам нужно будет скомпилировать и использовать версию, в которой вы измените минимальное значение).

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

Затем я решил попробовать разные настройки качества для этого изображения (я написал очень простой скрипт, чтобы сделать это). Результаты здесь (и, похоже, коэффициент качества по умолчанию у Гетцли равен 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, и спасибо тому, кто это сделал). Кажется, есть пакет для пользователей Mac OS, но я не тестировал его.

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

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

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

TL; DR

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