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

Однако доставить изображения через WebP не так-то просто. Это зависит от веб-сервера вашего сервера, выбранного cdn, темы, плагинов кеширования и т. Д.

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

Что такое WebP?

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

от Google

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

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

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

	JPG	Гифка	PNG	SVG
Вектор	❌	❌	❌	✅
Растр	✅	✅	✅	❌
Прозрачность	❌	✅	✅	✅
Анимация	❌	✅	✅	✅
Потерянный	✅	❌	❌	❌

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

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

поддержка webp — Поддержка браузера WebP

Как видите, только 80% устройств поддерживают только WebP. Не только устаревшие браузеры, Safari / iOS Safari все еще не поддерживает 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 дружественный	✅	✅ (всего несколько)
Необходимо настроить сервер	❌	✅ (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.

Использование этого метода изменит 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 Express .

Установите режим работы “CDN friendly” и включите “Alter HTML”.

Вывод

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

Если вы можете потратить несколько долларов в месяц, то самый простой и эффективный способ – использовать CDN, например BunnyCDN, который будет на лету конвертировать изображения в WebP. В противном случае придерживайтесь метода №2, о котором я упоминал выше.