AVIF kontra WebP — mniejszy plik nie zawsze jest tym właściwym

Spędziłem kiedyś żenujący wieczór na porównywaniu tego samego obrazu nagłówkowego jako WebP i AVIF, przeskakując między dwiema kartami przeglądarki i próbując wychwycić różnicę, którą oko naprawdę by dostrzegło. AVIF był mniejszy o 31%. Nie odróżniłem jednego od drugiego. Siedziałem z poczuciem, że znalazłem darmowe pieniądze — a potem puściłem partię na folderze 200 obrazów i przypomniał mi się haczyk.

AVIF jest przez większość czasu mniejszym plikiem. Ta część jest prawdą i warto ją znać. Ale „mniejszy” to tylko jedna kolumna w arkuszu, a decyzja mieszka w pozostałych.

Gdzie AVIF wygrywa

AVIF opiera się na kodeku wideo AV1 i jest projektem naprawdę nowszym i sprytniejszym niż WebP. Na treści fotograficznej ląduje zwykle 15–30% mniejszy niż WebP przy dopasowanej jakości wizualnej. Radzi sobie z gładkimi gradientami — niebo, skóra, miękkie cienie — bez blokowych artefaktów, które starsze kodeki rozmazują po nich szeroko. Obsługuje HDR i szeroką gamę barw, czego WebP nie robi. Zachowuje pełny kanał alfa, tak samo jak WebP.

Kilka przybliżonych liczb z tamtego folderu, wszystkie przy ustawieniu jakości, na którym nie dostrzegłem różnicy:

Spójrz na ten ostatni wiersz jeszcze raz. Na płaskiej, prostej grafice AVIF wychodzi czasem większy. Jego spryt jest nastrojony pod fotograficzną złożoność i nie ma czego przeżuwać w dwukolorowej ilustracji. WebP, a nawet PNG, potrafi tam wygrać.

Gdzie AVIF kosztuje

Wygrana na rozmiarze nie jest za darmo. Dwie realne ceny:

Czas kodowania. AVIF kompresuje się dramatycznie wolniej. Na tym samym obrazie kodowanie AVIF potrafi zająć kilkukrotnie dłużej niż WebP — czasem to różnica między „natychmiast” a „poczekaj parę sekund na plik”. Przy jednym obrazie nagłówkowym nikogo to nie obchodzi. Przy partii 200 czujesz każdą sekundę. WebP koduje się tak szybko, że jest praktycznie darmowy.

Dekodowanie i wsparcie. Każda przeglądarka, z której ludzie realnie korzystają, dekoduje teraz AVIF — Chrome od 2020, Firefox niedługo po nim, Safari od wersji 16 pod koniec 2022. W 2026 pokrywa to zdecydowaną większość realnego ruchu. Ale „obsługiwany” i „uniwersalny” to nie to samo słowo. WebP ma za sobą kilka lat więcej nasycenia i dekoduje się szybciej na słabszych telefonach, gdzie dekodowanie AV1 potrafi kosztować zauważalnie baterii i procesora. Część klientów poczty i starsze osadzone widoki webowe wciąż w ogóle nie tykają AVIF.

Pytanie o te 20%

Prawdziwa decyzja sprowadza się więc do tego: czy dodatkowe ~20% ma znaczenie dla tego obrazu, w tym miejscu?

Dla dużego obrazu nagłówkowego na stronie lądowania — tego jednego ciężkiego zasobu, który pobiera każdy odwiedzający — tak. Zbicie 100 KB z rzeczy blokującej pierwsze wyświetlenie warte jest wolniejszego kodowania, które płacisz tylko raz. To najjaśniejszy przypadek dla AVIF, jaki znam.

Dla siatki miniatur, wpisanych w bloga zrzutów ekranu albo czegokolwiek już poniżej mniej więcej 50 KB jako WebP odpowiedź brzmi zwykle nie. Dwadzieścia procent z małej liczby to jeszcze mniejsza liczba. Wymieniłeś czas kodowania i skrawek zgodności, by zaoszczędzić bajty, na które nikt nie czekał. Tam spokojniejszym domyślnym wyborem jest WebP.

Kiedy nie zawracam sobie głowy AVIF

Jeśli plik idzie gdziekolwiek poza nowoczesną przeglądarkę — newsletter mailowy, stary CMS, system partnera, którego nie kontroluję — nie gram w AVIF. Biorę WebP albo zwykły JPG, gdy chcę zero ryzyka. Najmniejszy plik, który się nie renderuje, jest wart tyle co nic.

I nie koduję w AVIF płaskich grafik, logotypów ani grafiki liniowej. Nie do tego jest ten kodek, a widziałem, jak przegrywa na nich z WebP dość często, by przestać próbować.

Jak faktycznie decyduję

Mój uczciwy sposób pracy: ciężkie rzeczy fotograficzne konwertuję do AVIF, a lekkie, proste i szeroko rozsyłane zostawiam jako WebP. To nie jeden format, by rządzić wszystkimi. To wybór dla każdego obrazu z osobna.

Jeśli chcesz sam wypróbować to porównanie, oba działają tu w Twojej przeglądarce — WebP na AVIF do dalszego ściskania istniejących zasobów WebP, i PNG na AVIF do przejścia wprost z wzorca. Nic nigdzie się nie wysyła; kodowanie dzieje się na Twojej maszynie, dlatego też poczujesz powolność AVIF na własnej skórze. To nie błąd. To kodek wykonujący więcej pracy dla mniejszego pliku, wprost na Twoich oczach.

Puść przez oba swój własny obraz nagłówkowy. Jeśli nie widzisz różnicy, a AVIF jest wyraźnie mniejszy, masz odpowiedź. Tylko nie zakładaj, że dla kolejnych 200 plików odpowiedź będzie ta sama.