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 справді може відчутно з'їдати батарею й процесор. Деякі поштові клієнти та старіші вбудовані вебперегляди досі взагалі не чіпають 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 файлів.