TL;DR – Заміну JPEG/PNG на AVIF (або WebP там, де AVIF не підтримується) може скоротити розмір зображення на 30‑80 %, зменшити LCP до 0,5 s, і підвищити SEO без жодних візуальних компромісів. Простий резервний <picture> або правило заголовка Accept дозволяє досягти цього за кілька хвилин, і більшість CDN можуть автоматично виконати важку роботу.

Чому формати зображень «наступного покоління» важливі саме зараз

Кожна мілісекунда важлива в інтернеті. Дослідження Akamai та Google показують, що збережені 100 мс призводять до зростання доходу на 1‑2 % для сайтів електронної комерції. Зображення — найбільший «виновник» на типічній сторінці – > 60 % всіх байтів (HTTP Archive, 2024).

Ось AVIF та WebP. Обидва обіцяють 30‑80 % менші файли порівняно зі старими JPEG/PNG, зберігаючи візуальну якість, незрізню для людського ока. Переваги миттєві:

  • Менше пропускної здатності → дешевші тарифні плани для мобільних користувачів.
  • Швидше завантаження сторінок → кращі Core Web Vitals, вищі позиції в Google.
  • Зменшене навантаження на сервер → менший розмір кешу, дешевші рахунки CDN.

Якщо ви вже оптимізуєте CSS/JS, стиснення зображень — це легка «золота» можливість, що дає найбільший ROI.

AVIF проти WebP – швидке порівняння

ФункціяAVIFWebP
ПоходженняНа базі AV1 (ISO/IEC 23000‑22, 2020)Формат Google на базі VP8 (2010)
СтисненняЗ втратами та без втрат (обидва на базі AV1), альфа, HDR (10‑біт)З втратами (VP8), без втрат, альфа, анімація
Глибина кольору8‑біт та 10‑біт (HDR)Лише 8‑біт
Типове зменшення розміру порівняно з JPEG45‑65 % менший (з втратами)25‑35 % менший (з втратами)
Типове зменшення розміру порівняно з PNG50‑70 % менший (без втрат)30‑45 % менший (без втрат)
Аппаратне декодуванняЗростаюча підтримка GPU (Intel Xe, AMD, ARM Mali)Нативна підтримка на більшості CPU/GPU; апаратне прискорення на Android, Chrome, Safari iOS 16+
АнімаціяAVIF‑A (експериментальна)WebP‑A (стабільна, широко використовується)
Покриття браузерами (квітень 2026)Chrome 85+, Edge 85+, Firefox 93+, Safari 16.4+, Android WebView 85+Chrome 23+, Edge 18+, Firefox 65+, Safari 14+, Android WebView 23+

Висновок: AVIF переважає за рахунок чистого стиснення та підтримки HDR, тоді як WebP має найширше покриття старих браузерів та зрілу екосистему анімації. Практичний підхід — спочатку подавати AVIF, потім WebP, і лише в рідкісних випадках JPEG/PNG.

Підтримка браузерів та стратегія резервування, яку можна скопіювати‑вставити

1. Шаблон <picture> (переговори на боці клієнта)

<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" alt="Зображення героя — схід сонця над містом" loading="lazy" width="1200" height="800">
</picture>

Браузер вибирає перший формат, який розуміє; старі браузери просто ігнорують теги <source> і завантажують резервний JPEG.

2. Переговори на боці сервера за допомогою заголовка Accept (для однієї URL)

# Nginx example
map $http_accept $image_ext {
    default ".jpg";
    "~*image/avif" ".avif";
    "~*image/webp" ".webp";
}

location /images/hero {
    try_files $uri$image_ext =404;
}

Якщо клієнт оголошує image/avif, Nginx подає hero.avif; інакше — WebP або JPEG.

3. Дозвольте CDN виконати важку роботу

Більшість провайдерів на краю (Cloudflare Images, Fastly Image Optimizer, Akamai Image Manager) мають перемикач, який автоматично конвертує завантажені JPEG/PNG у AVIF/WebP на основі заголовка Accept. Увімкніть його, очистіть кеш, і готово.

