AVIF против WebP — меньший файл не всегда правильный

Однажды я потратил неловкий вечер, гоняя одну и ту же картинку для шапки в виде WebP и AVIF, переключаясь между двумя вкладками браузера и пытаясь поймать разницу, которую глаз хоть как-то различит. AVIF был на 31% меньше. Отличить я их не смог. Сидел с ощущением, будто нашёл деньги на дороге, — а потом прогнал пакетом папку из 200 изображений и вспомнил про загвоздку.

AVIF почти всегда меньший файл. Это правда, и знать это полезно. Но «меньше» — лишь одна колонка в таблице, а решение живёт в остальных колонках.

В чём AVIF выигрывает

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

Примерные цифры из той самой папки, все при настройке качества, где разницы я поймать не мог:

Посмотрите ещё раз на последнюю строку. На плоской, простой графике AVIF иногда выходит больше. Его смекалка заточена под фотографическую сложность, а в двухцветной иллюстрации ему просто нечего разжёвывать. Здесь способны выиграть WebP или даже PNG.

Во что AVIF вам обходится

Выигрыш в размере не бесплатен. Две реальные цены:

Время кодирования. AVIF сжимается разительно медленнее. На той же картинке кодирование в AVIF может занять в несколько раз больше времени, чем в WebP, — порой это разница между «мгновенно» и «подожди пару секунд на файл». На одной картинке для шапки — кого это волнует. На пакете из 200 вы чувствуете каждую секунду. WebP кодируется так быстро, что это по сути бесплатно.

Декодирование и поддержка. Все браузеры, которыми люди реально пользуются, сейчас декодируют AVIF — Chrome с 2020 года, Firefox вскоре после, Safari с 16-й версии в конце 2022-го. В 2026 году это покрывает подавляющую часть живого трафика. Но «поддерживается» и «универсально» — не одно и то же. За WebP на несколько лет больше насыщения, и он декодируется быстрее на слабых телефонах, где декодирование AV1 способно заметно расходовать батарею и процессор. Некоторые почтовые клиенты и старые встроенные webview всё ещё не берут AVIF вовсе.

Вопрос про эти 20%

Так что реальное решение сводится к одному: значимы ли лишние ~20% для этой картинки в этом месте?

Для крупного изображения в шапке лендинга — того единственного тяжёлого файла, что скачивает каждый посетитель, — да. Срезать 100 КБ с того, что тормозит вашу первую отрисовку, стоит более медленного кодирования, за которое вы платите один раз. Это самый ясный довод в пользу AVIF из тех, что я знаю.

Для сетки миниатюр, встроенных скриншотов в блоге или всего, что уже весит менее 50 КБ в WebP, ответ обычно нет. Двадцать процентов от маленького числа — число ещё меньше. Вы обменяли время кодирования и кусочек совместимости на байты, которых никто не ждал. WebP здесь спокойнее в качестве варианта по умолчанию.

Когда я не заморачиваюсь с AVIF

Если файл уходит куда-то за пределы современного браузера — в почтовую рассылку, в старую CMS, в систему партнёра, которую я не контролирую, — я не рискую с AVIF. Беру WebP или обычный JPG, если хочу нулевой риск. Самый маленький файл, который не отображается, не стоит ничего.

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

Как я решаю на самом деле

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

Если хотите попробовать сравнение сами, оба работают прямо в браузере здесь — WebP в AVIF, чтобы дожать имеющиеся WebP-ассеты дальше, и PNG в AVIF, чтобы идти сразу от мастера. Никуда ничего не загружается, кодирование идёт на вашей машине — потому-то вы и ощутите медлительность AVIF на своей шкуре. Это не баг. Это кодек делает больше работы ради меньшего файла, прямо у вас на глазах.

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