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, плагін покриває обидва серверні методи з коробки і є безкоштовним. Напишіть у коментарях, який підхід обрали і з якими граблями зіткнулися.