AVIF и WebP: как выбрать формат изображения для скорости

AVIF — формат изображений с открытым кодом на основе видеокодека AV1; он даёт заметно меньший файл при том же визуальном качестве, что и JPEG. WebP, разработанный Google, поддерживает и сжатие с потерями, и без потерь, а также прозрачность; его поддержка браузерами шире, чем у AVIF.

Оба формата созданы, чтобы заменить старые JPEG и PNG, но не взаимозаменяемы. AVIF сжимает сильнее, но кодируется дольше; WebP кодируется быстрее и работает в большем числе браузеров. Большинство сайтов отдают оба формата, в порядке приоритета.

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

• фото и предметная съёмка товара: сначала AVIF, WebP как запасной вариант
• прозрачные логотипы и иконки: WebP, поскольку он поддерживает прозрачность и с потерями, и без
• простые рисунки и графика с плоским цветом: SVG, растровый формат вообще не нужен
• короткая анимация: анимированный WebP вместо GIF

Самый простой способ, тег picture; браузеру по очереди предлагаются AVIF, затем WebP, затем JPEG, и он выбирает первый, который умеет читать. Настройка может выполняться на одном из трёх уровней.

• на сайте с Next.js встроенный компонент Image сам генерирует нужный формат под каждый запрос, без дополнительной настройки
• на WordPress или статичном сайте инструменты вроде sharp или squoosh-cli создают копии в AVIF и WebP во время сборки
• на уровне CDN сервис изображений сам выбирает формат с опцией вроде format=auto, в зависимости от того, что поддерживает запрашивающий браузер
• во всех трёх вариантах исходный JPEG или PNG остаётся запасным, поэтому ни один браузер никогда не остаётся без изображения

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

Руководство MDN по форматам изображений именно поэтому рекомендует запасной вариант рядом с каждым новым форматом; тег picture или согласование контента на стороне сервера делает этот запасной вариант автоматическим, без ручной повторной загрузки каждого изображения.

Передача конвертации CDN, а не процессу сборки, имеет то преимущество, что исходное изображение остаётся нетронутым, а отдаваемый формат сам подстраивается под браузер. Сервисы оптимизации изображений Cloudflare делают это с опцией вроде format=auto; браузер, поддерживающий AVIF, получает AVIF, а тот, что не поддерживает, получает вместо него WebP.

Стоит следить за тем, какой сервис реально используется; в 2026 году Cloudflare отключил старый сервис Polish для новых зон, направляя новые настройки в Image Resizing и Cloudflare Images. Именно сервис за сайтом напрямую решает, предлагается ли AVIF вообще.

Настройка конвертации один раз не закрывает тему; три ошибки продолжают встречаться регулярно.

• публиковать AVIF без запасного варианта, полностью теряя изображение на старых клиентах
• оставлять сжатие на самом агрессивном уровне, не проверяя качество на глаз
• загружать исходное изображение намного крупнее его реального размера показа, что раздувает файл вне зависимости от формата
• конвертировать формат, но не задавать ширину и высоту в HTML, из-за чего при загрузке страницы сдвигается макет