21

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

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

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

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

Что такое WebP?

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

от Google

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

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

webp конвертировать

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 на лету вместе с оптимизацией изображений.

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

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

BunnyCDN

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

оптимизация bunnycdn

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

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

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

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

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

Настройки WebP Express

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 :

bunnycdn ключ кеширования webp

В KeyCDN :

keycdn ключ кеширования webp

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

К сожалению, бесплатный план Cloudflare не поддерживает WebP в качестве ключа кеширования. Либо используйте CDN, например BunnCDN, либо перейдите на их профессиональный план.

Убедитесь, что установлен 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 express

Вывод

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

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

0 оценок, среднее: 0,00 из 50 оценок, среднее: 0,00 из 50 оценок, среднее: 0,00 из 50 оценок, среднее: 0,00 из 50 оценок, среднее: 0,00 из 5 (0 оценок, среднее: 0,00 из 5)
Для того чтобы оценить запись, вы должны быть зарегистрированным пользователем сайта.
Загрузка...
Scroll Up