Webp формат. На заметку. Вебмастерам и админам хостинга.
Гугль стал продвигать "более современные форматы изображений".
Однако не все браусеры их поддерживают, а если даже все бы поддерживали, некоторые картинки при массовой переконвертации не конвертятся, а то и получаются большего размера.
Я не сторонник усложнять конфиги веб серверов. Однако поконвертировав всё подряд в .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 строки:
3. Для сайтов на Nginx в корневой конфиг nginx добавил проверку на то, поддерживает ли браусер формат webp:
А в virtual host'ы nginx - location такого вида, чтобы при наличии .webp файла И поддержке его браусером отдавался .webp файл, а при невыполнении любого из этих двух условий - оригинальный файл:
Сделано и написано по следам и с творческой переработкой этой статьи и того, что написано в описании плагина Media Webp от Steven Turner (в частности, в той статье не предусмотрено отсутствие одного из файлов, а большие и маленькие буквы в расширении оригинальных файлов тоже могут быть разными, хехе).
Критика приветствуется.
Также тут
Однако не все браусеры их поддерживают, а если даже все бы поддерживали, некоторые картинки при массовой переконвертации не конвертятся, а то и получаются большего размера.
Я не сторонник усложнять конфиги веб серверов. Однако поконвертировав всё подряд в .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. Если вы там есть - отвечайте там, уже комментариев:
