Sergej Qkowlew

Гугль стал продвигать "более современные форматы изображений".

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

Я не сторонник усложнять конфиги веб серверов. Однако поконвертировав всё подряд в .webp, я увидел порой ДЕСЯТИкратную экономию размера без видимого изменения качества картинки. И потому соблазнён.

Порывшись по просторам Интернета и исследовав, какие броусеры поддерживают, а какие нет, формат .webp (mime image/webp), я на большинстве контролируемых мной сайтов сделал так:


1. Каждому файлу с расширением .png .jpg .jpeg создал файл .webp скриптом (с параметрами качества cwebp -q 85 -exact).
1.1. Сайтам на WordPress добавил плагин Media Webp от Steven Turner с настройками на картинке справа чтобы заливаемые файлы на сайт сразу получали .webp добавки.
2. Для сайтов под Apache добавил в корневой .htaccess строки:

<IfModule mod_rewrite.c>
RewriteEngine On

RewriteCond %{HTTP:Accept} image/webp
RewriteCond %{REQUEST_FILENAME}\.webp -s
RewriteRule ^(.*)\.([pP][nN][gG]|[jJ][pP][eE]?[gG]) $1\.$2\.webp [QSA]

# Prevent double webp and give the correct mime-type
RewriteRule \.[pP][nN][gG]\.webp$ - [T=image/webp]
RewriteRule \.[jJ][pP][gG]\.webp$ - [T=image/webp]
RewriteRule \.[jJ][pP][eE][gG]\.webp$ - [T=image/webp]

</IfModule>

3. Для сайтов на Nginx в корневой конфиг nginx добавил проверку на то, поддерживает ли браусер формат webp:

map $http_accept $webpsupport {
   default 0;
   "~*image/webp,*/*" "1";
   }

А в virtual host'ы nginx - location такого вида, чтобы при наличии .webp файла И поддержке его браусером отдавался .webp файл, а при невыполнении любого из этих двух условий - оригинальный файл:

    location ~* \.([jJ][pP][eE]?[gG]|[pP][nN][gG])$ {
      expires max;
      add_header Pragma public;
      add_header Cache-Control "max-age=31536000, public";
      set $dorewrite 0;
      if (-f $request_filename.webp) {
         set $dorewrite $webpsupport ;
      }
      if ($dorewrite) {
         rewrite ^(.*)\.([jJ][pP][eE]?[gG]|[pP][nN][gG]) $1.$2.webp last;
      }
    }

Сделано и написано по следам и с творческой переработкой этой статьи и того, что написано в описании плагина Media Webp от Steven Turner (в частности, в той статье не предусмотрено отсутствие одного из файлов, а большие и маленькие буквы в расширении оригинальных файлов тоже могут быть разными, хехе).

Критика приветствуется.

Также тут

Оригинал этого поста в Dream Width. Если вы там есть - отвечайте там, уже комментариев: