Оптимизация изображений с WebP

Игорь Грегорченко

18.11.2020 22:46

Минификация и сжатие уже давно стали вполне стандартными вещами для оптимизации кода веб-страниц. Все популярные веб-ресурсы оптимизируют изображения, используют все тот же CSS, когда это возможно, и выбирают правильные форматы картинок.

Но и этого недостаточно. Статистика HTTP Archive показывает, что изображения занимают около 64 % размера веб-страницы. На помощь приходит новый стандарт WebP, способный заменить JPEG и PNG.

Кратко о WebP

Формат появился еще в 2010 году и с тех пор разрабатывается Google. WebP основан на алгоритме сжатия ключевых кадров VP8 как с потерями, так и без, и упаковывается в контейнер на основе RIFF. Изображения WebP loseless в среднем на 26 % меньше по сравнению с PNG, а WebP lossy на 25-34 % меньше по сравнению с JPEG с тем же индексом SSIM. Новый формат также поддерживает прозрачность (известна как alpha channel).

Принцип работы

При сжатии с потерями в WebP применяется предиктивное кодирование, при котором значения соседних пиксельных блоков используются для предсказания значения нужного пиксельного блока, а затем кодируется разница.

Lossless-сжатие использует уже известные фрагменты изображения для точной реконструкции пикселей. Также может использоваться локальная палитра, если нет интересующих алгоритм совпадений.

Плюсы и минусы

За:

меньший размер изображения;
продвинутый алгоритм компрессии;
высокое качество изображения;
поддержка прозрачности.

Против:

плохая распространенность;
“пластиковость” при сжатии с потерями;
могут теряться цвета в пиксельной и другой компьютерной графике.

WebP уже поддерживается в Chrome, Opera и стандартным браузером Android, а при помощи библиотеки WebPJS может отображаться во всех популярных браузерах (в IE 6 и выше при помощи Flash).

Кроме того разработаны легкая библиотека кодирования и декодирования libwebp, утилиты командной строки для кодирования и декодирования WebP, а также инструменты для просмотра, мультиплексирования и анимирования изображений в этом формате.

Установка утилит и конвертация в WebP

Все инструменты можно скачать на странице для разработчиков Google. Они существуют для Windows, Linux и MacOS X в скомпилированном виде, но также можно загрузить исходный код для разработки (opensource все же) или самостоятельной компиляции.

Для конвертации из JPEG, PNG и TIFF используется утилита cwebp, а для декодирования — dwebp.

Конвертация запускается простой командой (из директории с утилитами):

cwebp input.png -q 80 -o output.webp

# Указание названий входного и выходного файлов, качества (от 0 до 100)

По тому же принципу запускается декодирование. Присутствует множество опций и дополнительных параметров, в том числе для проверки кодирования.

Развертывание WebP

Итак, вас заинтересовал новый формат, вы провели все тесты, еще раз просмотрели статистические данные и убедились, что Chrome все еще самый популярный веб-браузер. Что же дальше?

Дальше нужно сделать копию всех изображений в WebP (можно написать простенький скрипт для конвертации всех файлов), а затем проверять пользователей сайта и подсовывать им компактные изображения, если их браузер поддерживает WebP.

То есть можно создать свой скрипт, который будет проверять браузер клиента на поддержку формата, который затем будет подсовывать веб-сервер, или полностью возложить эту задачу на веб-сервер. Второй вариант кажется нам более логичным.

Согласование при помощи заголовка Accept

Браузеры передают заголовок Accept в виде:

# в Opera
Accept: text/html, application/xml;q=0.9, application/xhtml+xml, 
image/png, image/webp, image/jpeg, image/gif, image/x-xbitmap, */*;q=0.1

 # в Chrome
Accept: image/webp, */*;q=0.8

# Opera показывает все поддерживаемые форматы, в Chrome отдельно указывается поддержка WebP

Зная это, можно сконфигурировать веб-сервер, чтобы он автоматически передавал WebP. В качестве примера используем Nginx, в файл конфигурации которого необходимо добавить подобное:

location / {

  # проверка заголовка Accept и наличия версии файла в .webp 
  if ($http_accept ~* "webp")    { set $webp_accept "true"; }
  if (-f $request_filename.webp) { set $webp_local  "true"; }

  # если WebP есть, то передать Vary
  if ($webp_local = "true") {
    add_header Vary Accept;
  }

  # если клиент поддерживает WebP, то передать файл
  if ($webp_accept = "true") {
    rewrite (.*) $1.webp break;
  }
}

# Конфигурация Apache будет аналогичной

То есть, если в Accept не обнаружена поддержка WebP, то передаются обычные файлы.

Ну а если Nginx используется в качестве прокси для кэширования статики, то и конфигурация будет отличаться:

server {
  location / {
   
    if ($http_accept ~* "webp") { set $webp T; }
    proxy_cache_key $scheme$proxy_host$request_uri$webp;

    proxy_pass http://backend;
    proxy_cache my-cache;
  }
}

# Проверка запросов на наличие индикатора WebP и перенаправление на удаленные серверы

Самое главное

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