Aktualne informacje o tym, jak format AVIF został przyjęty w ekosystemie.
AVIF to nowy format pliku graficznego, który szybko zyskuje popularność w internecie ze względu na wysoki współczynnik kompresji, wydajność i szerokie zastosowanie. AVIF to otwarty, bezpłatny format obrazu oparty na kodeku wideo AV1, który został ustandaryzowany przez Alliance for Open Media. W tym poście na blogu omówimy, jak AVIF jest wdrażany w ekosystemie oraz jakich korzyści pod względem wydajności i jakości mogą oczekiwać deweloperzy, używając AVIF do obrazów i animacji.
Co nowego w ekosystemie AVIF?
Od czasu wprowadzenia AVIF w Chrome, Firefoksie i Safari wykorzystanie tego formatu w internecie stale rośnie. Obecnie AVIF obsługują prawie wszystkie przeglądarki.
W ciągu nieco ponad roku od dodania obsługi AVIF w stabilnej wersji Chrome wykorzystanie tego formatu w samej przeglądarce Chrome wzrosło do około 1%.
Wiele sieci CDN obrazów, takich jak Akamai, Cloudflare, Cloudinary i Imgix, obsługuje obecnie obrazy AVIF. W poście na blogu, w którym ogłoszono obsługę AVIF, firma Imgix poinformowała o 60% oszczędności rozmiaru pliku w porównaniu z JPEG i 35% oszczędności w porównaniu z WebP. Mniejsze rozmiary plików pozwalają zaoszczędzić sporo miejsca na dane, ale też przyspieszają wczytywanie stron, co przekłada się na krótszy czas największego wyrenderowania treści (LCP). LCP to jeden z Core Web Vitals, który określa, jak szybko wczytuje się największy blok treści na stronie. Używanie nowoczesnych kodeków do kompresowania obrazów to jedna z kluczowych technik zmniejszania LCP. Lighthouse to świetne narzędzie dla deweloperów w Chrome, które pozwala przetestować witrynę i sprawdzić, jakie oszczędności przyniesie AVIF.
WordPress to najpopularniejsza platforma internetowa na świecie. Deweloperzy mogą korzystać z wielu wtyczek do konwertowania obrazów na format AVIF, takich jak:
Dla bardziej doświadczonych deweloperów dobrym punktem wyjścia są narzędzia takie jak ImageMagick i FFmpeg.
Szybkość kodowania AVIF
Szybkie kodowanie i wysoka jakość obrazu mają kluczowe znaczenie dla wdrażania kompresji obrazu na dużą skalę. Szybkość kodowania oprogramowania AVIF znacznie wzrosła w ciągu ostatnich 2 lat. W porównaniu z innymi nowoczesnymi formatami plików graficznych AVIF generuje mniejsze pliki o podobnej jakości wizualnej (patrz wykres poniżej, im niżej, tym lepiej), ale jest też szybszy w kodowaniu.
Wykres poniżej (im wyżej, tym lepiej) pokazuje, jak szybkość kodowania AVIF wypada w porównaniu z innymi formatami plików graficznych. Kodeki poprzedniej generacji, takie jak WebP, korzystają z mniej złożonych (ale też mniej wydajnych) algorytmów kompresji. Dzięki wielowątkowemu schematowi kodowania AVIF osiąga podobną wydajność w typowych przypadkach użycia, zapewniając jednocześnie znaczne korzyści w zakresie kompresji.
Deweloperzy zainteresowani bardziej szczegółowymi porównaniami szybkości kodowania i jakości wizualnej znajdą powtarzalne wyniki testów porównawczych na stronie Image Coding Comparisons.
Chociaż implementacje oprogramowania dla nowoczesnych kodeków obrazów, takich jak AVIF i WebP, są zoptymalizowane pod kątem architektur procesorów x86 i ARM, kompresowanie dużej liczby obrazów na dużą skalę może być kosztowne pod względem obliczeniowym. Jedną z alternatyw, która pozwala obniżyć koszty kompresji, jest akceleracja sprzętowa. Firma Bluedot opracowała akcelerowany sprzętowo koder Pulsar-AVIF działający na programowalnych układach FPGA, takich jak Alveo U250 firmy AMD. W porównaniu z oprogramowaniem avifenc Pulsar-AVIF zapewnia od 7 do 23 razy większą szybkość przy podobnej wydajności kompresji.
- Zestaw testowy: Kodak (24 obrazy o rozdzielczości 768 x 512)
- kodowanie 24 obrazów jednocześnie (24 procesy),
- Każdy proces kodowania oprogramowania jest wykonywany z użyciem 4 wątków. (-j 4)
Deweloperzy mogą wdrażać koder Pulsar-AVIF na maszynach wirtualnych w chmurze, takich jak Azure NP-Series.
Funkcje AVIF na elastycznych stronach internetowych
AVIF ma kilka interesujących funkcji, które pomogą Ci tworzyć bardziej elastyczne strony internetowe. Tym razem przyjrzymy się animowanym plikom AVIF, które są zdecydowanie najskuteczniejszym sposobem dostarczania atrakcyjnych animacji w internecie.
Animowany AVIF
Animowany GIF to nadal popularny format animowanych obrazów, mimo że ma już 35 lat. Największymi wadami animowanych GIF-ów są obsługa tylko 256 kolorów i słaba kompresja, co prowadzi do bardzo dużych rozmiarów plików, a jednocześnie ogranicza rozdzielczość lub liczbę klatek w praktycznych zastosowaniach. Z kolei kodowanie animowanych plików AVIF jest takie samo jak schemat kodowania wideo AV1, co pozwala znacznie zmniejszyć rozmiar pliku w porównaniu z animowanym GIF-em.
Przeprowadziliśmy prosty test porównawczy, w którym zakodowaliśmy zestaw animowanych GIF-ów w formatach AVIF i JPEG XL. W przypadku zestawu testowego mediana procentowej oszczędności rozmiaru pliku wyniosła około 86% w porównaniu z oryginalnymi plikami GIF i około 73% w porównaniu z animowanymi plikami JPEG XL*.
Chrome, Firefox i Safari obsługują odtwarzanie animowanych plików AVIF.
Jednym z narzędzi do tworzenia animowanych plików AVIF jest FFmpeg. Oto podstawowy przykład konwersji pliku GIF na AVIF za pomocą FFmpeg:
ffmpeg -i "$INPUT_GIF" -crf $CRF -b:v 0 "$OUTPUT.avif"
$CRF to oczekiwana jakość wyjściowa w skali od 0 do 63. Niższe wartości oznaczają lepszą jakość i większy rozmiar pliku. 0 używa kompresji bezstratnej. W przypadku małych animowanych plików AVIF zacznij od wartości 23.
FFmpeg domyślnie używa libaom do kodowania obrazów AVIF, ale może też używać rav1e lub SVT-AV1, jeśli są dostępne. Więcej informacji o wyborze kodera i dostosowywaniu parametrów kodowania pod kątem szybkości i jakości znajdziesz w przewodniku po kodowaniu AV1 w FFmpeg.
Innym przypadkiem użycia jest przepakowanie filmu AV1 do formatu AVIF bez ponownego kodowania oryginalnego pliku. Jest to znacznie tańsze niż dekodowanie/kodowanie oryginalnego pliku AV1 i umożliwia korzystanie z filmu AV1 z elementem <img>. Możesz to zrobić, przekazując -c:v copy do FFmpeg.
ffmpeg -i "$INPUT_AV1_VIDEO" -c:v copy -an "$OUTPUT.avif"
Podsumowanie
Od momentu wprowadzenia formatu AVIF jego wykorzystanie w internecie stale rośnie. Jest on powszechnie obsługiwany przez przeglądarki, sieci CDN obrazów, wtyczki WordPressa i narzędzia do kodowania. Podsumowując, AVIF to świetny wybór do wyświetlania obrazów w internecie. AVIF szybko koduje i dekoduje, zapewniając najlepszą jakość lub najmniejszy rozmiar pliku, w zależności od tego, co preferujesz w swojej witrynie. AVIF to najbardziej efektywny sposób dostarczania animacji w internecie. Jeśli masz pytania, komentarze lub prośby o dodanie funkcji, skontaktuj się z nami na liście adresowej av1-discuss, w społeczności AOM na GitHubie lub na stronie AVIF w Wikipedii.