AVIF — это формат хранения картинок, построенный на кодеке AV1: тот же алгоритм, что сжимает видео, применяется к одному кадру. Что это значит на практике — файл весит меньше при сопоставимой детализации, потому что AV1 использует более плотное внутрикадровое сжатие, чем JPEG или WebP.
Вес изображений напрямую бьёт по метрике LCP из Core Web Vitals: чем тяжелее главная картинка, тем позже она отрисовывается. Формат нового поколения поддерживает 10- и 12-битный цвет, HDR, альфа-канал и анимацию. Проверить, отдаёт ли сервер такие файлы, можно в панели Network браузера по расширению .avif.
§ 01Чем AV1 Image Format отличается от WebP и JPEG
JPEG не умеет прозрачность и ограничен 8 битами на канал. WebP добавил альфа-канал и лучшее сжатие, но проигрывает по плотности данных. Картинки AVIF сжимают сильнее обоих при том же визуальном качестве и держат прозрачность, HDR и анимацию в одном контейнере. Обратная сторона — кодирование идёт медленнее: собрать .avif из исходника дольше, чем WebP. Поэтому формат чаще генерируют заранее, а не на лету.
§ 02Как устроена поддержка в браузерах
Изображения avif читают актуальные версии Chrome, Firefox, Edge, Safari и мобильные браузеры на их движках. Старые версии формат не понимают, поэтому его отдают через <picture> с запасным вариантом:
<source srcset='pic.avif' type='image/avif'>— основной файл;<source srcset='pic.webp' type='image/webp'>— промежуточный;<img src='pic.jpg'>— фолбэк для остальных.
Браузер берёт первый поддерживаемый формат сверху вниз.
LCP 4.2 → 2.1 c — Интернет-магазин мебели на Magento 2 перевёл hero-баннеры и карточки товаров из JPEG 820kb в AVIF 130kb с fallback на WebP. LCP упал с 4.2 до 2.1 с за 6 недель, конверсия выросла на 14%. Замер через PSI и CrUX-75th.
вес страниц −38% — Новостной портал на WordPress с 2.3M визитов в месяц включил AVIF для иллюстраций к статьям через плагин и CDN. Средний вес страницы упал на 38%, INP улучшился, отказы снизились на 9% за 3 месяца. Динамика по GA4 и CrUX.
§ 03Как перевести сайт на этот формат
Готовые файлы собирают через cavif, squoosh, ImageMagick или сборщик проекта. В CMS задачу закрывают плагины оптимизации изображений, которые генерируют .avif рядом с оригиналом и подставляют его через <picture>. Сервер должен отдавать корректный MIME-тип image/avif — иначе браузер не распознает файл. CDN уровня Cloudflare умеет конвертировать картинки на своей стороне без правки исходников.
§ 04Где проверить результат
Влияние на скорость смотрят в PageSpeed Insights: раздел с рекомендациями по изображениям укажет, какие файлы стоит пережать, а блок с полевыми данными CrUX покажет реальный LCP у пользователей. В панели Network браузера видно фактический размер отданного файла и его тип. Для аудита всего сайта Screaming Frog собирает список изображений с весом каждого. Сравнивать нужно вес до и после и значение LCP на страницах с тяжёлой графикой.