AVIF z grubsza kompresuje obraz 20 procent mniejszy niż WebP w tej samej jakości, podczas gdy WebP koduje kilka razy szybciej i działa w większej liczbie miejsc. Obydwa to formaty nowej generacji wywodzące się z kodeków wideo: WebP z VP8 z 2010 r., AVIF z nowszego AV1 z 2019 r. AVIF to silniejszy kompresor, obsługujący HDR i 12-bitową kolorystykę. WebP jest pragmatycznym rozwiązaniem domyślnym, z szerszą obsługą oprogramowania i szybszym kodowaniem. Porównanie to obejmuje pochodzenie każdego formatu, kompresję, szybkość kodowania, głębię kolorów, obsługę przeglądarek, przezroczystość i animację oraz który format wygrywa w danym zastosowaniu.

Żadne z nich nie wygrywa od razu. AVIF tworzy najmniejsze pliki i najszerszy kolor; WebP jest dziś szybszy w tworzeniu i bezpieczniejszy w obsłudze. Wiele witryn oferuje jedno i drugie, umieszczając na pierwszym miejscu AVIF, na drugim miejscu WebP, a na końcu plik zastępczy JPG lub PNG, dzięki czemu każda przeglądarka otrzymuje najlepszy format, jaki może odczytać.

Skąd pochodzi każdy format

Obydwa formaty to zdjęcia pobrane z kompresji wideo. WebP bierze swoje kodowanie z VP8, kodek wideo Google z 2010 r., ma więc już ponad dekadę i jest szeroko obsługiwany. AVIF bierze swoje kodowanie z AV1, bezpłatny kodek na rok 2019 od Alliance for Open Media, którego członkami są Google, Netflix i Apple. AV1 to generacja wyprzedzająca VP8, dlatego AVIF kompresuje mocniej, ale wymaga także większej mocy obliczeniowej.

Kompresja: wygrywa AVIF

Kompresja faworyzuje AVIF, ponieważ AV1 jest nowszy i mądrzejszy. Na tym samym zdjęciu w dopasowanej jakości AVIF ląduje w okolicy 20 procent mniejszy niż WebPi znacznie mniejszy niż JPG. AVIF radzi sobie również z płaskimi kolorami i gradientami, unikając pasków widocznych w słabszych formatach. W przypadku najmniejszego możliwego pliku zwycięzcą jest AVIF, a różnica rośnie w przypadku obrazów z dużymi gładkimi obszarami.

Oszczędzające związki w witrynie zawierającej dużo obrazów. Jeśli WebP już przyciął obrazy o jedną trzecią poniżej JPG, AVIF przytnie kolejną piątą od góry, więc całkowita redukcja w porównaniu z oryginalnym JPG może sięgać połowy. W przypadku stron mierzonych za pomocą podstawowych wskaźników internetowych jest to znaczący wzrost szybkości.

Szybkość kodowania: wygrywa WebP

Kodowanie polega na tym, że AVIF płaci za kompresję. AV1 jest ciężki obliczeniowo, więc AVIF koduje kilka razy wolniej niż WebP. Ma to znaczenie, gdy witryna przetwarza tysiące obrazów, generuje je na bieżąco lub działa przy ograniczonych zasobach serwera. WebP koduje wystarczająco szybko, aby można go było używać w czasie rzeczywistym, i jest to jeden z powodów, dla których stał się domyślnym. Dekodowanie, czyli to, co robi przeglądarka, aby wyświetlić obraz, jest szybkie w obu przypadkach, więc odwiedzający nie odczuwają spowolnienia w żadnym przypadku.

Głębia kolorów i HDR: AVIF wygrywa

Głębia koloru wyraźnie oddziela te dwa elementy. obsługuje AVIF do 12 bitów na kanał i HDR, dzięki czemu przechowuje obrazy o szerokiej gamie kolorów i wysokim zakresie dynamiki, których nie jest w stanie zapewnić WebP. WebP ogranicza prędkość do 8 bitów na kanał, tak samo jak JPG. W przypadku fotografii, nowoczesnych wyświetlaczy szerokogamutowych i treści HDR AVIF jest jedynym wyborem z tych dwóch. Na standardowym 8-bitowym ekranie różnica jest niewidoczna, ale na odpowiednim sprzęcie AVIF pokazuje kolory, których WebP po prostu nie może zapisać.

Przejrzystość i animacja

