WebP i AVIF: jak wybrać i przetestować właściwy format obrazu

AVIF może pokonać WebP dla części obrazów i celów jakościowych; WebP może kodować się szybciej i lepiej pasować do szerszego starszego procesu. Rozszerzenie nie gwarantuje wyniku. Porównaj reprezentatywne wyjścia, zgodność i koszt procesu oraz zapewnij formaty zapasowe tam, gdzie potrzebują ich odbiorcy.

Oba formaty w skrócie

Zarówno WebP, jak i AVIF wyrosły z kodeków wideo. Google wypuściło WebP w 2010 roku na bazie VP8, tej samej technologii co format wideo WebM. Alliance for Open Media opublikowało AVIF w 2019 roku na bazie AV1, nowszego i wydajniejszego kodeka wideo opracowanego wspólnie przez Google, Mozillę, Apple, Netflix i inne firmy.

Nowsze narzędzia kodowania AV1 mogą poprawić kompresję, a prostsze i dojrzałe implementacje WebP mogą ograniczyć koszt przetwarzania. Rzeczywiste kodowanie i dekodowanie zależą od implementacji kodeka, ustawień, cech obrazu i urządzenia.

Kompresja: o ile mniejsze są pliki?

Wyniki testów zależą od zbioru obrazów, koderów, ustawień wysiłku, historii źródła i miary jakości. Odpowiedzialny test zachowuje wymiary i politykę metadanych oraz porównuje kilka miar wizualnych z oceną człowieka:

• AVIF — może dawać mocne wyniki dla zdjęć, gradientów, HDR i procesów o dużej głębi bitowej, ale kodowanie bywa kosztowne
• WebP — może wydajnie tworzyć wyniki stratne i bezstratne dzięki dojrzałym narzędziom oraz mniejszej złożoności wielu procesów

Nie zmieniaj marketingowej średniej formatu w prognozę dla każdego pliku. Wyeksportuj oba z tego samego źródła, dobierz porównywalną jakość wizualną i uwzględnij czas kodowania, dekodowanie, metadane oraz transfer zapasowy.

Materiały niefotograficzne mogą zachowywać się inaczej niż w testach zdjęć. Dla prostych grafik, ikon i płaskich ilustracji porównaj warianty bezstratne lub prawie bezstratne, jeśli są obsługiwane; wynik zależy od palety, kanału alfa, kodera i ustawień.

Obsługa przeglądarek i programów

Tabele obsługi zmieniają się, a udział globalny nie jest tym samym co twoi odbiorcy. Sprawdź docelowe przeglądarki i inne systemy. Element <picture> może podać najpierw AVIF, potem WebP, a JPEG zostawić jako ostatni zapasowy <img>:

<picture>
  <source srcset="foto.avif" type="image/avif" />
  <source srcset="foto.webp" type="image/webp" />
  <img src="foto.jpg" alt="Opis" />
</picture>

Szybkość kodowania i narzędzia

Kodery WebP często wymagają mniej obliczeń niż AVIF przy porównywalnych ustawieniach wysiłku, ale proporcja bardzo się zmienia. Jeśli CMS konwertuje obrazy przy wysyłaniu lub dużymi partiami, zmierz przepustowość, pamięć, czas kolejki i jakość na dokładnie wdrożonych bibliotekach i ustawieniach.

Wydajność koderów zmienia się między bibliotekami i wersjami. Koszt dekodowania zależy również od wymiarów, głębi bitowej, urządzenia, przeglądarki i implementacji. Testuj słabsze urządzenia docelowe, zamiast zakładać, że różnica jest niezauważalna.

Obsługa narzędzi jest szeroka, lecz nierówna. Potwierdź import, eksport, animację, profil koloru, metadane i automatyczne negocjowanie w konkretnym edytorze, CMS, planie CDN i zestawie przeglądarek.

Porównanie funkcji

AVIF może przedstawiać większą głębię bitową, szeroki gamut i sygnały HDR ponad kodowanie WebP o głębi 8 bitów. Ta możliwość nie gwarantuje poprawności koloru: mastering, profile, metadane, zachowanie przeglądarki, ekran i testy nadal mają znaczenie.

Kiedy używać którego formatu

Wybierz AVIF, gdy:

• Kontrolujesz pipeline obrazów i możesz serwować fallbacki
• Reprezentatywne wyniki AVIF poprawiają istotne wąskie gardło transferu lub jakości
• Potrzebujesz funkcji AVIF, takich jak większa głębia bitowa lub HDR, i przetestowano cały tor koloru
• CDN lub proces budowania poprawnie tworzy, buforuje i negocjuje zweryfikowane warianty

Wybierz WebP, gdy:

• Zmierzona przepustowość kodera lub prostota działania przemawia za WebP
• Obsługiwane klienty przyjmują WebP, a dodatkowy wariant AVIF nie jest uzasadniony
• Reprezentatywne grafiki osiągają cele rozmiaru i jakości w WebP
• Już serwujesz WebP i wysiłek migracji nie jest uzasadniony

Używaj obu, gdy zmierzona korzyść to uzasadnia:

Stos <picture> zwiększa pracę nad generowaniem, przechowywaniem, pamięcią podręczną, kodem i kontrolą jakości, ale może poprawić dostarczanie. Niektóre CDN automatyzują negocjowanie; sprawdź plan, klucze cache, obsługę Vary, ustawienia jakości i wynik zapasowy zamiast zakładać „optymalną” dostawę.

Jak skonwertować swoje obrazy

Vizua tworzy obsługiwane wyjścia WebP i AVIF w przeglądarce bez instalacji programu. Wybrany plik nie jest wysyłany na nasz serwer przetwarzania obrazów; wymagany kod i usługi strony mogą nadal korzystać z sieci:

• Kompresja WebP — zmniejsz istniejące pliki WebP
• Konwertuj do AVIF — utwórz AVIF z obsługiwanych obrazów wejściowych
• JPG na WebP — konwertuj zdjęcia JPEG do WebP
• PNG na WebP — konwertuj grafiki PNG do WebP

Jeśli pracujesz ze źródłami JPEG, przewodnik o kompresji obrazów bez utraty jakości wyjaśnia wybór ustawień początkowych i porównanie rzeczywistych wyników.

Najczęściej zadawane pytania