Формат AVIF: что это такое и зачем он нужен

Если WebP — это «JPEG, но лучше», то AVIF — это «WebP, но ещё лучше». Формат появился в 2019 году и с тех пор тихо завоёвывает веб: он сжимает изображения на 30–50% компактнее WebP при том же визуальном качестве, поддерживает HDR и широкий цветовой охват, и при этом абсолютно бесплатен. Звучит как идеал? Почти — есть пара нюансов, о которых тоже расскажем.

В статье разберём: что такое AVIF-файл и откуда взялся этот формат, чем открыть AVIF на Windows и Mac, насколько реально он легче конкурентов, как подключить его на сайте, чем конвертировать — и когда всё же лучше остаться на WebP.

Что такое AVIF и откуда он взялся

AVIF расшифровывается как AV1 Image File Format. Проще говоря, AVIF-файл — это изображение, сжатое по алгоритмам видеокодека AV1. Идея та же, что была у WebP: взять эффективный видеокодек и применить его к статичным картинкам. Если кадр видео — это просто очень быстро меняющиеся изображения, то одна фотография — это видео из одного кадра. Логика железная.

За форматом стоит Alliance for Open Media — консорциум, в который входят Google, Apple, Mozilla, Netflix, Amazon, Microsoft и другие крупные игроки. Они разработали AV1 как открытую альтернативу платным видеокодекам, а AVIF — как его «фотографическое» применение. Первая официальная спецификация вышла в 2019 году.

AV1 — видеокодек нового поколения, разработанный консорциумом Alliance for Open Media. Пришёл на смену H.264 и VP9, обеспечивая значительно лучшее сжатие при том же качестве. Именно на его алгоритмах основан AVIF: формат берёт один кадр AV1-видео и сохраняет его как изображение. Отсюда и выдающееся качество сжатия — кодек изначально затачивался под максимальную эффективность.

Что умеет AVIF

AVIF не просто «меньше весит» — это полнофункциональный формат, который закрывает все основные сценарии работы с изображениями:

• Lossy-сжатие — с потерями, как JPEG, но значительно эффективнее. При агрессивном сжатии AVIF не даёт характерных JPEG-артефактов («квадратиков»), а вместо них появляется лёгкое размытие — визуально намного приятнее.
• Lossless-сжатие — без потерь, как PNG. Для логотипов, скриншотов и иллюстраций с чёткими краями.
• Прозрачность (alpha-канал) — полноценная замена PNG с прозрачностью.
• Анимация — как GIF, но с полноцветными изображениями. Анимированный AVIF значительно легче и GIF, и анимированного WebP.
• HDR и широкий цветовой охват — 10 и 12-битная глубина цвета против 8 бит у JPEG и WebP. Актуально для современных дисплеев с поддержкой HDR.
• Film grain (зернистость) — AVIF умеет хранить киношную зернистость отдельно от самого изображения и добавлять её при отображении. Файл при этом получается значительно меньше, чем если бы зерно «зашивалось» в пиксели.

Чем открыть файл AVIF

Скачали или получили файл с расширением .avif и не знаете, чем его открыть? Хорошая новость: нужная программа у вас, скорее всего, уже есть.

• Браузер — самый простой способ. Chrome, Firefox, Edge и Safari открывают AVIF без каких-либо расширений: просто перетащите файл в окно браузера.
• Windows 11 — стандартное приложение «Фото» открывает AVIF нативно, достаточно двойного клика. На Windows 10 нужно дополнительно установить бесплатное расширение AV1 Video Extension из Microsoft Store.
• macOS — стандартная программа «Просмотр» (Preview) открывает AVIF без каких-либо дополнительных установок, начиная с macOS Ventura.
• Photoshop — для открытия и редактирования AVIF понадобится плагин, подробнее о нём в разделе про конвертацию ниже.

Насколько AVIF компактнее конкурентов

Преимущество в сжатии — главный козырь AVIF. Усреднённые данные по сравнению с другими форматами:

• AVIF против JPEG: файл в среднем на 40–55% меньше при эквивалентном качестве
• AVIF против WebP: файл в среднем на 20–40% меньше
• AVIF против PNG (lossless): сопоставимо, иногда чуть лучше

На практике разница зависит от типа изображения. AVIF особенно хорошо работает с фотографиями, градиентами и изображениями с мягкими переходами. С чёткой графикой, текстом и иконками разница менее значительна.

Реальный пример: одна и та же фотография в качестве JPEG весит 180 КБ, в WebP — 130 КБ, в AVIF — 85 КБ. При этом визуальное качество одинаковое. Перевод изображений сайта с JPEG на AVIF может уменьшить суммарный объём картинок почти вдвое — что напрямую ускоряет загрузку и улучшает позиции в поисковой выдаче.