Obydwa formaty obejmują przezroczystość i animację, więc żaden tutaj nie wygrywa. Każdy niesie pełny kanał alfa, więc przezroczyste logo pozostaje przezroczyste w obu przypadkach, a oba obsługują animowane klipy znacznie mniejsze niż GIF. Animacja AVIF kompresuje się mocniej dzięki AV1, podczas gdy animacja WebP jest szybsza w tworzeniu. W przypadku prostej animowanej grafiki albo zdecydowanie bije GIF.

Obsługa przeglądarek i oprogramowania: wygrywa WebP

Wsparcie jest zaletą WebP. Każda nowoczesna przeglądarka od lat czyta WebP i obsługuje to głęboka baza oprogramowania, wtyczek i sieci CDN. Obsługa formatu AVIF jest teraz szeroko dostępna w przeglądarkach, w tym Chrome, Firefox i Safari, ale pozostaje w tyle za WebP i edytorami komputerów stacjonarnych, starszymi systemami i niektórymi sieciami CDN. W przypadku pliku, który dzisiaj musi być niezawodnie otwierany w mieszanym oprogramowaniu, bezpieczniejszym rozwiązaniem jest WebP.

Rozmiar pliku w wartościach rzeczywistych

Liczby rzeczywiste sprawiają, że handel jest konkretny. Zdjęcie o rozmiarze 400 KB w formacie JPG może mieć około 280 KB w formacie WebP i około 220 KB w formacie AVIF w tej samej jakości. Przezroczysta grafika o rozmiarze 120 KB w formacie PNG może mieć rozmiar 80 KB w formacie WebP i 60 KB w formacie AVIF. Dokładne liczby zależą od obrazu, ale kolejność jest zachowana: najmniejszy AVIF, średni WebP, największe starsze formaty. Wybierz w zależności od tego, czy dodatkowe 20 procent jest warte wolniejszego kodowania AVIF i węższej obsługi.

Szybkość dekodowania i to, jak ją odczuwają odwiedzający

Odwiedzający doświadcza dekodowania, a nie kodowania, a tutaj te dwa formaty są sobie bliskie. Gdy przeglądarka wyświetla obraz, musi go zdekodować, zarówno w formacie AVIF, jak i WebP dekodować wystarczająco szybko, aby zapewnić płynne ładowanie strony. Ciężkie obliczenia AV1 w AVIF działają po stronie kodowania, wykonywane raz podczas tworzenia obrazu, a nie za każdym razem, gdy się ładuje. Zatem odwiedzający nigdy nie płaci kosztów kodowania AVIF; korzystają jedynie z mniejszego pobrania.

Ten podział ma znaczenie dla sposobu wdrażania każdego formatu. Zakoduj plik AVIF z wyprzedzeniem, na etapie kompilacji lub w sieci CDN, i przechowuj wynik w pamięci podręcznej. Nigdy nie koduj go przy każdym żądaniu, ponieważ spowodowałoby to obciążenie Twojego serwera i brak korzyści dla odwiedzających. WebP jest wystarczająco wybaczający, aby kodować w locie, ale AVIF nagradza pregenerację.

Budowanie rezerwy w HTML

Bezpieczne udostępnianie obu formatów wykorzystuje element obrazu, który pozwala przeglądarce wybrać najlepsze źródło, jakie rozumie. Na pierwszym miejscu umieszczasz AVIF, na drugim WebP, a na końcu JPG lub PNG. Przeglądarka czyta listę i ładuje plik pierwszy format, jaki może zdekodować, ignorując resztę. Nowoczesna przeglądarka korzysta z AVIF, starsza z WebP, a starożytna z JPG. Żaden odwiedzający nie widzi uszkodzonego obrazu i każdy otrzymuje najmniejszy plik, na jaki pozwala jego oprogramowanie.

Większość systemów zarządzania treścią i sieci CDN z obrazami tworzy ten znacznik za Ciebie, więc przesyłasz jeden plik, a system generuje formaty i łańcuch awaryjny. Ręczne wykonanie tej czynności jest w porządku w przypadku małej witryny, ale automatyzacja skaluje się lepiej w przypadku setek obrazów.

AVIF do fotografii i HDR

