AVIF — новый стандарт сжатия изображений

Введение

AVIF — самый молодой и самый эффективный формат сжатия изображений на сегодня. Разработанный в 2019 году альянсом Open Media (в который входят Netflix, Google, Mozilla, Amazon, Microsoft и другие IT-гиганты), он обещает революцию в доставке изображений для веба. На практике AVIF сжимает фотографии на 30–50% лучше, чем JPG, и на 20% лучше, чем WebP при том же визуальном качестве. Если сайт перегружен картинками и каждая секунда загрузки на счету, AVIF — это тот формат, о котором стоит задуматься уже сейчас.

Что такое AVIF? Технически это статичный кадр из видеопотока AV1 — современного кодека, изначально созданного для стримингового видео. Альянс взял видеотехнологию, оформил её как контейнер для изображений и получил формат, превосходящий всё, что было до него. AVIF поддерживает сжатие с потерями и без, прозрачность, HDR (High Dynamic Range), расширенные цветовые пространства и даже анимацию — одним файлом можно заменить JPG, PNG, GIF и WebP.

В этой статье мы подробно разберём AVIF: как он устроен, чем лучше предшественников, какие имеет ограничения и как начать использовать уже сегодня. Если вы заботитесь о скорости сайта и SEO в Яндексе, AVIF — это инструмент, который стоит добавить в свой арсенал.

Как устроен AVIF

AVIF (AV1 Image File Format) основан на видеокодеке AV1, разработанном Alliance for Open Media как бесплатная альтернатива патентованным HEVC/H.265. В отличие от старых форматов, AVIF изначально проектировался с учётом современных требований: поддержка HDR, 10- и 12-битной глубины цвета, широких цветовых пространств (Rec. 2020, Display P3), альфа-канала, анимации.

Технические характеристики

• Глубина цвета: 8, 10, 12 бит на канал (до 68 млрд цветов).
• Цветовые пространства: sRGB, Display P3, Rec. 2020 и другие.
• Прозрачность: 8- и 16-битный альфа-канал.
• Анимация: поддерживается, с эффективным межкадровым сжатием.
• Максимальное разрешение: до 8K и выше.
• HDR: поддержка метаданных HDR10, HDR10+, HLG.

За счёт этих характеристик AVIF подходит не только для веба, но и для профессиональной фотографии, HDR-контента и даже киноиндустрии. Это первый универсальный формат, который одновременно хорош и для маленьких веб-иконок, и для огромных HDR-снимков.

Преимущества AVIF

1. Непревзойдённая степень сжатия

Главное преимущество AVIF — экономия трафика. При одинаковом визуальном качестве AVIF файлы в среднем на 50% меньше JPG и на 20% меньше WebP. Для конкретной фотографии 1920×1080:

• JPG (качество 85) — 380 КБ;
• WebP (качество 85) — 270 КБ;
• AVIF (качество 60) — 180 КБ.

Для сайта с большим количеством изображений экономия может достигать нескольких мегабайт на странице. Это критично для мобильных пользователей и для позиций в поиске, где скорость загрузки — один из факторов ранжирования.

2. Поддержка HDR и расширенных цветовых пространств

AVIF — первый массовый формат, который нативно поддерживает HDR. Это значит, что фотографии с расширенным динамическим диапазоном можно показывать в полной красе на совместимых дисплеях: с правильной яркостью, контрастом и цветами. JPG и PNG такого не умеют — они ограничены 8-битным sRGB.

3. Полная прозрачность

AVIF поддерживает 8- и 16-битный альфа-канал, что позволяет хранить изображения с полупрозрачностью в lossy-режиме. Это даёт ту же гибкость, что и PNG-32, но в 5–10 раз меньшим размером файла. Идеально для вырезанных фотографий товаров, декоративных элементов и сложных коллажей.

4. Бесплатность и открытость

AVIF — открытый формат без патентных ограничений. Любой разработчик может использовать его в своих проектах без отчислений. Это важное преимущество перед HEIC/HEIF, который обложен патентами и требует лицензионных платежей.

Недостатки AVIF

1. Медленное кодирование

Главный недостаток AVIF — высокая вычислительная сложность кодирования. Сжатие одной фотографии может занимать в 5–10 раз больше времени, чем JPG. Для массовой конвертации на сервере это требует мощного железа и продуманного кэширования. На клиенте (в браузере) конвертация в AVIF обычно не делается — слишком медленно.

2. Неидеальная поддержка в старом ПО

AVIF поддерживается во всех современных браузерах (Chrome 85+, Firefox 86+, Safari 16+, Edge 92+), но не работает в Internet Explorer и старых версиях других браузеров. Также AVIF не открывается «из коробки» в старых версиях Photoshop, Windows Photo Viewer и других программах. Для массовой аудитории это обычно не проблема, но в закрытых корпоративных средах нужно учитывать.

3. Сложность работы с метаданными

Поддержка EXIF, IPTC и XMP в AVIF реализована, но не все инструменты корректно её обрабатывают. При конвертации из JPG метаданные могут потеряться. Если метаданные критичны (фотостоки, юр.документы), проверяйте их наличие после конвертации.

4. Ограничения для анимации

AVIF поддерживает анимацию, но кодирование анимированных AVIF ещё более ресурсоёмкое, чем статичных. Для коротких цикличных анимаций WebP или даже короткое видео (MP4) часто оказываются практичнее.

