[Хд] logo

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

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

Но и этого недостаточно. Статистика 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 negotiation Nginx

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

Согласование при помощи заголовка 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 позволит существенно уменьшить размер веб-страницы, но учитывая его ограниченную поддержку необходимо дополнительно настраивать веб-сервер и содержать копии всех изображений в нескольких форматах.

  read in english
[Хд]

Подписывайтесь на отборные материалы по продвинутой разработке

Google Email

Esc, чтобы подписаться позже