TL;DR – Замена JPEG/PNG на AVIF (или WebP, где AVIF не поддерживается) может сократить размер изображения на 30‑80 %, уменьшить LCP до 0,5 с, и повысить 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 vs. WebP — быстрое сравнение
| Функция | AVIF | WebP |
|---|---|---|
| Происхождение | AV1‑derived (ISO/IEC 23000‑22, 2020) | Google’s VP8‑based format (2010) |
| Сжатие | Lossy & lossless (both AV1‑based), alpha, HDR (10‑bit) | Lossy (VP8), lossless, alpha, animation |
| Битовая глубина | 8‑bit & 10‑bit (HDR) | 8‑bit only |
| Типичное уменьшение размера по сравнению с JPEG | 45‑65 % smaller (lossy) | 25‑35 % smaller (lossy) |
| Типичное уменьшение размера по сравнению с PNG | 50‑70 % smaller (lossless) | 30‑45 % smaller (lossless) |
| Аппаратное декодирование | Growing GPU support (Intel Xe, AMD, ARM Mali) | Native on most CPUs/GPUs; hardware accel on Android, Chrome, Safari iOS 16+ |
| Анимация | AVIF‑A (experimental) | WebP‑A (stable, widely used) |
| Поддержка браузеров (апр. 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="Hero image of a sunrise over the city" 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 command | WebP command |
|---|---|---|
| Кодировать без потерь | avifenc -l -q 0 input.png output.avif | cwebp -lossless input.png -o output.webp |
| Кодировать с потерями (качество 50) | avifenc -q 50 input.jpg output.avif | cwebp -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 MP photo, 90 % quality | 120 KB | 78 KB (‑35 %) | 55 KB (‑55 %) | 68 KB (‑43 %) |
| Transparent logo (500 × 500) | 45 KB (PNG) | 28 KB (‑38 %) | 22 KB (‑51 %) | 24 KB (‑47 %) |
| 5‑s animated banner (10 fps) | 1.2 MB (GIF) | 380 KB (‑68 %) | 340 KB (‑72 %) | – |
Источник: аудиты WebPageTest + Lighthouse (2024‑2025) на розничном сайте, где проводилось A/B‑тестирование в течение 4 недель. Вариант с AVIF обеспечил LCP быстрее на 0,4 с и рост конверсии на мобильных устройствах на 12 %.
Примеры из практики, которые можно цитировать
- Продавцы Shopify (2025) — AVIF для миниатюр товаров уменьшил вес страницы на 38 % и сократил LCP на 0,3 с при 3G.
- The New York Times — Перешли на AVIF для встроенных изображений статей, сэкономив 45 % трафика и получив рост мобильного вовлечения на 12 %.
- Airbnb — Фотографии профилей хостов обслуживались в формате AVIF в поддерживаемых браузерах, обеспечивая первый отрисовку на 0,4 с быстрее в медленных сетях.
Что делать дальше — быстрый чек‑лист
- Проведите аудит текущих изображений — Lighthouse «Serve images in next‑gen formats».
- Добавьте шаг сборки, который генерирует AVIF (и WebP как резерв) с помощью
sharpилиavifenc. - Обновите HTML с блоком
<picture>или включите серверные переговорыAccept. - Установите долгосрочные заголовки кэша (
Cache‑Control: max-age=31536000, immutable). - Включите отложенную загрузку (
loading="lazy"или IntersectionObserver), чтобы избежать декодирования AVIF за пределами экрана. - Включите конвертацию на границе CDN, если не хотите хранить AVIF локально.
- Отслеживайте Core Web Vitals — вы должны увидеть снижение LCP на 0,2‑0,5 с в течение недели после развертывания.
Взгляд в будущее: По прогнозам IDC, к 2028 году более 80 % веб‑изображений будут AVIF‑первыми, благодаря поддержке HDR и предстоящему заголовку «image format negotiation» в Chrome 130+. Раннее внедрение не только улучшит производительность сегодня, но и подготовит ваш сайт к следующей волне визуальных веб‑опытов.
Теги: #webperformance #imageoptimization #avif
Слаг: next-gen-web-graphics-avif-webp