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

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

Однако «просто включить WebP» не всегда легко: всё зависит от веб-сервера, CDN, темы, плагинов кэша и настроек оптимизации.

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

Что такое WebP?

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

WebP — формат изображений (как JPG и PNG), разработанный Google.
Обычно WebP-файлы заметно меньше при сопоставимом качестве, поэтому страницы загружаются быстрее и расходуют меньше трафика.

В зависимости от исходного изображения экономия может составлять примерно 25–70%.

У JPEG, PNG, GIF и SVG — разные сильные стороны. Таблица ниже помогает быстро сравнить ключевые возможности:

WebP во многом объединяет преимущества: может быть и с потерями, и без потерь, поддерживает прозрачность и анимацию.
Тогда почему же WebP нельзя использовать везде без оговорок?

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

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

Главная причина — совместимость. WebP поддерживают не все устройства и браузеры, поэтому нужно предусматривать запасной формат (JPG/PNG/GIF).

Почему отдавать WebP сложнее, чем кажется?

Ключевой момент: изображения нужно отдавать в зависимости от возможностей браузера.
Если браузер не поддерживает WebP, ему нужно отдать оригинал (JPG/PNG/GIF).

Есть два основных подхода:

1) Через HTML-тег picture

Можно использовать тег picture, чтобы предложить браузеру WebP и оставить «запасной» формат.
Поддерживающий браузер возьмёт WebP, остальные — JPG/PNG.

<picture>
  <source  src="" data-srcset="img.webp" type="image/webp">
  <source srcset="img.jpg" type="image/jpeg">
  <img src="img.jpg" alt="">
</picture>

2) «Разнообразный ответ» (Vary/negotiation)

В этом варианте в HTML остаётся один и тот же URL, например:

<img src="img.jpg" alt="">

Но сервер может отдать разные форматы по одному адресу: для браузеров с поддержкой WebP — WebP,
для остальных — оригинальный JPG/PNG. Это и называют «разнообразным ответом».

Тег picture против «разнообразного ответа»

У каждого подхода есть плюсы и минусы:

Как отдавать WebP в WordPress?

Метод № 1 — CDN с конвертацией в WebP «на лету»

Это самый простой вариант: некоторые CDN умеют автоматически оптимизировать изображения и отдавать WebP «на лету».
При этом вам не нужно хранить WebP-копии на диске.

Несколько популярных вариантов:

• BunnyCDN (рекомендуется)
• Cloudflare
  (Polish на Pro-плане)
• Cloudinary
• ShortPixel Adaptive Images (использует StackPath CDN)
• WP Compress

BunnyCDN

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

Метод № 2 — «разнообразный ответ» + CDN

Как описано выше, «разнообразный ответ» позволяет одному URL отдавать разные форматы в зависимости от браузера.
Но здесь критично, чтобы CDN корректно учитывал поддержку WebP при кэшировании (например, по заголовку Accept).

Иначе может получиться так: CDN закэширует WebP и начнёт отдавать его всем — включая браузеры без поддержки WebP.

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

Самый простой способ настроить WebP с «разнообразным ответом» — плагин
WebP Express.
Установите плагин и нажмите «Сохранить настройки и применить новые правила .htaccess».

Плагин настроит конвертер и правила так, чтобы при наличии поддержки WebP браузером отдавался WebP, иначе — оригинал.

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

WebP Express добавляет правила в .htaccess, что подходит для Apache/LiteSpeed/OpenLiteSpeed.
Для Nginx нужно прописать правила в конфигурации Nginx (например, в nginx.conf / include-файле сайта):

# WebP Express rules
# --------------------
location ~* ^/?wp-content/.*.(png|jpe?g)$ {
  add_header Vary Accept;
  expires 365d;</p><p>if ($http_accept !~* "webp") {
    break;
  }</p><p>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=$request_filename&wp-content=wp-content
    ;
}</p><p># 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)

Эти правила добавляют заголовок Vary: Accept, управляют кэшированием и пытаются отдать WebP,
а если WebP ещё нет — отправляют запрос в конвертер.

CDN, которые поддерживают «разнообразный ответ»

Если CDN не учитывает поддержку WebP при кэшировании, возможны ошибки: WebP уйдёт туда, где он не поддерживается,
или наоборот — браузер с поддержкой получит оригинал.

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

В BunnyCDN:

В KeyCDN:

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

На бесплатном плане Cloudflare обычно нет полноценной поддержки учёта WebP в ключе кэша.
В таком случае используйте CDN, который это поддерживает (например, BunnyCDN), либо переходите на план с нужными функциями.

«Разнообразный ответ» + CDN у популярных хостинг-провайдеров

Установите WebP Express.
Дальше сценарии обычно такие:

• Kinsta или WP Engine —
  обратитесь в поддержку, чтобы добавили Nginx-конфигурацию (если нужно) и включили корректный ключ кэша WebP в их CDN.
• Cloudways — обычно достаточно установить WebP Express и применить правила
  (у них часто гибрид Apache + Nginx, поэтому многое работает «из коробки»).
• SiteGround — попросите поддержку добавить нужную Nginx-конфигурацию и используйте совместимый CDN.
• LiteSpeed / OpenLiteSpeed / Apache — достаточно WebP Express + правила .htaccess и совместимый CDN.
• Собственный VPS с Nginx (LEMP) — настройте Nginx и используйте CDN, который корректно кэширует по Accept.

Метод № 3 — через тег picture

Если первые два метода вам не подходят, используйте вариант с picture.
Он не требует настройки сервера и совместим с любым CDN, но меняет HTML-разметку и может конфликтовать
с некоторыми темами/плагинами кэша/ленивой загрузки.

В итоге разметка изображений будет выглядеть примерно так:

<picture>
  <source  src="" data-srcset="img.webp" type="image/webp">
  <source srcset="img.jpg" type="image/jpeg">
  <img src="img.jpg" alt="">
</picture>

Поддерживающий браузер получит WebP, остальные — оригинал.

Как настроить picture-подход в WordPress

Проще всего — тем же плагином WebP Express
(в настройках выберите способ доставки через picture).

Вывод

Будет отлично, когда все браузеры без исключения будут поддерживать WebP и новые форматы «из коробки».
Но пока нужно выбирать стратегию, которая подходит под ваш стек.

Если вы готовы тратить несколько долларов в месяц, самый простой и эффективный путь —
CDN с конвертацией в WebP на лету (например, BunnyCDN).
Если нет — используйте «разнообразный ответ» (метод № 2) и убедитесь, что ваш CDN корректно кэширует по заголовкам.