Однако доставить изображения через WebP не так-то просто. Это зависит от веб-сервера вашего сервера, выбранного cdn, темы, плагинов кеширования и т. Д.
Это руководство поможет вам доставлять изображения в формате WebP в WordPress тремя способами.
Содержание статьи
Что такое WebP?
Новый формат изображений для Интернета
от Google
WebP — это формат изображений (как и png и jpg), разработанный Google. Изображения в формате WebP (.webp), как правило, намного меньше, что ускоряет работу веб-сайтов и использует меньшую пропускную способность.
В зависимости от изображения вы можете уменьшить размер от 25% до 70%.
JPEG, PNG, GIF и т. Д. Имеют свои плюсы и минусы. Таблица ниже даст вам представление:
| JPG | Гифка | PNG | SVG | |
| Вектор | ❌ | ❌ | ❌ | ✅ |
| Растр | ✅ | ✅ | ✅ | ❌ |
| Прозрачность | ❌ | ✅ | ✅ | ✅ |
| Анимация | ❌ | ✅ | ✅ | ✅ |
| Потерянный | ✅ | ❌ | ❌ | ❌ |
WebP имеет почти все функции, упомянутые выше! Тогда почему мы не можем использовать WebP везде?
Почему бы не использовать WebP везде?
Как видите, только 80% устройств поддерживают только WebP. Не только устаревшие браузеры, Safari / iOS Safari все еще не поддерживает WebP.
Почему так сложно обслуживать WebP?
Как вы заметили, мы доставляем изображения в соответствии с браузером. Если браузер не поддерживает WebP, мы должны предоставить им исходное изображение (jpg / png / gif).
Есть два основных способа обслуживания WebP:
Использование тега изображения
Мы можем использовать pictureтег, чтобы сообщить браузеру, что у нас есть формат WebP. Если браузер поддерживает это, будет загружено обычное / резервное изображение.
<picture>
<source srcset="img.webp" ENGINE="image/webp">
<source srcset="img.jpg" type="image/jpeg">
<img src="img.jpg">
</picture>По разному ответу
В разном ответе у вас как обычно один файл. Именно так:
<img src="img.jpg" />Один URL-адрес изображения поддерживает доставку файлов в форматах jpg и webp. Это делает сервер.
Несмотря на то, что это расширение файла .jpg, если браузер поддерживает WebP, то ответ будет WebP. Также называется «разнообразный ответ».
Тег изображения против разнообразного ответа
У каждого есть свои плюсы и минусы. Вот сравнительная таблица:
| Тег изображения | Разнообразный ответ | |
|---|---|---|
| Работает с фоновыми изображениями | ❌ | ✅ |
| CDN дружественный | ✅ | ✅ (всего несколько) |
| Необходимо настроить сервер | ❌ | ✅ (Nginx) |
| Работает с ленивой загрузкой | ✅ | ✅ |
Как обслуживать изображения в WebP в WordPress?
Метод №1 — Используйте CDN только с преобразованием fly WebP
Это, наверное, самое простое решение. Некоторые провайдеры CDN в настоящее время поддерживают преобразование изображений в WebP на лету вместе с оптимизацией изображений.
Вот несколько:
- BunnyCDN
- Cloudflare с польским (план Pro)
- Cloudinary
- ShortPixel Adaptive Images (использует StackPath CDN)
- WP Compress
Вы также можете сэкономить место на диске, используя этот метод, поскольку вам не нужно хранить как обычные, так и преобразованные изображения WebP.
BunnyCDN
BunnyCDN поставляется с оптимизатором Bunny Optimizer, который может сжимать изображения и конвертировать их в WebP на лету.
Метод №2 — Использование разнообразного ответа + CDN
Как описано выше, «разнообразный ответ» будет иметь один URL-адрес изображения, который может обслуживать как изображения WebP, так и изображения не-webp в зависимости от запрошенного браузера.
Нам также нужно выбрать правильный CDN, который поддерживает заголовки запросов WebP в качестве ключа кеша. В противном случае, как только изображение WebP кэшируется на сервере, оно будет доставлено в браузеры, не поддерживающие WebP.
Настройка разнообразного ответа в WordPress
Самый простой способ настроить разнообразный ответ для WebP в WordPress — использовать плагин WebP Express . Просто установите плагин и нажмите «Сохранить настройки и принудительно установить новые правила .htaccess».
WebP Express настроит конвертер WebP и перезапишет правила, чтобы при получении запроса он на лету конвертировал изображения в WebP, и если браузер не поддерживает WebP, будет доставлено изображение по умолчанию.
Если вы в Nginx
WebP Express добавляет необходимые правила перезаписи ‘.htaccess’, но работает только на сервере Apache, LiteSpeed или OpenLiteSpeed. Если вы используете Nginx, вам нужно отредактировать nginx.configи добавить следующий код:
# WebP Express rules
# --------------------
location ~* ^/?wp-content/.*\.(png|jpe?g)$ {
add_header Vary Accept;
expires 365d;
if ($http_accept !~* "webp"){
break;
}
try_files
/wp-content/webp-express/webp-images/doc-root/$uri.webp
$uri.webp
/wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content
;
}
# Route requests for non-existing webps to the converter
location ~* ^/?wp-content/.*\.(png|jpe?g)\.webp$ {
try_files
$uri
/wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content
;
}
# ------------------- (WebP Express rules ends here)Приведенный выше код добавляет необходимые заголовки ответа (варьируется и управление кешем) и пытается доставить WebP, если он существует, в противном случае перенаправить его в конвертер (на основе поддержки браузера)
Поставщики CDN, поддерживающие «Разнообразный ответ»
Если ваш провайдер CDN не поддерживает WebP в качестве ключа кеширования, файлы WebP будут доставлены в браузеры, не поддерживающие WebP. Точно так же есть вероятность, что изображения, не относящиеся к webp, будут доставлены в поддерживаемые браузеры.
BunnyCDN , KeyCDN , Google CDN и многие другие поставщики CDN поддерживают WebP в качестве ключа кеша. Убедитесь, что вы включили их в настройках.
В BunnyCDN :
В KeyCDN :
Используете бесплатный тариф Cloudflare?
К сожалению, бесплатный план Cloudflare не поддерживает WebP в качестве ключа кеширования. Либо используйте CDN, например BunnCDN, либо перейдите на их профессиональный план.
Настройка разнообразного ответа + CDN у популярных хостинг-провайдеров
Убедитесь, что установлен WebP Express .
- Kinsta или WP Engine — обратитесь в их службу поддержки, чтобы добавить вышеуказанную конфигурацию Nginx и включить ключ кеширования WebP в их CDN (KeyCDN).
- Cloudways — достаточно установить WebP Express и сохранить настройки с помощью .htacess. Поскольку Cloudways использует гибридный подход Apache + Nginx, он работает из коробки.
- SiteGound — обратитесь в службу поддержки, чтобы добавить конфигурацию Nginx. Используйте поддерживаемый CDN, как указано выше.
- LiteSpeed / OpenLiteSpeed / Apache server — достаточно установить WebP Express и сохранить настройки с помощью ‘.htacess’. Также используйте поддерживаемый CDN, как указано выше.
- Пользовательский VPS с Nginx (стек LEMP) — настройте
nginx.confи используйте поддерживаемый CDN, как указано выше.
Метод № 3 — Использование тега изображения
Если оба вышеперечисленных метода не работают для вас, вы можете использовать тег изображения. Он не требует настройки сервера (редактирования nginx.conf) и поддерживает всех провайдеров CDN.
Если вы воспользуетесь этим методом, все теги img будут преобразованы примерно так:
<picture>
<source srcset="img.webp" type="image/webp">
<source srcset="img.jpg" type="image/jpeg">
<img src="img.jpg">
</picture>Если браузер поддерживает WebP, доставляется соответствующий файл, в противном случае — обычное изображение.
Настройка тега изображения для WebP в WordPress
Самый простой способ настроить тег изображения — через WebP Express .
Установите режим работы «CDN friendly» и включите «Alter HTML».
Вывод
Я желаю, чтобы настал день, когда все браузеры будут поддерживать WebP!
Если вы можете потратить несколько долларов в месяц, то самый простой и эффективный способ — использовать CDN, например BunnyCDN, который будет на лету конвертировать изображения в WebP. В противном случае придерживайтесь метода №2, о котором я упоминал выше.