Поддержка AVIF в браузерах

За несколько лет AVIF прошёл путь от «только в Chrome» до «везде, где это важно»:

• Chrome — с версии 85 (август 2020)
• Firefox — с версии 93 (октябрь 2021)
• Edge — с версии 121 (январь 2024)
• Opera — с версии 71 (2020)
• Safari на iOS — с версии 16.4 (март 2023)
• Safari на macOS — с версии 16.4 (март 2023)

По данным Can I Use сейчас AVIF поддерживают около 95% пользователей. Немного меньше, чем у WebP (97%+), но уже достаточно для применения в продакшне — особенно если использовать <picture> с WebP как fallback.

Если аудитория сайта — современные браузеры, можно использовать <img> напрямую:

<img src="photo.avif" alt="Описание изображения" loading="lazy">

Браузер загрузит AVIF как обычную картинку. Но чтобы охватить максимальную аудиторию, лучше подстраховаться через <picture> .

Это золотой стандарт подключения современных форматов. Браузер пробует источники сверху вниз и берёт первый поддерживаемый:

<picture>
    <source srcset="photo.avif" type="image/avif">
    <source srcset="photo.webp" type="image/webp">
    <img src="photo.jpg" alt="Описание изображения" loading="lazy">
</picture>

Поддерживает AVIF — отлично, загружает AVIF. Нет AVIF, но есть WebP — берёт WebP. Совсем старый браузер — получает JPEG. Все довольны, никто не обделён. Тег <img> внутри <picture> обязателен — без него конструкция не работает.

Для изображений с прозрачным фоном — та же схема, только fallback будет PNG:

<picture>
    <source srcset="logo.avif" type="image/avif">
    <source srcset="logo.webp" type="image/webp">
    <img src="logo.png" alt="Логотип" loading="lazy">
</picture>

Для фоновых изображений в CSS используйте директиву @supports :

.hero {
    background-image: url('hero.webp');
}

@supports (background-image: url('test.avif')) {
    .hero {
        background-image: url('hero.avif');
    }
}

Если нужно быстро конвертировать несколько файлов без установки ПО:

• Convertio — популярный конвертер с русским интерфейсом. Поддерживает пакетную загрузку, бесплатно до 100 МБ на файл.
• img-webcalypt.ru — простой онлайн-конвертер напрямую в AVIF, без регистрации и лишних настроек.

Photoshop не поддерживает AVIF из коробки, но если вам нужна именно эта программа для работы с AVIF — есть бесплатный плагин avif-format с открытым исходным кодом. Устанавливается как обычный плагин Photoshop: скачайте актуальный релиз с GitHub, распакуйте файл .8bf в папку плагинов Photoshop и перезапустите программу. После этого AVIF появится в списке форматов в File → Save a Copy (Файл → Сохранить копию). Поддерживает lossy, lossless и прозрачность.

Оба формата хороши — но для разных задач. Вот простая шпаргалка:

• Статичный сайт или блог с готовыми изображениями — конвертируйте в AVIF и добавляйте WebP как fallback. Один раз сконвертировали, скорость загрузки улучшилась на годы вперёд.
• Пользовательские загрузки, генерация изображений на лету — лучше WebP. Кодирование AVIF медленное, и при большом потоке загрузок сервер может не справиться.
• Аудитория с преобладанием старых устройств — WebP надёжнее: покрытие браузерами 97% против 95% у AVIF.
• HDR-фотографии и контент для современных дисплеев — только AVIF: WebP ограничен 8-битной глубиной цвета.

На практике оптимальная стратегия — использовать оба формата через <picture> . AVIF получат современные браузеры, WebP — чуть старше, JPEG — всё остальное. При этом кодировать заранее нужно только AVIF и WebP — JPEG у вас уже есть.

Итого: стоит ли переходить на AVIF

AVIF — лучший на сегодня формат для изображений в вебе по соотношению качество/размер. Он поддерживается всеми современными браузерами, даёт реальный выигрыш в скорости загрузки и вписывается в стандартный рабочий процесс через тег <picture> .

• Для новых проектов — AVIF первым, WebP как fallback, JPEG как запас.
• Для существующих проектов — добавьте AVIF поверх WebP без правки разметки: просто добавьте строку <source type="image/avif"> .
• Медленное кодирование — единственный реальный минус; для статичных сайтов он не актуален.
• Если интересна история других форматов — читайте про WebP и JPEG 2000.