«
»
GooglePageSpeed InsightsWordPress

Как обслуживать изображения WebP в WordPress (3 метода)

Если вы проанализировали свой сайт с помощью Google PageSpeed Insights, возможно, вы видели ошибку «показ изображений в форматах следующего поколения». Ну, WebP – это формат следующего поколения.
Ошибка WebP PageSpeed Insights
Тем не менее, доставка изображений WebP не так проста. Это зависит от вашего веб-сервера, выбора CDN, темы, плагинов кеша и т. д..

Это руководство поможет вам доставить изображения в виде WebP в WordPress тремя способами.

Что такое WebP?

Что такое WebP?

Новый формат изображения для Интернетаот

Google

WebP – это формат изображений (как png и jpg), разработанный Google. Изображения в формате WebP (.webp), как правило, намного меньше, что делает сайты быстрее и использует меньшую пропускную способность.

В зависимости от изображения, вы можете получить уменьшение от 25% до 70%.
WebP конвертировать

JPEG, PNG, GIF и т. Д. Имеют свои плюсы и минусы. Таблица ниже даст вам представление:

 JPGGIFPNGSVG
Вектор
растр
прозрачность
Анимация
с потерями

WebP поставляется практически со всеми функциями, упомянутыми выше! Тогда почему мы не можем использовать WebP везде?

Почему бы не использовать WebP везде?

Почему бы не использовать WebP везде?

веб-поддержка
Поддержка браузера WebP

Как видите, только 80% устройств поддерживают только WebP. Safari / iOS Safari и не только устаревшие браузеры тоже не поддерживает WebP.

Почему обслуживание WebP сложно?

Почему обслуживание WebP сложно?

Как вы заметили, мы должны доставлять изображения в соответствии с браузером. Если браузер не поддерживает WebP, мы должны предоставить ему исходное изображение (jpg / png / gif).

Есть в основном два способа обслуживания WebP:

Использование тега изображения

Использование тега изображения

Мы можем использовать pictureтег, чтобы сообщить браузеру, что у нас есть формат WebP. Если браузер поддерживает его, оно будет извлечено. В противном случае будет отображено нормальное / резервное изображение.

<picture> <source srcset="img.webp" type="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 дружественныйOnly (всего несколько)
Нужно настроить сервер✅ (Nginx)
Работает с ленивой загрузкой

Как обслуживать изображения в WebP в WordPress?

Как обслуживать изображения в WebP в WordPress?

Метод № 1 – Используйте CDN только с конверсией fly WebP

Метод № 1 – Используйте CDN только с конверсией fly WebP

Это, наверное, самое простое решение. В настоящее время некоторые поставщики CDN поддерживают преобразование изображений в WebP на лету, а также оптимизацию изображений.

Вот несколько:

Вы также можете сэкономить место на диске, используя этот метод, поскольку вам не нужно хранить как обычные, так и преобразованные изображения WebP.

BunnyCDN

BunnyCDN

BunnyCDN поставляется с Bunny Optimizer, который может сжимать изображения и конвертировать в WebP на лету.
Bunnycdn оптимизация

Также Читать

Также Читать

милая плюшевая игрушка мультфильм костюм 4142 1

Метод № 2 – Использование различных ответов + CDN

Метод № 2 – Использование различных ответов + CDN

Как описано выше, «различный ответ» будет иметь один URL-адрес изображения, который может обслуживать как изображения WebP, так и изображения, не относящиеся к webp, в зависимости от запрошенного браузера.

Нам также нужно выбрать правильный CDN, который поддерживает заголовки запросов WebP в качестве ключа кэша. В противном случае как только изображение WebP будет кэшировано на сервере, оно будет доставлено в браузеры, которые не поддерживают WebP.

Настройка разнообразного ответа в WordPress

Настройка разнообразного ответа в WordPress

Самый простой способ настроить различные ответы для WebP в WordPress – через плагин WebP Express. Просто установите плагин и нажмите «Сохранить настройки и применить новые правила .htaccess».
Настройки WebP Express
WebP Express настроит конвертер WebP и перепишет правила так, чтобы при получении запроса он преобразовывал изображения в WebP на лету, и если браузер не поддерживает WebP, изображение по умолчанию будет доставлено.

Если вы используете Nginx

Если вы в 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, которые поддерживают «Разнообразный ответ»

Если ваш провайдер CDN не поддерживает WebP в качестве ключа кэша, файлы WebP будут доставляться в браузеры, не поддерживаемые webp. Точно так же есть вероятность, что изображения, не относящиеся к webp, будут доставляться в поддерживаемые браузеры.

BunnyCDN , KeyCDN , Google CDN и многие другие поставщики CDN поддерживают WebP в качестве ключа кэша. Убедитесь, что вы включили их в настройках.

В [зайчике CDN](https://wpspeedmatters.com/get/bunnycdn/  :
ключ кеша bunnycdn webp
В KeyCDN :
ключ кеша webcdn webp

Используете бесплатный план Cloudflare?

Используете бесплатный план Cloudflare?

К сожалению, бесплатный план Cloudflare не поддерживает WebP в качестве ключа кэша. Либо используйте CDN, например [BunnCDN,]https://wpspeedmatters.com/get/bunnycdn/  либо приобретите профессиональный план.

Настройка различных ответов + CDN в популярных хостинг-провайдерах

Настройка различных ответов + 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 – Использование тега изображения

Метод № 3 – Использование тега изображения

Если оба вышеуказанных метода не работают для вас, вы можете использовать тег изображения. Он не требует никакой настройки сервера (редактирование nginx.conf) и поддерживает всех провайдеров CDN.

Использование этого метода изменит HTML для доставки WebP. Он не будет работать с фоновыми изображениями, не совместим с некоторыми темами, плагинами кэша, плагинами отложенной загрузки и т. д.

Если вы используете этот метод, все теги 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 в WordPress

Самый простой способ настроить тег изображения — через WebP Express.

Установите режим работы «CDN friendly» и включите «Alter HTML»
webp express picture tag

Вывод

Вывод

Желаю, чтобы был день, когда все браузеры поддерживали WebP!

Если вы можете тратить несколько долларов в месяц, то самый простой и эффективный способ — использовать CDN, такой, как [BunnyCDN,](https://wpspeedmatters.com/get/bunnycdn/ “BunnyCDN”) который будет конвертировать изображения в WebP на лету. В противном случае придерживайтесь метода № 2, который я упоминал выше.

Комментарий ниже, если у вас есть какие-либо вопросы или отзывы. Я читаю и отвечаю на каждого из них в течение 8 часов!

Источник записи: https://wpspeedmatters.com/serve-webp-in-wordpress/

Связанные записи
Contact Form 7WEBWEB - PHPWordPressВсе для functions.phpПлагины

Как заставить Wordpress отправлять почту из Amazon EC2 с помощью SES

WordPressWP-RECALLВсе для functions.phpВсе для разработки плагиновВсе для разработки шаблоновПлагины

Как добавить в пункт (любого) меню ссылку для входа и выхода в Wordpress

Chrome AppsGoogleGoogle ChromeWEBWordPressПолезные сайты

Как улучшить английский язык при написании в WordPress или автоматическая проверка грамматики в браузере.

LinuxWEBWEB - PHPWordPressВсе для разработки плагиновВсе для разработки шаблонов

Определите минимальную версию PHP для вашего кода?