WebP і AVIF — формати зображень з ефективнішим стисненням, ніж у JPEG і PNG: за схожої візуальної якості файл зазвичай важить менше, а виграш залежить від типу картинки — на фотографіях зі складною текстурою різниця помітніша, ніж на простій ілюстрації з плоскими кольорами або на скриншоті з текстом.
Головна відмінність форматів один від одного — у кодеку і сумісності: WebP заснований на кодеку VP8 і підтримується браузерами довше (у Safari — починаючи з версії 14), AVIF заснований на кодеку AV1, стискає фотографії сильніше, але підтримується новіше (у Safari — починаючи з версії 16.4) і кодується помітно довше при максимальній якості.
Як підключити через picture
Найнадійніший спосіб віддати сучасний формат і не втратити відвідувачів зі старим браузером — елемент <picture> із декількома варіантами джерела і звичайним <img> як запасним варіантом.
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="description" width="800" height="600">
</picture>Браузер перевіряє варіанти по порядку і бере перший, який вміє показати, тому AVIF вказують першим, WebP другим, а JPEG або PNG залишають останнім як варіант, зрозумілий абсолютно всім — включно з поштовими клієнтами і частиною ботів соцмереж, які розбирають звичайний <img>, але не вміють читати <picture>.
Як роздавати за заголовком Accept на сервері
Замість розмітки picture можна віддавати потрібний формат на рівні веб-сервера: Nginx перевіряє заголовок запиту Accept і, якщо в ньому є image/webp або image/avif, переписує шлях на файл у потрібному форматі — це зручно для старих тем, де змінювати HTML дорого.
- Зберігати поруч з оригіналом файли «.webp» і «.avif» з тим самим іменем — конвертація повинна відбуватися заздалегідь, а не на льоту при кожному запиті.
- Додавати заголовок
Vary: Acceptдо відповіді — без нього CDN або браузерний кеш може віддати одному відвідувачу формат, призначений для іншого. - Перевіряти заголовок
Accept, а не User-Agent — деякі боти і застосунки надсилають нестандартний User-Agent, але чесно вказують підтримувані формати в Accept. - Віддавати оригінальний JPEG або PNG, якщо файлу у новому форматі не знайшлося на диску, а не відповідати помилкою — конвертація могла ще не завершитися для свіжого завантаження.
- Перевірити після деплою, що картинки відкриваються напряму за прямим посиланням на .webp або .avif — деякі конфігурації віддають потрібний MIME-тип лише через правило переписування і ламаються при прямому запиті файлу.
Правила переписування шляхів додають у той самий конфіг, де налаштоване стиснення відповідей — порядок застосування директив має значення, і детальніше про це розказано у статті про Gzip і Brotli в Nginx.
Чим конвертувати зображення
Для разової конвертації партії файлів зручніші консольні кодувальники, а не графічний редактор — вони швидші на великих каталогах і легко запускаються за розкладом.
| Параметр | WebP (cwebp) | AVIF (avifenc) |
|---|---|---|
| Параметр якості | від 0 до 100, задається прапорцем -q | своя шкала якості, зазвичай задається прапорцями --min і --max |
| Швидкість кодування | швидше | помітно повільніше на максимальній якості |
| Підтримка в Safari | з версії 14 | з версії 16.4 |
| Найкраще стискає | просту графіку і ілюстрації | фотографії зі складною текстурою |
На каталозі з декількох тисяч зображень конвертація в обидва формати займає помітний час процесора — на спільних тарифах хостингу її краще запускати у фоні або частинами, а не одразу для всього каталогу; після конвертації варто звірити підсумкову вагу сторінки з рекомендаціями зі статті про прискорення WordPress.
Окремий випадок — WooCommerce
У картці товару WooCommerce зазвичай декілька зображень — основне фото і мініатюри галереї, а на сторінці каталогу одночасно показуються десятки товарів. Конвертація у WebP або AVIF тут дає більше, ніж на звичайному блозі, просто тому, що на одній сторінці завантажується більше картинок одночасно.
Після зміни теми або масового імпорту товарів частина зображень може залишитися у вихідному форматі, якщо плагін конвертації обробляє лише нові завантаження — варто час від часу запускати масову конвертацію каталогу, а не розраховувати лише на автоматичну обробку нових файлів; окремі налаштування для магазину розібрані у статті про оптимізацію WooCommerce.
Часті питання
Чи потрібно зберігати оригінальний JPEG, якщо сайт вже віддає WebP і AVIF?
Так, оригінал потрібен як запасний варіант для браузерів і ботів без підтримки нових форматів, а також як джерело для повторної конвертації, якщо знадобиться інша якість стиснення — видаляти його відразу після конвертації ризиковано.
Чому AVIF іноді важить більше, ніж WebP для однієї і тієї самої картинки?
При низькій і середній якості AVIF зазвичай компактніший, але на дуже простих зображеннях з великими однотонними ділянками або на маленьких іконках різниця може розвернутися у протилежний бік — кодек AVIF розрахований на фотографії, і на нетиповому матеріалі його перевага не гарантована.
Чи можна обійтися лише WebP і не возитися з AVIF?
Можна, якщо старі Safari і частина корпоративних браузерів для аудиторії сайту не критичні: WebP підтримується ширше і кодується швидше, а різниця у вазі файлу з AVIF на більшості звичайних фотографій сайту помітна, але не кардинальна.