AVIF vs WebP vs JPG: сравнение

Поддержка браузерами

На момент 2024 года AVIF поддерживается в Chrome (с версии 85, август 2020), Firefox (с версии 86, февраль 2021), Opera (с версии 71), Edge (с версии 92) и Safari (с версии 16, осень 2022). Не поддерживается в Internet Explorer и старых версиях Safari (до 16). Суммарная доля браузеров с поддержкой AVIF превышает 93% — это означает, что для большинства сайтов можно переходить на AVIF, обеспечив фолбэк для оставшихся 7%.

Чтобы проверить поддержку AVIF в браузере пользователя, можно использовать тег <picture> с несколькими источниками, JavaScript-проверку или CSS-директиву @supports. Самый надёжный способ — тег <picture>:

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="Описание" />
</picture>

Браузер сам выберет первый поддерживаемый формат. Это решение работает без JavaScript и обратно совместимо со всеми браузерами.

Как начать использовать AVIF

Способ 1: тег picture с фолбэком

Самый простой способ подключить AVIF — использовать тег <picture> с источниками AVIF, WebP и JPG. Браузер выберет лучший поддерживаемый формат. Этот подход не требует JavaScript и работает во всех браузерах.

Способ 2: CDN с автоматической конвертацией

Cloudflare, Cloudinary, imgix и другие CDN умеют автоматически конвертировать изображения в AVIF для совместимых браузеров. Это самое простое решение: вы загружаете один оригинал, а CDN сам отдаёт оптимальный формат. Минус — платно при больших объёмах.

Способ 3: серверная конвертация

Для собственных серверов есть библиотеки libavif, libvips, ImageMagick (с поддержкой AVIF). Они позволяют конвертировать изображения на лету или в фоне. Требует настройки, но бесплатно и контролируется полностью.

Способ 4: ручная конвертация

Для разовой конвертации отдельных файлов используйте PNG в AVIF или AVIF в PNG. Эти инструменты работают прямо в браузере, не требуют установки и сохраняют максимальное качество.

AVIF и SEO

Переход на AVIF напрямую влияет на SEO через улучшение Core Web Vitals. Меньший размер файлов = быстрее загрузка = лучший LCP (Largest Contentful Paint). Яндекс и Google официально подтверждают, что скорость загрузки — фактор ранжирования, поэтому каждые сэкономленные 100 КБ изображений могут поднять позиции в выдаче.

Кроме того, ускорение страницы улучшает поведенческие факторы. Пользователи реже уходят с быстрых сайтов, дольше изучают контент, чаще возвращаются. Яндекс учитывает поведенческие факторы очень внимательно, поэтому улучшение скорости может дать значимый эффект в выдаче даже без изменения контента.

Типичные ошибки при работе с AVIF

• Слишком высокое качество. AVIF на качестве 60 визуально идентичен JPG 85. Не устанавливайте качество выше 70 — это убивает главное преимущество формата.
• Игнорирование фолбэка. 7% пользователей без поддержки AVIF увидят пустые места, если не настроить <picture> с WebP и JPG.
• Конвертация на лету без кэша. Серверное кодирование AVIF — медленное. Если конвертировать при каждом запросе, сервер ляжет. Кэшируйте результаты.
• Использование AVIF для tiny-иконок. Для иконок 16×16 SVG или PNG обычно эффективнее. AVIF раскрывается на крупных изображениях.
• Потеря метаданных при конвертации. Проверяйте, что EXIF и IPTC переносятся корректно, если они вам нужны.

Перспективы AVIF

AVIF активно развивается: появляются более быстрые кодировщики, расширяется поддержка в ПО, выходят новые инструменты. JPEG XL — потенциальный конкурент с ещё большей эффективностью, но его будущее в браузерах под вопросом (Google отказался от поддержки в Chrome). Таким образом, в ближайшие 2–3 года AVIF остаётся наиболее перспективным форматом для веб-изображений.

Если вы начинаете новый проект сегодня — стоит сразу закладывать поддержку AVIF. Если у вас уже работающий сайт — добавляйте AVIF постепенно, начиная с самых «тяжёлых» страниц. Это инвестиция, которая окупится через ускорение загрузки и улучшение SEO.

Заключение

AVIF — действительно новый стандарт сжатия изображений, превосходящий JPG и WebP по эффективности на 30–50%. Он поддерживает HDR, высокую глубину цвета, прозрачность и анимацию, оставаясь при этом открытым и бесплатным форматом. Для современных веб-проектов AVIF — лучший выбор по соотношению размера и качества.

Недостатки AVIF — медленное кодирование и неуниверсальная поддержка в ПО — на практике компенсируются правильным пайплайном и тегом <picture> с фолбэками. Поддержка в браузерах уже превысила 93%, что делает AVIF пригодным для большинства сайтов.

Если вы серьёзно относитесь к скорости загрузки и SEO, стоит добавить AVIF в свой стек. Начните с конвертации самых тяжёлых изображений через PNG в AVIF или AVIF в PNG для обратной операции. Регулярно измеряйте результат через Lighthouse и PageSpeed Insights — и вы увидите, как AVIF помогает вашему сайту загружаться быстрее и занимать более высокие позиции в Яндексе.