PageSpeed Insights выдаёт рекомендацию «Serve images in next-gen formats», а картинки на сайте по-прежнему в JPEG. Конвертировать всё в WebP несложно. Сложность в другом: небольшой процент посетителей со старыми браузерами увидят битые изображения, если просто заменить формат на сервере.

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

💡 Быстрый обзор:

• Поймите, что такое WebP и чем он лучше JPEG
• Разберитесь в двух подходах к отдаче WebP
• Выберите один из трёх методов под ваш стек и бюджет
• Настройте плагин и проверьте результат в Chrome DevTools

Что такое WebP и зачем он нужен

WebP, формат изображений от Google, который сжимает лучше JPEG и PNG при том же визуальном качестве. Картинка размером 100 КБ в WebP весит 55-75 КБ. Никакой магии: просто более эффективный алгоритм сжатия.

Формат не новый. Спецификация опубликована Google в 2010 году. С тех пор WebP прошёл путь от эксперимента до стандарта: сжатие с потерями и без, прозрачность, анимация. По сути он объединяет возможности JPEG, PNG и GIF в одном контейнере.

Быстрое сравнение с традиционными форматами:

Разница в размере ощутимая. Для сайта с полусотней изображений на странице переход на WebP сокращает общий вес в разы. Влияние на Core Web Vitals и позиции в выдаче, прямое.

Почему нельзя просто взять и везде включить WebP

Ответ упирается в совместимость. Сегодня WebP поддерживают больше 96% браузеров: Chrome, Firefox, Safari (с iOS 14), Edge. Но остаётся небольшой процент старых устройств, которые формат не понимают.

Если просто заменить все JPEG на WebP на сервере, эти несколько процентов посетителей увидят битые картинки. Для коммерческого сайта или интернет-магазина такая потеря пользователей неприемлема.

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

Два базовых подхода к отдаче WebP

Прежде чем переходить к методам для WordPress, стоит понять, как браузер и сервер договариваются о формате. Механик всего две.

Подход 1: тег

Браузеру предлагают выбрать между WebP и оригиналом прямо в HTML-разметке:

1
<picture>
2
  <source srcset="img.webp" type="image/webp">
3
  <source srcset="img.jpg" type="image/jpeg">
4
  <img src="img.jpg" alt="Описание изображения">
5
</picture>

Браузер с поддержкой WebP возьмёт первый <source>. Остальные проигнорируют WebP-источник и загрузят JPEG из <img>.

Плюс: работает без настройки сервера и с любым CDN. Минус: не работает с фоновыми изображениями в CSS и меняет HTML-структуру. Некоторые плагины кеша и ленивой загрузки спотыкаются о <picture>.

Подход 2: разнообразный ответ (Varied Response)

В HTML остаётся обычный <img src="img.jpg">, но сервер по одному и тому же URL отдаёт разный контент: браузеру с поддержкой WebP, WebP-файл, остальным, JPEG.

Ключ к механизму, HTTP-заголовок Accept. Браузер отправляет его с каждым запросом, сервер или CDN принимает решение, что отдать.

Плюс: работает везде, включая фоновые изображения в CSS. HTML не меняется. Минус: нужна настройка сервера, и не каждый CDN корректно учитывает Accept в ключе кеша.

Сравним:

Теперь посмотрим, как эти подходы применяются в WordPress.

Метод 1: CDN с конвертацией в WebP на лету

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

Несколько рабочих вариантов:

• BunnyCDN с Bunny Optimizer, сжимает и конвертирует изображения на лету, поддерживает WebP в ключе кеша. От $0.01/ГБ.
• Cloudflare с Polish (тариф Pro, $20/мес), автоматическое сжатие и конвертация в WebP.
• Cloudinary, специализированный сервис для работы с изображениями, WebP из коробки.
• ShortPixel Adaptive Images, плагин WordPress, использующий CDN bunny.net. Конвертирует и отдаёт WebP автоматически. Бесплатный тариф: 500 МБ трафика в месяц.
• WP Compress, гибридный сервис: оптимизация изображений плюс доставка через свой CDN.