Przewaga kolorystyczna AVIF ma największe znaczenie w fotografii. Jego Obsługa 12-bitowego koloru i HDR utrzymać szeroki zakres tonalny nowoczesnego aparatu i żywe obrazy na wyświetlaczu HDR, których żaden z WebP nie jest w stanie zapisać. Krajobraz z jasnym niebem i głębokimi cieniami zachowuje więcej szczegółów w obu przypadkach w formacie AVIF. Na ekranie o szerokiej gamie barw nasycone czerwienie i zielenie przycinane przez WebP pozostają prawdziwe.

W przypadku codziennej grafiki internetowej na standardowych ekranach ta zaleta jest niewidoczna, ponieważ wyświetlacz 8-bitowy nie jest w stanie pokazać dodatkowego zakresu. Jednak w przypadku witryn fotograficznych, treści HDR i wysokiej klasy wyświetlaczy AVIF jest jedynym z dwóch, który zapewnia sprawiedliwość obrazu.

Koszt serwera i narzędzi AVIF

Kompresja AVIF nie jest dowolna w momencie tworzenia. Jego wolniejsze kodowanie oznacza wyższy koszt procesora i dłuższy czas kompilacji, co sumuje się, gdy witryna generuje tysiące obrazów. Starsze biblioteki obrazów i niektóre edytory również nie potrafią jeszcze pisać plików AVIF, więc Twoje narzędzia muszą to obsługiwać. Z kolei WebP jest obsługiwany przez prawie każdą bibliotekę obrazów i koduje szybko, co sprawia, że na razie jest to wybór o niskim współczynniku tarcia.

Praktyczny wniosek polega na porównaniu dodatkowych 20% oszczędności rozmiaru z kosztami kodowania i lukami w narzędziach. W przypadku dużych operacji medialnych optymalizujących każdy bajt, AVIF zasługuje na swoje miejsce. W przypadku małej witryny WebP zapewnia większość korzyści bez żadnych tarć.

Który format wygrywa

Żadne z nich nie wygrywa w przypadku każdej pracy. Wybierz AVIF dla najmniejszych plików, HDR i szerokiej gamy kolorów gdy Twoje narzędzia to obsługują, a czas kodowania nie stanowi wąskiego gardła. Wybierz WebP do szybkiego kodowania, szerokiej obsługi i bezpiecznych ustawień domyślnych które działa obecnie w większej liczbie programów. Najsilniejsza konfiguracja obsługuje zarówno najpierw AVIF, jak i WebP, a na końcu zastępczą wersję JPG lub PNG, dzięki czemu każdy odwiedzający otrzymuje najlepszy format, jaki może zdekodować jego przeglądarka.

Jak utworzyć te formaty

Tworzenie nowoczesnych formatów nie wymaga użycia ciężkich narzędzi w przypadku WebP. Nasz Konwerter PNG na WebP działa w przeglądarce, grupuje pliki i nie dodaje znaku wodnego. Kodowanie AVIF jest bardziej wymagające, dlatego zwykle jest obsługiwane przez CDN obrazu lub etap kompilacji, a nie szybkie narzędzie przeglądarki. W przypadku większości witryn praktyczną ścieżką jest wygenerowanie WebP teraz i dodanie AVIF przez CDN później.

Często zadawane pytania

Czy AVIF spowalnia moją witrynę podczas ładowania?

Nie. AVIF dekoduje szybko; tylko kodowanie jest powolne, a kodowanie odbywa się raz podczas tworzenia obrazu, a nie przy każdym ładowaniu strony. Odwiedzający otrzymują tylko mniejszy plik do pobrania.

Jak obsługiwać AVIF z rezerwowym WebP?

Użyj elementu obrazu. Na pierwszym miejscu umieść AVIF, na drugim WebP, a na końcu JPG lub PNG, a przeglądarka ładuje pierwszy format, jaki może zdekodować.

Czy AVIF jest tego wart w przypadku małej witryny internetowej?

Często jeszcze nie. WebP zapewnia większość oszczędności przy mniejszym tarciu, ponieważ powolne kodowanie i luki w narzędziach AVIF zwiększają koszty, których mała witryna rzadko potrzebuje.

Czy AVIF jest lepszy niż WebP?

Przy kompresji tak. AVIF jest o około 20 procent mniejszy i obsługuje HDR. WebP koduje szybciej i ma szerszą obsługę, więc obecnie jest bezpieczniejszym rozwiązaniem domyślnym.

O ile mniejszy jest AVIF niż WebP?

Wokół 20 procent mniejszy w tej samej jakości i znacznie mniejszy niż JPG, ponieważ AVIF wykorzystuje nowszy kodek AV1.

