WebP или AVIF в 2026: поддержка, размер файла и fallback

WebP или AVIF в 2026 году: если изображения можно закодировать заранее, отдавайте AVIF первым, а WebP или JPEG оставьте запасным вариантом; если нужно быстрое кодирование или один простой формат, берите только WebP. По состоянию на октябрь 2026 года оба формата входят в Baseline widely available, так что поддержка браузерами уже ничего не решает. Размер изображения WebP ограничен 16383 × 16383 px (WebP FAQ), и это важно только для очень больших панорам. В тестах на web.dev AVIF давал файлы меньше при том же визуальном качестве и поддерживает HDR; WebP кодируется заметно быстрее (web.dev, обновление 2023 года). Разница в байтах зависит от картинки, поэтому перед выбором измерьте её на своих фотографиях.

WebP и AVIF: сравнение коротко

Форматы различаются скорее ценой и возможностями, чем поддержкой. Поддержка указана по web-features 3.44.0 (22 октября 2026); остальные строки — из документации Google по WebP и web.dev:

AVIF получил статус Baseline newly available 25 января 2024 года, когда его добавил Edge 121, и widely available через 30 месяцев, 25 июля 2026 года. Если в вашей аналитике всё ещё заметна доля браузеров старше Safari 16 или Edge 121, оставьте запасной формат.

Размер файла: что меньше

В сравнениях на web.dev AVIF получался меньше, но разброс настолько велик, что любой одиночный процент вводит в заблуждение. По собственным данным Google, WebP на 25–34% меньше JPEG. В статье об AVIF на web.dev говорится об экономии более 50% относительно JPEG («greater than 50% savings vs. JPEG»), но там же предупреждают, что точная экономия зависит от содержимого, настроек кодирования и целевого качества, а обновление web.dev 2023 года приводит слова Imgix: экономия 60% относительно JPEG и 35% относительно WebP. Эти цифры получены на разных наборах изображений, так что мерьте на своих.

Результат зависит от содержимого, поэтому проверьте хотя бы три вида изображений со своего сайта: крупное фото, скриншот или график с текстом и маленькую миниатюру. Закодируйте каждый исходник с несколькими уровнями качества и сравните размер файла при приемлемом для вас качестве, используя cwebp и avifenc из libavif:

# WebP, качество 75
cwebp -q 75 hero.jpg -o hero.webp

# AVIF, качество 60 как стартовое значение для подбора, 8 потоков
avifenc -q 60 --jobs 8 hero.jpg hero.avif

ls -l hero.*

Squoosh делает то же самое в браузере со слайдером для сравнения бок о бок, так что для нескольких картинок это быстрее.

Скорость кодирования и инструменты

WebP кодируется быстрее, и это важно, когда изображения создаются по запросу. В обновлении web.dev 2023 года сказано, что для кодирования на лету AVIF медленнее остальных распространённых кодировщиков, зато при заранее выполненном кодировании с обычными настройками конкурентоспособен. У avifenc есть параметр --speed от 0 (самый медленный) до 10 (самый быстрый), по умолчанию 6; чем выше скорость, тем хуже эффективность сжатия. По данным web.dev, кодирование на 8 потоках примерно в 5 раз быстрее, но методика теста не описана.

На практике:

• Конвейеры на этапе сборки (статические сайты, next/image с кэшированием, CDN для изображений с кэшем) с AVIF справляются хорошо, потому что каждое изображение кодируется один раз.
• Изменение размера на лету без кэша — то место, где скорость WebP окупается.
• Загрузки в CMS: перед сменой конвейера проверьте, принимает ли ваша CMS AVIF. WordPress принимает загрузку AVIF с версии 6.5 (2024), но только если библиотека Imagick или GD на сервере поддерживает AVIF; это видно в разделе Tools > Site Health > Info > Media Handling (блог ядра WordPress).

Отдаём оба формата через picture с запасным вариантом

Используйте элемент <picture>: каждый браузер берёт первый поддерживаемый формат сверху вниз, а если ни один не подошёл, откатывается к <img>:

<picture>
  <source type="image/avif" srcset="hero-800.avif 800w, hero-1600.avif 1600w" sizes="100vw">
  <source type="image/webp" srcset="hero-800.webp 800w, hero-1600.webp 1600w" sizes="100vw">
  <img src="hero-800.jpg"
       srcset="hero-800.jpg 800w, hero-1600.jpg 1600w" sizes="100vw"
       width="1600" height="900" alt="Product on a desk">
</picture>

На телефонах важны три детали:

