Как обслуживать изображения WebP в WordPress (3 метода)
Если вы проанализировали свой сайт с помощью Google PageSpeed Insights, возможно, вы видели ошибку «показ изображений в форматах следующего поколения». Ну, WebP – это формат следующего поколения.
Тем не менее, доставка изображений WebP не так проста. Это зависит от вашего веб-сервера, выбора CDN, темы, плагинов кеша и т. д..
Это руководство поможет вам доставить изображения в виде WebP в WordPress тремя способами.
Что такое WebP?
Новый формат изображения для Интернетаот
WebP – это формат изображений (как png и jpg), разработанный Google. Изображения в формате WebP (.webp), как правило, намного меньше, что делает сайты быстрее и использует меньшую пропускную способность.
В зависимости от изображения, вы можете получить уменьшение от 25% до 70%.
JPEG, PNG, GIF и т. Д. Имеют свои плюсы и минусы. Таблица ниже даст вам представление:
| JPG | GIF | PNG | SVG | |
| Вектор | ❌ | ❌ | ❌ | ✅ |
| растр | ✅ | ✅ | ✅ | ❌ |
| прозрачность | ❌ | ✅ | ✅ | ✅ |
| Анимация | ❌ | ✅ | ✅ | ✅ |
| с потерями | ✅ | ❌ | ❌ | ❌ |
WebP поставляется практически со всеми функциями, упомянутыми выше! Тогда почему мы не можем использовать WebP везде?
Почему бы не использовать WebP везде?
Поддержка браузера WebP
Как видите, только 80% устройств поддерживают только WebP. Safari / iOS Safari и не только устаревшие браузеры тоже не поддерживает WebP.
Почему обслуживание WebP сложно?
Как вы заметили, мы должны доставлять изображения в соответствии с браузером. Если браузер не поддерживает WebP, мы должны предоставить ему исходное изображение (jpg / png / gif).
Есть в основном два способа обслуживания WebP:
Использование тега изображения
Мы можем использовать pictureтег, чтобы сообщить браузеру, что у нас есть формат WebP. Если браузер поддерживает его, оно будет извлечено. В противном случае будет отображено нормальное / резервное изображение.
По разнообразному ответу
В различных ответах у вас как обычно один файл. Именно так:
URL-адрес одного изображения способен предоставлять jpg и webp. Это делается сервером.
Несмотря на то, что расширение файла – «.jpg», если браузер поддерживает WebP, ответом будет WebP. Также называется «разнообразный ответ».
Тег изображения против разнообразного ответа
У каждого свои плюсы и минусы. Вот сравнительная таблица:
| Тег изображения | Разнообразный ответ | |
|---|---|---|
| Работает с фоновыми изображениями | ❌ | ✅ |
| CDN дружественный | ✅ | Only (всего несколько) |
| Нужно настроить сервер | ❌ | ✅ (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, если он существует, в противном случае перенаправляет его в конвертер (на основе поддержки браузера)
Поставщики CDN, которые поддерживают «Разнообразный ответ»
Если ваш провайдер CDN не поддерживает WebP в качестве ключа кэша, файлы WebP будут доставляться в браузеры, не поддерживаемые webp. Точно так же есть вероятность, что изображения, не относящиеся к webp, будут доставляться в поддерживаемые браузеры.
BunnyCDN , KeyCDN , Google CDN и многие другие поставщики CDN поддерживают WebP в качестве ключа кэша. Убедитесь, что вы включили их в настройках.
В [зайчике CDN](https://wpspeedmatters.com/get/bunnycdn/ :
В KeyCDN :
Используете бесплатный план Cloudflare?
К сожалению, бесплатный план Cloudflare не поддерживает WebP в качестве ключа кэша. Либо используйте CDN, например [BunnCDN,]https://wpspeedmatters.com/get/bunnycdn/ либо приобретите профессиональный план.
Настройка различных ответов + CDN в популярных хостинг-провайдерах
Убедитесь, что WebP Express установлен.
- [Kinsta](https://wpspeedmatters.com/get/kinsta/ “Kinsta”) или [WP Engine](https://wpspeedmatters.com/get/wp-engine/ “WP Engine”) – [обратитесь в службу](https://wpspeedmatters.com/get/kinsta/ “Kinsta”) поддержки, чтобы добавить вышеупомянутую конфигурацию Nginx и включить ключ кэширования WebP-ключа в их CDN (KeyCDN).
- [Cloudways](https://wpspeedmatters.com/get/cloudways/ “Cloudways”) – достаточно [установить](https://wpspeedmatters.com/get/cloudways/ “Cloudways”) WebP Express и сохранить настройки с помощью .htacess. Поскольку Cloudways использует гибридный подход Apache + Nginx, он работает «из коробки».
- [SiteGound](https://wpspeedmatters.com/get/siteground/ “SiteGround”) – Обратитесь в [службу](https://wpspeedmatters.com/get/siteground/ “SiteGround”) поддержки, чтобы добавить конфигурацию Nginx. Используйте поддерживаемый CDN, как указано выше.
- Сервер LiteSpeed / OpenLiteSpeed / Apache – достаточно установить WebP Express и сохранить настройки с помощью .htacess. Также используйте поддерживаемый CDN, как указано выше.
- Пользовательский VPS с Nginx (стек LEMP). Настройте
nginx.confи используйте поддерживаемый CDN, как указано выше.
Метод № 3 – Использование тега изображения
Если оба вышеуказанных метода не работают для вас, вы можете использовать тег изображения. Он не требует никакой настройки сервера (редактирование nginx.conf) и поддерживает всех провайдеров CDN.
Использование этого метода изменит HTML для доставки WebP. Он не будет работать с фоновыми изображениями, не совместим с некоторыми темами, плагинами кэша, плагинами отложенной загрузки и т. д.
Если вы используете этот метод, все теги img будут преобразованы во что-то вроде этого:
Если браузер поддерживает WebP, соответствующий файл доставляется, в противном случае обычное изображение.
Настроить тег изображения для WebP в WordPress
Самый простой способ настроить тег изображения — через WebP Express.
Установите режим работы «CDN friendly» и включите «Alter HTML»
Вывод
Желаю, чтобы был день, когда все браузеры поддерживали WebP!
Если вы можете тратить несколько долларов в месяц, то самый простой и эффективный способ — использовать CDN, такой, как [BunnyCDN,](https://wpspeedmatters.com/get/bunnycdn/ “BunnyCDN”) который будет конвертировать изображения в WebP на лету. В противном случае придерживайтесь метода № 2, который я упоминал выше.
Комментарий ниже, если у вас есть какие-либо вопросы или отзывы. Я читаю и отвечаю на каждого из них в течение 8 часов!
Источник записи: https://techblog.sdstudio.top/kak-obsluzhivat-izobrazhenija-webp-v-wordpress-3-metoda/
Источник записи: https://wpspeedmatters.com