Dlaczego AVIF jest wolniejszy w tworzeniu?

Ponieważ Kodowanie AV1 jest wymagające obliczeniowo. AVIF zamienia prędkość kodowania na lepszą kompresję, co ma znaczenie przy masowym przetwarzaniu obrazów lub na ograniczonych serwerach.

Czy WebP obsługuje HDR?

Nie. WebP ogranicza prędkość do 8 bitów na kanał, więc nie może przechowywać kolorów HDR ani szerokiej gamy kolorów. AVIF obsługuje do 12 bitów i HDR.

Które przeglądarki obsługują AVIF?

Przeglądarki Chrome, Firefox i Safari obsługują format AVIF, chociaż przyjęcie następuje po WebP, a niektóre sieci CDN i redaktorzy mają opóźnienia. Udostępnij wersję rezerwową WebP lub JPG dla starszych klientów.

Czy zarówno AVIF, jak i WebP zachowują przejrzystość?

Tak. Obydwa posiadają pełny kanał alfa, dzięki czemu przezroczysta grafika pozostaje przezroczysta w każdym formacie, w przeciwieństwie do JPG.

Czy do animacji lepszy jest AVIF lub WebP?

Oba pokonują GIF; AVIF kompresuje mocniej. Animacja AVIF jest mniejsza, WebP jest szybszy do wykonania, więc wybierz, czy ważniejszy jest rozmiar czy szybkość kodowania.

Czy w mojej witrynie powinienem używać formatu AVIF czy WebP?

Podawaj oba. Najpierw AVIF dla najmniejszego pliku, potem WebP dla kompatybilności, z resztą w formacie JPG lub PNG.

Czy AVIF zastąpi WebP?

Nie wkrótce. AVIF kompresuje lepiej, ale WebP koduje szybciej i ma szerszą obsługę, więc oba prawdopodobnie będą współistnieć przez lata, podawane razem.

Czy starsze przeglądarki mogą otwierać AVIF?

Często nie. Obsługa AVIF jest młodsza niż obsługa WebP, dlatego dla osób korzystających ze starszego oprogramowania niezbędna jest wersja zastępcza w formacie JPG lub PNG.

AVIF i WebP to formaty nowej generacji zbudowane z kodeków wideo, ale AVIF kompresuje około 20 procent mniej i dodaje HDR i 12-bitowe kolory, podczas gdy WebP koduje szybciej i cieszy się szerszą obsługą. Obydwa zachowują przezroczystość i animację, więc wybór sprowadza się do tego, czy chcesz mieć najmniejszy plik, czy najbezpieczniejszy i najszybszy. Podaj najpierw format AVIF ze względu na rozmiar, drugi WebP ze względu na kompatybilność, a resztę w formacie JPG lub PNG. Utwórz WebP w swojej przeglądarce za pomocą naszego konwertera powyżej i dodaj AVIF poprzez potok obrazów.

Szybkie odniesienie: AVIF lub WebP

Sięgnij po AVIF kiedy potrzebujesz absolutnie najmniejszego pliku, kiedy obraz wymaga HDR lub szerokiej gamy kolorów, a kiedy Twoja sieć CDN lub etap kompilacji może go wstępnie zakodować bez spowalniania każdego żądania. Sięgnij po WebP gdy potrzebujesz szybkiego kodowania, najszerszej obsługi oprogramowania i ustawień domyślnych o niskim współczynniku tarcia, z których korzysta już prawie każde narzędzie. Najsilniejsza konfiguracja to nie jedna lub druga, ale obie, podawane w kolejności: najpierw AVIF ze względu na rozmiar, na drugim miejscu WebP ze względu na zasięg, a na końcu rezerwowy plik JPG lub PNG, dzięki czemu żaden odwiedzający nie pozostanie z uszkodzonym obrazem.

Co następuje po AVIF

Formaty obrazów stale się rozwijają, a kolejnym konkurentem jest JPEG XL, oferujący silną kompresję z bezstratnym transkodowaniem JPG. Obsługa przeglądarek jest obecnie ograniczona, więc nie jest to jeszcze praktyczny wybór. Na razie AVIF i WebP to dwa formaty nowej generacji, które warto wdrożyć, a JPEG XL warto obejrzeć. Tworzenie łańcucha rezerwowego oznacza, że możesz później dodać nowszy format bez psucia starszych przeglądarek, dlatego podejście oparte na elementach obrazu jest przyszłościowe.