Informacja na temat wdrożenia AVIF w ekosystemie.
AVIF to nowy format obrazu, który szybko zyskuje popularność w internecie ze względu na wysokie współczynniki kompresji, wysoką wydajność i powszechne zastosowanie. AVIF to otwarty, bezpłatny format plików graficznych oparty na kodeku wideo AV1 ustandaryzowanym przez Alliance for Open Media. W tym poście omówiono sposób wdrażania formatu AVIF w ekosystemie oraz korzyści związane z wydajnością i jakością, których programiści mogą oczekiwać od AVIF w przypadku obrazów i animacji.
Co nowego w ekosystemie AVIF?
Od czasu wprowadzenia formatu AVIF w Chrome, Firefoksie i Safari stopniowo rośnie wykorzystanie AVIF w internecie; obecnie prawie wszystkie przeglądarki obsługują format AVIF.
W samej przeglądarce Chrome użycie formatu AVIF wzrosło do około jednego procenta w ciągu nieco ponad roku po dodaniu stabilnej obsługi formatu AVIF w Chrome.
Wiele sieci CDN z obrazami, np. Akamai, Cloudflare, Cloudinary i Imgix, obsługuje obecnie obrazy AVIF. W poście na blogu informującym o obsłudze formatu AVIF firma Imgix informowała o 60% oszczędności rozmiaru pliku w porównaniu z formatem JPEG oraz o 35% w porównaniu z WebP. Taka oszczędność rozmiaru plików pozwala na znaczną oszczędność miejsca na dane, a jednocześnie przyspiesza ładowanie stron i zapewnia szybsze wyrenderowanie największego wyrenderowania treści (LCP). LCP to jeden z podstawowych wskaźników internetowych i reprezentuje, jak szybko wczytuje się największy blok treści na stronie. Stosowanie nowoczesnych kodeków do kompresowania obrazów to jedna z najważniejszych technik ograniczania LCP. Lighthouse to świetne narzędzie dla programistów Chrome do testowania witryny i sprawdzania, ile oszczędności może przynieść AVIF.
WordPress to najpopularniejsza platforma witryn internetowych na świecie. Programiści mogą korzystać z wielu wtyczek, które pozwalają konwertować obrazy do formatu AVIF, takich jak:
- AutoOptimize
- Konwersja na potrzeby mediów
- Optymalizator obrazu EWWW
- Optymole
- Optymalizację obrazu ShortPixel
Dla bardziej praktycznych programistów dobrym punktem wyjścia są takie narzędzia jak ImageMagick czy FFmpeg.
Szybkość kodowania AVIF
Szybkie kodowanie i wysoka jakość obrazu mają kluczowe znaczenie przy wdrażaniu kompresji obrazów na dużą skalę. W ciągu ostatnich dwóch lat szybkość kodowania oprogramowania AVIF znacznie się poprawiła. W porównaniu z innymi nowoczesnymi formatami obrazów nieruchomych AVIF tworzy mniejsze pliki o podobnej jakości wizualnej (patrz wykres poniżej: im niżej, tym lepiej), ale ich kodowanie jest szybsze.
Poniższy wykres (im większa liczba, tym lepszy) przedstawia porównanie szybkości kodowania AVIF z innymi formatami obrazów. Kodeki poprzedniej generacji, takie jak WebP, korzystają z mniej złożonych (ale też mniej wydajnych) algorytmów kompresji. Dzięki schematowi kodowania wielowątkowego AVIF osiąga podobną wydajność w typowych przypadkach użycia, a jednocześnie znacznie poprawia kompresję.
Programiści, którzy chcą uzyskać bardziej szczegółowe porównanie szybkości kodowania i jakości wizualnej, mogą skorzystać z porównań kodowania obrazów graficznych, które zawiera możliwe do odtworzenia wyniki testów porównawczych.
Chociaż implementacje oprogramowania dla nowoczesnych kodeków graficznych, takich jak AVIF i WebP, są zoptymalizowane pod kątem architektur x86 i procesorów ARM, kompresowanie ogromnych ilości obrazów na dużą skalę może być czasochłonne. Alternatywą dla zmniejszenia kosztów kompresji jest akceleracja sprzętowa. Firma Bluedot opracowała akcelerowany sprzętowo koder Pulsar-AVIF działający na możliwych do zaprogramowania układach FPGA, takich jak AMD Alveo U250. W porównaniu z programowym avifenc, Pulsar-AVIF zapewnia 7–23 razy większą szybkość przy podobnej wydajności kompresji.
- Zestaw testowy: Kodak (24 zdjęcia w 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)
Programiści mogą wdrażać koder Pulsar-AVIF w maszynach wirtualnych działających w chmurze, takich jak Azure NP-Series.
Funkcje AVIF dla elastycznych stron internetowych
AVIF oferuje kilka interesujących funkcji, które pomagają w tworzeniu bardziej elastycznych stron internetowych. Tym razem skupimy się na animowanych plikach AVIF, które są zdecydowanie najbardziej efektywnym sposobem wyświetlania atrakcyjnych animacji w internecie.
Animowany plik AVIF
Chociaż animowany GIF ma nadal 35 lat, jest nadal popularnym formatem animowanych obrazów. Największe wady animowanych GIF-ów to obsługa tylko 256 kolorów i słaba kompresja, która prowadzi do bardzo dużych rozmiarów plików przy jednoczesnym ograniczeniu rozdzielczości lub liczby klatek w praktycznych zastosowaniach. W przeciwieństwie do tego animowane kodowanie AVIF różni się od kodowania wideo AV1, co znacznie zmniejsza rozmiar plików w porównaniu z formatem animowanym GIF.
Przeprowadziliśmy prosty test porównawczy, w którym zakodowaliśmy zestaw animowanych plików GIF do formatów AVIF i JPEG XL. W zbiorze testowym mediana rozmiaru plików 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 animacji w formacie AVIF.
FFmpeg to jedno z narzędzi do tworzenia animowanych plików AVIF. Oto podstawowy przykład konwertowania GIF-ów na AVIF za pomocą FFmpega:
ffmpeg -i "$INPUT_GIF" -crf $CRF -b:v 0 "$OUTPUT.avif"
$CRF to pożądana jakość danych wyjściowych w skali od 0 do 63. Niższe wartości oznaczają lepszą jakość i większy rozmiar pliku. 0 korzysta z kompresji bezstratnej. W przypadku małych animowanych plików AVIF rozpocznij od wartości 23.
FFmpeg domyślnie używa libaom do kodowania obrazów w formacie AVIF, ale może też używać formatu rav1e lub SVT-AV1, jeśli jest dostępny. Więcej informacji na temat wyboru kodera oraz dostrajania parametrów kodowania w celu uzyskania równowagi między szybkością a jakością znajdziesz w przewodniku po kodowaniu AV1 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 wykorzystanie filmu AV1 z elementem <img>. Można to zrobić, przekazując adres -c:v copy do FFmpeg.
ffmpeg -i "$INPUT_AV1_VIDEO" -c:v copy -an "$OUTPUT.avif"
Podsumowanie
Od momentu wprowadzenia na rynek coraz więcej korzysta z formatu AVIF w internecie i jest on powszechnie obsługiwany przez przeglądarki, sieci CDN z obrazami, wtyczki WordPress i narzędzia do kodowania. Podsumowując, format AVIF to doskonały wybór do wyświetlania obrazów w internecie. AVIF umożliwia szybkie kodowanie i dekodowanie plików przy zachowaniu najlepszej jakości lub najmniejszego rozmiaru plików, zależnie od preferencji dotyczących witryny. AVIF to najskuteczniejszy sposób przesyłania animacji do internetu. Jeśli masz pytania, uwagi lub prośby o dodanie funkcji, skorzystaj z listy adresowej av1-dyskusja, społeczności AOM GitHub lub witryny wiki AVIF.