AVIF для скорости сайта: экономия трафика и Core Web Vitals

Почему картинки тормозят сайт

Откройте инструменты разработчика на любом сайте и посмотрите на вкладку Network. С высокой вероятностью именно изображения окажутся самыми тяжёлыми ресурсами — тяжелее, чем весь HTML, CSS и JavaScript вместе взятые. По данным веб-альманахов, медиа стабильно занимает большую часть веса страниц.

Логика простая: чем больше байт нужно скачать, тем дольше грузится страница — особенно на мобильном интернете. А медленная страница теряет посетителей: люди просто закрывают вкладку, не дождавшись загрузки. Поэтому «облегчить картинки» — это самый эффективный рычаг для ускорения почти любого сайта.

Сколько трафика реально экономит AVIF

При сопоставимом качестве AVIF весит примерно на 50% меньше JPEG и на 20–30% меньше WebP. Переведём это в практику. Допустим, у вас интернет-магазин:

Для одной картинки разница в 250 КБ кажется мелочью. Но умножьте её на десятки изображений и тысячи посещений в день — и вы экономите сотни гигабайт трафика в месяц. Это снижает счета за хостинг/CDN и, что важнее, ускоряет страницу для каждого посетителя.

AVIF и Core Web Vitals (LCP)

Google измеряет реальную скорость сайтов набором метрик Core Web Vitals и учитывает их при ранжировании. Самая «картиночная» из них — LCP (Largest Contentful Paint): время, за которое отрисовывается самый крупный элемент экрана. На большинстве сайтов этот элемент — главное изображение (баннер, обложка статьи, фото товара).

Вывод напрашивается сам: если главную картинку сделать вдвое легче, она загрузится быстрее, и LCP улучшится. А хороший LCP — это:

• Зелёная оценка в PageSpeed Insights и Search Console.
• Бонус к ранжированию — скорость один из факторов Google.
• Меньше отказов — посетители не уходят с медленной страницы.

Как внедрить: тег picture с fallback

Главный страх перед AVIF — «а вдруг у кого-то не откроется?». Решение элегантное: тег <picture>. Вы перечисляете несколько форматов по убыванию «современности», и браузер сам берёт первый, который понимает.

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Описание" width="1200" height="800" loading="lazy">
</picture>

Как это работает: Chrome и Firefox возьмут .avif, Safari постарше — .webp, а совсем старый браузер откатится на .jpg из тега <img>. Картинку увидят все, но современным браузерам достанется самый лёгкий файл. Атрибуты width и height обязательны — они резервируют место и не дают макету «прыгать» (это улучшает метрику CLS).

Частые ошибки при переходе на AVIF

Чтобы внедрение не вышло боком, избегайте типичных промахов:

Кстати, выбор между AVIF и WebP в качестве основного формата — отдельная тема. Если ваша аудитория сидит на старых устройствах, иногда разумнее начать с WebP. Мы разобрали это в статье WebP против AVIF.

Как сделать AVIF-версии изображений

Чтобы отдавать AVIF, нужно сначала его создать из ваших исходников. Для большого сайта удобны инструменты сборки (avifenc, sharp, плагины для CMS). Но для небольших проектов и разовых задач проще всего конвертировать онлайн:

Если исходники в PNG — используйте PNG в AVIF. А чтобы протестировать, как выглядит конкретный AVIF, его всегда можно перевести обратно в JPG.

Кому это особенно важно

AVIF принесёт максимальную пользу там, где много изображений и важна скорость:

• Интернет-магазины — сотни фото товаров, прямая связь скорости с конверсией.
• Медиа и блоги — тяжёлые обложки и иллюстрации в каждой статье.
• Лендинги — крупный hero-баннер, который и есть LCP-элемент.
• Порталы с мобильной аудиторией — где каждый сэкономленный килобайт ускоряет загрузку на слабой сети.