Внедряем webp без боли

Недавно начал работу над очередным проектом, и захотелось сразу добавить поддержку webp (раз такая поддержка уже есть в MODX из коробки). Задача несложная, но хотелось сделать все красиво, да так чтобы менеджеру не нужно было дополнительно эти изображения конвертировать.

По началу была выбрана тактика согласно ГОСТу, то есть просто использовать тег picture. Но уже на этом этапе уже начались проблемы:

1. Верстка — в css были правила такого рода

   div>img {}

2. Этот тег не поможет, если используется background-image и другие варианты использования изображений в css
3. Отображение больших изображений в лайтбоксах (fotorama, fancybox ...)

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

Решение:

В качестве решения были использованы стандартные возможности веб-сервера (nginx или apache) для подмены изображений если у клиентского браузера есть такая поддержка.

Вариант для «контентных» изображений:

Все просто, при сохранении ресурса генерируем с помощью phpThumb нужные изображения с такими же названиями которые используются но в формате webp. Далее веб-сервер сделает все за нас по такой логике:

1. проверяем если запрос идет на изображения jpg и png
2. смотрим заголовки браузера на наличие accept: image/webp
3. если все в порядке ищем рядом изображение с таким же названием только в расширением webp
4. если изображение найдено, тогда добавляем заголовок Vary Accept
5. отдаем вместо запрошенного изображения то что в формате webp

Пример конфига apache:

создаем файл .htaccess в папке со статикой (у меня это папка /static/ в корне)

<IfModule mod_rewrite.c>
     RewriteEngine On
     RewriteCond %{HTTP_ACCEPT} image/webp
     RewriteCond %{REQUEST_URI}  (.*)(\.(jpe?g|png))$
     RewriteCond %{DOCUMENT_ROOT}/%1\.webp -f
     RewriteRule .* %1\.webp [L,T=image/webp]
 </IfModule>
 <IfModule mod_headers.c>
     Header append Vary Accept env=REDIRECT_accept
 </IfModule>
 <IfModule mod_mime.c>
   AddType image/webp .webp
 </IfModule>

Пример конфига nginx:

аналогично с предыдущим примером (вся статика лежит в папке /static/ в корне)

location ~* ^(.*)(/static/.*)(jpg|jpeg|png)$  {
        set $webp  $1$2webp;
        set $rootFile "${document_root}${webp}";
        if ($http_accept ~* "webp"){set $test  A;}
        if (-f $rootFile) {set $test "${test}B";}
        if ($test = AB) {
                add_header Vary Accept;
                rewrite (.*) $webp break;
        }
}

Вариант для изображений minishop2:

Для начала нам нужно в источнике файлов minishop2 добавить генерацию изображений в этом формате таким образом.
Нужно определится с размерами которые нам нужны. В качестве примера у меня используется только 1 размер превью с таким конфигом

{"small":{"w":500,"h":500,"q":90,"zc":"1","bg":"000000"}}

я его дублирую, при этом к названию добавляю «webp» и указываю нужный тип файла для генерации, остальные параметры оставляю как есть, и у нас получается вот такой конфиг

{"small":{"w":500,"h":500,"q":90,"zc":"1","bg":"000000"},
"smallwebp":{"w":500,"h":500,"q":90,"zc":"1","bg":"000000","f":"webp"}}

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

Существующие изображения нужно будет перегенерировать, инструкции для этого можно прямо в сообществе найти. Просто воспользуйтесь поиском.

Конфиг для apache:

создаем файл .htaccess в папке /assets/images/ с таким содержимым:

<IfModule mod_headers.c>
    Header append Vary Accept env=REDIRECT_accept
</IfModule>
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{REQUEST_URI}  ^(.*)(/images/products/.*)(/.*)(/.*)(jpe?g|png)$
    RewriteCond %{DOCUMENT_ROOT}%1%2%3webp%4webp -f
    RewriteRule ^(.*)$ %1%2%3webp%4webp [L,T=image/webp]
</IfModule>
<IfModule mod_mime.c>
    AddType image/webp .webp
</IfModule>

Конфиг для nginx:

location ~* ^(.*)(/images/products/.*)(/.*)(/.*\.)(jpg|jpeg|png)$  {
        set $ext webp;
        set $webp  $1$2$3$ext$4$ext;
        set $rootFile "${document_root}${webp}";
        if ($http_accept ~* "webp"){set $test  A;}
        if (-f $rootFile) {set $test  "${test}B";}
        if ($test = AB) {
                add_header Vary Accept;
                rewrite (.*) $webp break;
        }
}

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

<picture>
<source type="image/webp" media="(min-width: 1200px)" data-srcset="img/slide-dom1-500.webp">
<source media="(min-width: 1200px)" data-srcset="img/slide-dom1-500.png">
<source type="image/webp" data-srcset="img/slide-dom1-300.webp 1x, img/slide-dom1-788.webp 2x">
<source data-srcset="img/slide-dom1-300.png 1x, img/slide-dom1-788.png 2x">
<img alt="Двух этажный каркасный дом" class="lazy slide-dom1" data-src="img/slide-dom1-500.png">
</picture>

<picture>

location ~* ^(.*)(/images/products/.*)(/.*)(/.*\.)(jpg|jpeg|png)$  {
        set $ext webp;
        set $webp  $1$2$3$ext$4$ext;
        set $rootFile "${document_root}${webp}";
        if ($http_accept ~* "webp"){set $test  A;}
        if (-f $rootFile) {set $test  "${test}B";}
        if ($test = AB) {
                add_header Vary Accept;
                rewrite (.*) $webp break;
        }
}