Формат .webp уже поддерживается основными браузерами: файрфоксом, эджем, хромом и аналогами, их совокупная доля на рынке превышает 75%, а значит есть смысл его использовать, чтобы изображения быстрее загружались.
Как это сделать? Существуют решения с <picture> или определением поддержки webp при помощи джаваскрипта, добавлением класса .webp в <html> и загрузки нужных форматов через css. Эти варианты требуют изменения разметки. Вместо этого можно обойтись всего лишь изменением конфига сервера.
Работает так:
В диспетчере запросов будет виден только один запрос с изначальной картинкой, вместо которой будет отдан webp файл. В столбце Type будет указано "webp".
Существуют аналогичные решения: webp-detect (заодно есть конфиг для nginx и др.), WebP-images-with-htaccess.
Их особенность в том, что они не работают. В них для проверки существования файла с расширением webp используется {DOCUMENT_ROOT}, но у меня он ведет в корень сайта, а не в папку с файлом. Из-за этого сервер не может найти webp файлы. Зато вариант с {REQUEST_FILENAME} работает.
Как это сделать? Существуют решения с <picture> или определением поддержки webp при помощи джаваскрипта, добавлением класса .webp в <html> и загрузки нужных форматов через css. Эти варианты требуют изменения разметки. Вместо этого можно обойтись всего лишь изменением конфига сервера.
Работает так:
- Сервер проверяет, поддерживает ли браузер пользователя webp (браузер указывает в это заголовках запроса).
- Если пользователь запрашивает изображение, то сервер проверяет, есть ли такая же картинка с расширением webp.
- Если есть, то отдает ее пользователю. Иначе отдает обычную.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <IfModule mod_rewrite.c> | |
| RewriteEngine On | |
| # serves a .webp image instead of jpg/png | |
| RewriteCond %{HTTP_ACCEPT} image/webp | |
| RewriteCond %{REQUEST_FILENAME} ^(.+)\.(jpe?g|png)$ | |
| RewriteCond %1\.webp -f | |
| 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> | |
| AddType image/webp .webp |
Существуют аналогичные решения: webp-detect (заодно есть конфиг для nginx и др.), WebP-images-with-htaccess.
Их особенность в том, что они не работают. В них для проверки существования файла с расширением webp используется {DOCUMENT_ROOT}, но у меня он ведет в корень сайта, а не в папку с файлом. Из-за этого сервер не может найти webp файлы. Зато вариант с {REQUEST_FILENAME} работает.