Когда выбирать метод 1: если готовы платить за CDN и не хотите возиться с конфигурацией сервера. Подключили, включили оптимизацию, заработало.

Метод 2: Varied Response + CDN

Метод для тех, кто предпочитает решить задачу на уровне сервера без изменения HTML-разметки.

Суть: настраиваете сервер так, чтобы по одному URL он отдавал WebP или JPEG/PNG в зависимости от заголовка Accept. Все URL изображений в коде остаются прежними.

Настройка через WebP Express

Самый простой способ реализовать Varied Response в WordPress, плагин WebP Express. У плагина 400 000+ активных установок, регулярные обновления, активная поддержка автора. Он делает три вещи:

• Конвертирует загруженные изображения в WebP.
• Прописывает правила перенаправления (.htaccess для Apache/LiteSpeed или правила Nginx).
• При запросе картинки проверяет заголовок Accept и отдаёт нужный формат.

После установки достаточно нажать «Сохранить настройки и применить новые правила.htaccess». Плагин сам настроит конвертер и правила.

Для серверов на Nginx

WebP Express генерирует правила для .htaccess (Apache/LiteSpeed/OpenLiteSpeed). Если у вас Nginx, правила нужно прописать в конфигурации вручную:

1
## --- Nginx rules: try WebP first, fallback to converter
2
location ~* ^/?wp-content/.*\.(png|jpe?g)$ {
3
  add_header Vary Accept;
4
  expires 365d;
5
  if ($http_accept !~* "webp") {
6
    break;
7
  }
8
  try_files
9
    /wp-content/webp-express/webp-images/doc-root/$uri.webp
10
    $uri.webp
11
    /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=$request_filename&wp-content=wp-content
12
    ;
13
}
14
 
15
## --- Route missing .webp requests to the realizer
16
location ~* ^/?wp-content/.*\.(png|jpe?g)\.webp$ {
17
    try_files
18
      $uri
19
      /wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content
20
      ;
21
}
22
## --- End WebP Express rules

Что делают правила: добавляют заголовок Vary: Accept (чтобы CDN не кешировал WebP для всех подряд), пытаются отдать готовый .webp, а если его нет, отправляют запрос в конвертер.

Критично: выбор CDN для метода 2

Ошибка, которая ломает весь метод: CDN кеширует WebP и отдаёт его браузерам без поддержки формата. Происходит это, когда CDN не учитывает заголовок Accept в ключе кеша.

Провайдеры, которые корректно работают с Vary: Accept:

Bunny CDN, поддержка Varied Response включается в настройках зоны.

• KeyCDN, также поддерживает WebP как часть ключа кеша. Включается в настройках зоны, раздел Cache.

• Google CDN, учитывает Vary: Accept по умолчанию.

На бесплатном тарифе Cloudflare полноценного учёта Accept в ключе кеша нет. Результат: WebP может уйти туда, где его не поддерживают. Выхода два: перейти на Pro-тариф ($20/мес) либо использовать CDN, который умеет работать с Vary: Accept из коробки (BunnyCDN или KeyCDN).

Связка WebP Express + CDN у популярных хостингов

Схема для всех одна: устанавливаете WebP Express, а затем действуете по обстоятельствам серверного окружения:

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

Когда выбирать метод 2: если принципиально не менять HTML-разметку, есть фоновые изображения в CSS и вы готовы один раз настроить сервер.

Метод 3: через тег

Запасной вариант, когда первые два не подходят. Не требует настройки сервера, работает с любым CDN. Плагин заменяет стандартные теги <img> на конструкцию <picture>, и браузер сам выбирает формат.

Недостатки метода:

• Не работает с фоновыми изображениями.
• Может конфликтовать с темами и плагинами кеша, которые модифицируют вывод <img>.
• Меняет структуру HTML, что иногда ломает плагины ленивой загрузки.

Настройка через WebP Express

Тот же WebP Express умеет работать в режиме <picture>. В настройках выберите режим «CDN friendly» и включите опцию «Alter HTML». Плагин на лету обернёт все <img> в <picture> с WebP-источником.

