8975 Знания

Как использовать WebP для оптимизации картинок на сайте

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

В первом выпуске «Спроси PR-CY» пользователь с никнеймом Илья задал вопрос эксперту:

«Перспективные форматы картинок в ближайшем будущем? Может, уже сейчас начинать заливать WebP или другие форматы?»

Экспертом выступал Андрей Прудко, директор студии интернет-маркетинга и веб-брендинга «Большая Буква», и вот что он ответил:

«Google активно продвигает WebP и будет продолжать это делать. Но, как известно, данный формат поддерживают 75% браузеров.

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

Положительное влияние наличия формата WebP на сайте на поисковую выдачу уже замечено».

Эксперт советует применять формат WebP на сайте, но использовать его среди прочих. Разберемся, что это за формат и чем он отличается от других.


Что такое WebP

WebP — формат графических изображений. В 2010 году Google разработал его в качестве альтернативы для PNG и JPEG.


Как это работает

Сжатие в этом формате основано на алгоритме сжатия ключевых кадров видеокодека VP8, а упаковывается в контейнер на основе RIFF.

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

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


Преимущества и недостатки WebP

Плюсы формата:

  • сохраняет такое же качество при меньшем размере картинки: при сжатии с потерями размер будет в среднем на 30% меньше, чем в JPEG, а без потерь в среднем на 25% меньше, чем PNG. Подтверждающее исследование в следующем пункте статьи;
  • сочетает в себе все преимущества PNG, JPEG и GIF, поддерживает прозрачность и анимацию.
характеристика популярных форматов изображений
Сравнение популярных форматов изображений


Недостатки:

  • формат поддерживают не все браузеры;
  • в пиксельной графике может потеряться часть цветов;
  • при сжатии с потерями изображение может выглядеть плоским.
форматы JPEG и WebP
Сравнение изображения: слева JPEG, справа WebP


WebP vs JPEG: данные исследования

В январе 2019 года Google обновили исследование, в котором сравнивали сжатие изображений с помощью WebP и JPEG.

Как проводили исследование

Использовали два типа оценок. В первом случае генерировали изображения WebP того же качества, что и изображения JPEG, а затем сравнивали размеры получившихся файлов. Качество измеряли с помощью индекса SSIM, для вычисления использовали общедоступную реализацию на C ++.

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

Изображения брали из нескольких наборов:

  • Lenna — картинки 512 x 512 px;
  • Kodak — 24 изображения из набора цветных изображений Kodak;
  • Tecnick — 100 цветных изображений RGB из коллекции Tecnick.com;
  • Image_crawl — случайная выборка картинок PNG из базы данных веб-сканирования Google Image Search.

Результаты исследования

По первому методу оценивания выяснилось, что при одинаковом качестве средний размер файла WebP на 25-34% меньше по сравнению с размером файла JPEG.

сравнение форматов изображений
Средний размер файла с одинаковым качеством, JPEG Q = 75

По методу подсчета битов на пиксель графики показали, что при одинаковом индексе SSIM для сжатия WebP нужно меньше битов на пиксель, чем для JPEG.

сравнение форматов изображений
График для набора данных Kodak

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

Какие браузеры поддерживают WebP

Формат поддерживают Chrome, Opera, браузер Android и остальные популярные браузеры, последним о поддержке в Firefox объявили Mozilla. Остались браузеры Apple, которые не хотят включать поддержку этого формата. Причиной может быть то, что компания разрабатывает более современный AVIF.

По информации с сайта caniuse.com, на вторую неделю апреля 2019 года такие данные: WebP поддерживают 78,49% браузеров пользователей в мире и 68,58% в России.

форматы изображений для сайта
Статистика с caniuse.com

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


Как конвертировать изображения в WebP

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

Онлайн-сервисы


Squoosh

Squoosh конвертирует и сжимает изображения онлайн. Он справится с большими фотографиями, иллюстрациями, скриншотами и иконками в SVG, работает с разными форматами. Можно сравнивать варианты картинки, контролировать артефакты, настраивать нужный уровень сжатия и следить за итоговым размером изображения.

