Однак доставити зображення через WebP не так просто. Це від веб-сервера вашого сервера, обраного cdn, теми, плагінів кешування тощо.
Цей посібник допоможе вам доставляти зображення у форматі WebP у WordPress трьома способами.
Що таке WebP?
Новий формат зображень для Інтернету
від Google
WebP – це формат зображень (як і png та jpg), розроблений Google. Зображення у форматі WebP (.webp), як правило, набагато менші, що прискорює роботу веб-сайтів та використовує меншу пропускну здатність.
Залежно від зображення, ви можете зменшити розмір від 25% до 70%.
JPEG, PNG, GIF і т. д. мають свої плюси і мінуси. Таблиця нижче дасть вам уявлення:
| JPG | Гіфка | PNG | SVG | |
| Вектор | ❌ | ❌ | ❌ | ✅ |
| Растр | ✅ | ✅ | ✅ | ❌ |
| Прозорість | ❌ | ✅ | ✅ | ✅ |
| Анімація | ❌ | ✅ | ✅ | ✅ |
| Втрачений | ✅ | ❌ | ❌ | ❌ |
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 converterlocation ~* ^/?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, про який я згадував вище.