Когда выбирать метод 3: если нет доступа к конфигурации сервера и CDN не поддерживает Vary: Accept. Например, дешёвый хостинг с жёсткими ограничениями или бесплатный Cloudflare.

Видео: WebP в WordPress за 10 минут

Если предпочитаете посмотреть, а не читать, вот наглядный туториал по настройке WebP через WebP Express:

В ролике показана полная настройка WebP Express от установки до проверки в Chrome DevTools. Заодно затронута конвертация в AVIF, как следующий шаг после WebP.

⁉️🤔 Частые вопросы

WebP, это всегда уменьшение размера?

Не всегда, но в большинстве случаев. Для фотографий и скриншотов экономия составляет 25-50%, данные разработчиков Google. Для изображений с текстом или плоскими цветами WebP может оказаться даже тяжелее PNG-8. Для контентных изображений WebP практически всегда даёт выигрыш. Для иконок и простой графики оптимальнее SVG или оптимизированный PNG. Плагины вроде WebP Express конвертируют всё подряд, результат зависит от исходного формата.

Можно ли использовать WebP без плагинов в WordPress?

Начиная с WordPress 5.8, да. Ядро принимает файлы .webp при загрузке в медиатеку. Но автоматической конвертации старых изображений нет, как и подстановки формата под браузер. Если загружаете только новые картинки в WebP и вас устраивает отсутствие фолбэка для небольшого процента старых браузеров, плагины не обязательны. Для полноценного внедрения на существующем сайте без плагина не обойтись: нужна пакетная конвертация и механизм подмены формата.

Как проверить, что WebP отдаётся корректно?

Откройте сайт в Chrome, нажмите F12, вкладка Network, отфильтруйте по Img. В столбце Type должно быть webp. Альтернативно: в ответе сервера ищите заголовок X-WebP-Express (если используете WebP Express) или content-type: image/webp. Chrome DevTools, самый надёжный способ: фильтруете по изображениям и смотрите столбец Type. Если там webp, всё работает.

Что делать, если CDN кеширует WebP некорректно?

Симптом: часть пользователей видит битые картинки, хотя в настройках всё включено. Лечение: убедитесь, что CDN учитывает заголовки Accept и Vary в ключе кеша. В панелях BunnyCDN и KeyCDN для этого есть явные переключатели. Если в ключе кеша нет Accept, первый запрос от Chrome создаст копию WebP, и все последующие пользователи, включая Safari без WebP, получат именно эту копию. На Cloudflare бесплатного решения нет, либо Pro, либо смена CDN.

WebP или AVIF, что выбрать в 2026 году?

AVIF даёт ещё лучшее сжатие (на 20-30% меньше WebP при том же качестве), но поддержка браузерами пока отстаёт: около 92% против 96% у WebP. В 2026 году WebP остаётся стандартом де-факто для веба. AVIF догоняет, но разрыв в браузерной поддержке ещё критичен для коммерческих проектов. Практичная стратегия: WebP сейчас, AVIF, когда поддержка перевалит за 95%.

Какой метод выбрать под вашу задачу: итоговый расклад

Выбор метода зависит не от того, какой «лучше вообще», а от вашего конкретного стека и готовности тратить время или деньги:

• Готовы платить за CDN и не трогать сервер, метод 1 с BunnyCDN (от $0.01/ГБ) или Cloudflare Pro ($20/мес). Настроили за пять минут и забыли.
• Есть доступ к серверу и хотите решить один раз, метод 2 с WebP Express и CDN, поддерживающим Vary: Accept. Работает с фоновыми изображениями, не трогает HTML.
• Нет доступа к серверу и бюджет ограничен, метод 3 с WebP Express в режиме <picture>. Не идеально, но лучше, чем без WebP вообще.

Протестируйте выбранный способ на стейдже. Проверьте в Chrome DevTools заголовки ответа и столбец Type. Убедитесь, что старые браузеры получают JPEG, а не битые ссылки. И только потом выкатывайте в продакшен.

Попробуйте WebP Express, плагин покрывает оба серверных метода из коробки и бесплатен. Напишите в комментариях, какой подход выбрали и с какими граблями столкнулись.