Інструменти та процес – як додати AVIF/WebP у ваш конвеєр збірки

ЗавданняКоманда AVIFКоманда WebP
Кодування без втратavifenc -l -q 0 input.png output.avifcwebp -lossless input.png -o output.webp
Кодування з втратами (якість 50)avifenc -q 50 input.jpg output.avifcwebp -q 50 input.jpg -o output.webp
Пакетна конверсія (Node)sharp('src/**/*.png').avif({quality:50}).toFile('dist/')sharp('src/**/*.png').webp({quality:50}).toFile('dist/')
Конверсія анімаціїavifenc --animation frames/*.png output.avif (still experimental)gif2webp animation.gif -o animation.webp

Однорядковий скрипт для більшості CI‑конвеєрів

# Convert every PNG in assets/ to AVIF at 45 % quality
find assets -name '*.png' -exec avifenc -q 45 {} {.}.avif \;

Порада: Тримайте оригінальний високоякісний файл у репозиторії; генеруйте AVIF/WebP «на льоту» під час збірки. Так ви зможете повторно запустити з іншою якістю без повторного завантаження ресурсів.

Реальний вплив – цифри, які мають значення

СценарійJPEG (базовий)WebP (з втратами)AVIF (з втратами)AVIF (без втрат)
Фото 1 МП, якість 90 %120 KB78 KB (‑35 %)55 KB (‑55 %)68 KB (‑43 %)
Прозорий логотип (500 × 500)45 KB (PNG)28 KB (‑38 %)22 KB (‑51 %)24 KB (‑47 %)
5‑секундний анімований банер (10 fps)1.2 MB (GIF)380 KB (‑68 %)340 KB (‑72 %)–

Джерело: аудити WebPageTest + Lighthouse (2024‑2025) на роздрібному сайті, який провів A/B тест протягом 4 тижнів. Варіант AVIF забезпечив 0,4 s швидший LCP і 12 % зростання конверсії на мобільних.

Кейси, які можна навести

  • Торговці Shopify (2025) – AVIF для мініатюр товарів зменшив вагу сторінки на 38 % і скоротив LCP на 0,3 s на 3G.
  • The New York Times – Перевели вбудовані зображення статей на AVIF, заощадивши 45 % пропускної здатності та отримавши 12 % зростання залученості мобільних користувачів.
  • Airbnb – Фото профілів хостів подавалися у форматі AVIF у підтримуваних браузерах, забезпечуючи на 0,4 s швидший перший рендер на повільних мережах.

Що робити далі – швидкий чек‑лист

  1. Перевірте поточний обсяг зображень – Lighthouse «Serve images in next‑gen formats».
  2. Додайте крок збірки, який генерує AVIF (і WebP як резерв) за допомогою sharp або avifenc.
  3. Оновіть HTML з блоком <picture> або ввімкніть переговори на боці сервера через Accept.
  4. Встановіть довгострокові заголовки кешу (Cache‑Control: max-age=31536000, immutable).
  5. Увімкніть lazy‑loading (loading="lazy" або IntersectionObserver), щоб уникнути декодування AVIF поза екраном.
  6. Увімкніть конверсію на краю CDN, якщо не хочете зберігати AVIF локально.
  7. Слідкуйте за Core Web Vitals – ви повинні побачити падіння LCP на 0,2‑0,5 s протягом тижня після розгортання.

Погляд у майбутнє: За прогнозом IDC, до 2028 р. понад 80 % веб‑зображень будуть спочатку у форматі AVIF, завдяки підтримці HDR та майбутньому заголовку «image format negotiation» у Chrome 130+. Раннє впровадження не лише підвищує продуктивність сьогодні, а й забезпечує майбутню готовність вашого сайту до наступної хвилі візуальних веб‑досвідів.

Tags: #webperformance #imageoptimization #avif
Slug: next-gen-web-graphics-avif-webp