• width и height на <img> позволяют браузеру зарезервировать место до загрузки файла, а это предотвращает сдвиг раскладки при загрузке изображения.
• srcset вместе с sizes позволяет телефону шириной 390 px с pixel ratio 2 выбрать файл 800w вместо 1600w (390 × 2 = 780 физических пикселей). Телефону с pixel ratio 3 нужно 1170 физических пикселей, и он возьмёт файл 1600w. Подбор размеров изображений под телефоны разобран в статье как сделать сайт удобным на телефоне.
• alt, loading и fetchpriority указывайте на <img>, но не на <source>.

Для фоновых изображений в CSS то же самое делает image-set() с type(); он входит в Baseline widely available с марта 2026 года:

.hero {
  background-image: image-set(
    url("hero.avif") type("image/avif"),
    url("hero.webp") type("image/webp"),
    url("hero.jpg") type("image/jpeg")
  );
}

Согласование содержимого на CDN

Некоторые CDN для изображений выбирают формат по заголовку Accept вместо <picture> (уточните в документации своего CDN). У такого подхода есть подвох на iPhone. Согласно списку значений Accept по умолчанию в MDN (обновлено в октябре 2026), Chrome и Edge 121+ отправляют image/avif,image/webp,..., Firefox тоже отправляет image/avif, а значение Safari начинается с image/webp и AVIF не перечисляет. CDN, который смотрит только на Accept, отдаст Safari WebP, хотя Safari декодирует AVIF с версии 16.4. Если AVIF нужен и на iPhone, используйте <picture> или проверьте, как ваш CDN определяет Safari.

А что с JPEG XL

JPEG XL пока не в Baseline, поэтому нужен запасной формат. По состоянию на октябрь 2026 года он поддерживается в Safari 17+ (только статичные изображения), Chrome 155, Firefox 158 (вышел 13 октября 2026 года, по заметкам к релизу) и Edge 155 (вышел 8 октября 2026 года, по заметкам к релизу). Samsung Internet его не поддерживает, а MDN browser-compat-data 8.1.7 всё ещё помечает Edge как неподдерживающий, поэтому web-features не относит формат к Baseline (MDN browser-compat-data). Его можно добавить третьей строкой <source> выше AVIF для браузеров с поддержкой, ценой ещё одного кодирования на каждое изображение.

Когда JPEG всё ещё подходит

Хорошо сжатый JPEG — разумный выбор, если:

• вы не можете менять разметку или сборку, а CMS или CDN не конвертируют форматы за вас;
• изображение — маленькая миниатюра, где экономия составляет пару килобайт;
• файл предназначен для скачивания, пересылки по почте или редактирования пользователями, где JPEG работает в любом инструменте;
• вы уже отдаёте нужный размер под каждое устройство, и страница проходит аудит изображений.

В Lighthouse 13 (октябрь 2025) прежний аудит «Serve images in modern formats» вошёл в insight Image delivery (Chrome for Developers). Считайте его указателем на самую большую экономию на странице; размеры изображений проверяйте раньше формата. Как запускать и читать этот аудит, описано в руководстве по мобильному аудиту Lighthouse.

Проверка результата на ширине телефона

После смены формата проверьте две вещи: загружаются ли нужные файлы и не сдвинулась ли раскладка. Панель Network в DevTools показывает формат и размер каждого загруженного изображения; отфильтруйте по Img и смотрите колонку Type. Скорость по полевым данным оценивайте способами из руководства по тесту скорости мобильной страницы.

Раскладку смотрите на ширинах телефонов. Mobile View Extension перезагружает вкладку с user agent, размером экрана и pixel ratio телефона, так что вы видите телефонную раскладку и настоящую мобильную версию страницы. Расширение показывает только раскладку: вес изображений и время загрузки оно не измеряет и работает на движке десктопного Chrome, так что выбор формата в Safari нужно проверять в самом Safari.

Частые вопросы

AVIF лучше, чем WebP?

По размеру файла да, судя по опубликованным тестам: в сравнениях web.dev AVIF давал файлы меньше, чем JPEG и WebP, при схожем визуальном качестве, и поддерживает HDR. Проверьте на своих изображениях, потому что разница зависит от содержимого. WebP лучше, когда важна скорость кодирования или ваши инструменты не работают с AVIF.

Все ли браузеры поддерживают AVIF в 2026 году?

Все актуальные основные браузеры. AVIF входит в Baseline widely available с 25 июля 2026 года; поддержка начинается с Chrome 85, Firefox 113, Safari 16.4 (Safari iOS 16.1) и Edge 121.

Нужно ли по-прежнему использовать WebP?

Да, как запасной формат после AVIF или как единственный современный формат, если ваш конвейер кодирует изображения по запросу. WebP поддерживают все основные браузеры, начиная с Safari 14 в 2020 году.

Вредит ли AVIF SEO?

Нет. Google Search включает AVIF в список поддерживаемых форматов изображений наряду с WebP, JPEG, PNG, GIF, BMP и SVG (Google Search Central, обновлено в марте 2026). Формат там не назван фактором ранжирования.