Как перейти на формат WebP с минимальными изменениями сайта

Некоторое время назад появился новый формат для графических изображений — WebP. Этот формат обладает рядом преимуществ по сравнению с JPEG: поддерживает как сжатие с потерями, так и сжатие без потерь, а также прозрачность изображений (альфа-канал), и во многих случаях сжимает изображения эффективнее (на моих сайтах — изображения в WebP получаются 30-35% меньше). Но к сожалению, полностью перейти на этот формат пока не так просто. Во-первых, сейчас его полноценно поддерживают только Web-броузеры, работающие на основе WebKit, а Firefox и IE/Edge — нет. Во-вторых, исправить на уже существующем сайте расширения всех файлов с .jpg на .webp может быть весьма трудоемкой задачей. Но недавно я нашел интересное решение, которое предложил Vincent Orback на Github: использовать подмену JPEG на WebP с помощью mod_rewrite. Для этого добавим в .htaccess такие строки:

AddType image/webp .webp



<IfModule mod_rewrite.c>

 RewriteEngine On



 # Check if browser support WebP images

 RewriteCond %{HTTP_ACCEPT} image/webp



 # Check if WebP replacement image exists

 RewriteCond %{DOCUMENT_ROOT}/$1.webp -f



 # Serve WebP image instead

 RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]

</IfModule>

<IfModule mod_headers.c> 


  Header append Vary Accept env=REDIRECT_accept 


</IfModule> 

Работает это так: если броузер в заголовке Accept указал, что он принимает формат image/webp, то проверяем, есть ли на сервере файл с тем же именем, но расширением .webp, и, если да, отдаем его вместо запрошенного. Если нет — отдаем файл как обычно. Строка Header Append Vary Accept означает, что содержимое ответа может меняться в зависимости от заголовка Accept (это нужно для корректного кеширования на proxy-серверах).

Таким образом получаем, что в HTML-коде сайта менять ничего не требуется, а достаточно конвертировать файлы графики из JPEG в WebP. Если на сервере установлен пакет ImageMagic, то можно сделать это с помощью утилиты mogrify:

mogrify -format webp *.jpg

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