сервис для сжатия изображений
Сжатие JPG в WebP в Squoosh


Файл 1,51 MB после конвертирования стал весить 185 kB.

Online-Convert

Online-Convert.com тоже конвертирует онлайн. Он работает с изображениями, документами, видео, аудио, архивами и другими форматами. Нас интересует конвертер в WebP: он позволяет обрезать изображение, выставить размер, настроить улучшения для картинки.

Конвертирование  JPG изображений в WebP
Настройки конвертирования JPG в WebP в сервисе


После конвертирования файл стал весить 238,21 kB.

Zamzar

Простой онлайн-сервис Zamzar для конвертирования изображений. Перетаскиваете изображение в поле, выбираете нужный формат из списка и нажимаете на конвертирование, других настроек нет. Дальше останется скачать готовый файл.

сжать изображение онлайн
Интерфейс приложения

Исходный файл весил 507,88 kB, итоговый 355 kB.

Приложения

Webpconv для Windows

Приложение Webpconv для конвертирования разных форматов в WebP. Работает с установкой и портативно. Webpconv может конвертировать несколько файлов одновременно, кодировать JPEG и PNG в WebP и обратно. Есть меню для настройки кодирования, чтобы получить более качественный файл и настроить итоговый размер.

конвертирование изображений
Окно настройки кодирования


Photoshop-плагин для Windows и Mac

Для редактора Photoshop есть отдельный бесплатный плагин, позволяющий открывать и сохранять 24-битные изображения WebP. Плагин поддерживается версиями Mac CS2 / 3/4, Mac CS5 / CS6 и Windows (32 и 64 бит). На Photoshop CC не работает.

сервис для сжатия изображений
Выбор формата


WebPonize для Mac

Для работы с изображениями для Mac есть инструмент WebPonize — проект с открытым исходным кодом на Github. После установки можно конвертировать изображения в в формат WebP на Mac — просто перетащить изображение в поле.

сжать изображение онлайн
Демонстрационное изображение WebPonize


Sketch для Mac

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

конвертировать изображение в webpr
Экспорт изображения в редакторе

Редактор предназначен для работы с устройствами на базе MacOS, доступна бесплатная версия на 30 дней.

Инструменты командной строки

Форматы JPEG, PNG и TIFF в WebP конвертируют с помощью утилиты cwebp, а декодируют с помощью dwebp.

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

# cwebp -q [quality] [input_file] -o [output_file]
cwebp -q 75 image.png -o image.webp

Декодирование работает по такому же принципу.

Инструменты Node

Самые популярные библиотеки для конвертации — Imagemin с плагином imagemin-webp. Пример скрипта для конвертирования в WebP всех файлов форматов PNG и JPG из папки:

/* convert-to-webp.js */
const imagemin = require("imagemin");
const webp = require("imagemin-webp");
imagemin(["*.png", "*.jpg"], "images", {
 use: [
 webp({ quality: 75})
 ]
});

Этот скрипт можно использовать из командной строки или с помощью сборщика:

node convert-to-webp.js

Настройка для Mac OSX

Для настройки у вас должен быть установлен Xcode. Порядок дальнейших действий:

  1. Загрузите и установите MacPorts.
  2. Запустите Terminal.
  3. Обновите MacPorts до последней версии: введите "sudo port selfupdate" и нажмите ввод.
  4. Для установки libwebp (WebP Library) введите "sudo port install webp" и нажмите ввод.
перевести изображение в webpr
Процесс установки

Как использовать WebP на сайте

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

При этом нужна система с резервными вариантами (fallback), на случай, если пользовательский браузер не воспринимает WebP.

Проверка форматов браузера

Способ, где скрипт проверяет браузер на поддержку формата и при ее наличии отдает WebP.

Систему с резервными вариантами для WebP можно настроить через HTML5-элемент . Альтернативные форматы добавляют с помощью элемента внутри . В дополнение нужно оставить и обычный, он будет использован для браузеров, которые не поддерживают форматы файлов через :

<picture>
 <source type="image/webp" srcset="image.webp">
 <source type="image/jpeg" srcset="image.jpg">
 <img src="image.jpg" alt="Изображение">
</picture>

Атрибуты элемента для определения формата и условий использования:

  • type — MIME-тип формата;
  • srcset — путь к файлу изображения, можно использовать несколько файлов с разными размерами и PPI — плотностью пикселей;
  • sizes — список размеров каждого файла;
  • media — запрос, определяющий источник для вывода картинки.


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

Способ, подразумевающий использование заголовка 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 нужно отдельно указать только WebP:

Accept: image/webp, */*;q=0.8

Можно настроить автоматическую передачу WebP с веб-сервера. Конфигурация в Nginx и Apache будет аналогичной. В файл конфигурации добавляем подобную запись:

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;
  }
}

Если в Accept нет поддержки WebP, то сервер будет передавать файлы других форматов.

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

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, если поддержка есть.

Главное о картинках на сайте в пяти статьях
Google о лучшей видимости картинок в SERP
​Как оптимизировать изображения для многоязычных сайтов
Комментарии (6)
Олег Менщиков   09.04.2019 18:01
это все, конечно, хорошо, НО!!! в водпресс файл WebP не загрузить, эта конструкция не работает. function webp_upload_mimes( $existing_mimes ) { // add webp to the list of mime types $existing_mimes['webp'] = 'image/webp'; // return the array back to the function with our added mime type return $existing_mimes; } add_filter( 'mime_types', 'webp_upload_mimes' ); Есть у кого-нибудь варианты решения?
Ivan Plyasunov   10.04.2019 09:29
Дык вот же https://wpgutenberg.top/dobavljaem-podderzhku-webp-v-wordpress/ Да и воообще, это же Вордпресс. Там всегда всё решается плагинами. Для этой цели их уже не один.
Олег Менщиков   10.04.2019 10:51
попробовал- не получилось) толи руки не из того места толи еще что-то)) да и без плагина хотелось бы решить) вроде не столь сложная задача( а трудности появились там где их не ждали))
woolfon   10.04.2019 04:52
Пол года назад экспериментировал с WebP, в первую очередь я это делал для Google Speed Test. Но потом до меня дошло что не все браузеры его поддерживают, а делать для каждого браузера свой формат картинки я посчитал слишком геморным и решил подождать когда все браузеры перейдут на WebP. Безусловно, у этого формата есть будущее, сжимает картинки с 200кб до 20кб, это фантастика.
begom   15.04.2019 10:15
К сожалению пока реальность такова, что WebP на боевых коммерческих проектах применять еще рановато. Для заказчика дико, что 20-30% посетителей его сайта не смогут увидеть картинки (фото товаров и т.п.). Поэтому самый простой и эффективный путь - оптимизировать/сжимать картинки текущих форматов (png, jpeg). Поделюсь своим опытом сжатия картинок... Сначала приходилось вручную перижимать все картинки через Фотошоп. Самый бесплатный кстати вариант (если не считать стоимость лицензии на Photoshop). Но очень много времени этот процесс занимает, если картинок на сайте больше 5-10. Каждую картинку приходится вручную обрабатывать, а потом еще на сайт заливать снова. Утомительный такой процесс... Теперь использую такой сервис - /удалено администрацией/ Экономит много времени) Работает сам по себе - автоматически - только 1 раз его надо к сайту подключить. Гугл доволен)
Demi Murych   08.05.2019 13:42
Реальность сейчас такова, что на любом проекте webp сейчас должен быть по умолчанию. Те посетители которые пользуются браузером, который не поддерживает webp - получают jpg или png. Прочтите внимательно статью, там прекрасно описано как это происходит.

Чтобы оставлять комментарии, вам нужно войти в систему

Авторизоваться

К данной записи нельзя добавлять комментарии, т.к. она очень старая.