Informacje o tym, jak AVIF został przyjęty w ekosystemie.
AVIF to nowy format obrazu, który szybko zyskuje popularność w internecie dzięki wysokiemu stopniowi kompresji, wydajności i szerokiemu zastosowaniu. AVIF to otwarty, bezpłatny format obrazu oparty na kodeku wideo AV1 ustandaryzowanym przez Alliance for Open Media. W tym poście omówiono wdrażanie AVIF w ekosystemie oraz korzyści w zakresie wydajności i jakości działania AVIF w przypadku obrazów i animacji.
Co nowego w ekosystemie AVIF?
Od czasu wprowadzenia formatu AVIF w Chrome, Firefox i Safari jego użycie w internecie stale rośnie. Obecnie prawie wszystkie przeglądarki obsługują format AVIF.
W Chrome, w ciągu niespełna roku od dodania obsługi AVIF w wersji stabilnej, wykorzystanie tego formatu wzrosło do około 1%.
Wiele sieci CDN obrazów, takich jak Akamai, Cloudflare, Cloudinary i Imgix, udostępnia obecnie obrazy w formacie AVIF. W poście na blogu ogłaszającym obsługę formatu AVIF firma Imgix poinformowała o 60% mniejszym rozmiarze pliku w porównaniu z JPEG i 35% mniejszym rozmiarze w porównaniu z WebP. Oszczędności w rozmiarze plików prowadzą do znacznego zmniejszenia miejsca na dane, ale też pomagają przyspieszyć wczytywanie stron, co przekłada się na krótszy czas największego wyrenderowania treści (LCP). LCP to jeden z podstawowych wskaźników internetowych, który wskazuje, jak szybko wczytuje się największy blok treści na stronie. Korzystanie z nowoczesnych kodeków do kompresji obrazów to jedna z kluczowych technik, które pozwalają skrócić czas LCP. Lighthouse to świetne narzędzie dla programistów Chrome do testowania witryn internetowych i sprawdzania, ile oszczędności przyniesie AVIF.
WordPress to najpopularniejsza platforma do tworzenia stron internetowych na świecie. Deweloperzy mogą korzystać z wielu wtyczek do konwertowania obrazów na format AVIF, np.:
- AutoOptimize
- Konwertowanie na potrzeby multimediów
- optymalizator obrazów EWWW,
- Optimole
- Optymalizator obrazów ShortPixel
Deweloperzy, którzy lubią samodzielnie testować narzędzia, mogą zacząć od korzystania z narzędzi takich jak ImageMagick i FFmpeg.
Szybkość kodowania AVIF
Szybkie kodowanie i wysoka jakość obrazu mają kluczowe znaczenie przy wdrażaniu kompresji obrazu na dużą skalę. Szybkość kodowania w oprogramowaniu AVIF znacznie wzrosła w ciągu ostatnich dwóch lat. W porównaniu z innymi nowoczesnymi formatami nieruchomych obrazów format AVIF pozwala tworzyć mniejsze pliki o podobnej jakości obrazu (zobacz wykres poniżej, im niższy, tym lepszy), ale jest też szybszy w kodowaniu.
Wykres poniżej pokazuje porównanie szybkości kodowania AVIF z innymi formatami obrazów (im wyższy wynik). Kodery 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 przypadku typowych zastosowań, a jednocześnie zapewnia znaczne korzyści w zakresie kompresji.
Dla deweloperów zainteresowanych bardziej szczegółowym porównaniem szybkości kodowania i jakości obrazu strona Image Coding Comparisons zawiera wyniki testów porównawczych, które można odtworzyć.
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 ogromnej ilości obrazów może być kosztowne pod względem zasobów obliczeniowych. Jednym ze sposobów na obniżenie kosztów kompresji jest sprawdzenie akceleracji sprzętowej. Firma Bluedot opracowała koder Pulsar-AVIF z przyspieszeniem sprzętowym, który działa na programowalnych układach FPGA, takich jak Alveo U250 firmy AMD. W porównaniu z opartym na oprogramowaniu kodekiem avifenc, Pulsar-AVIF zapewnia od 7 do 23 razy większą szybkość przy podobnej skuteczności kompresji.
- Zestaw testowy: Kodak (24 zdjęcia w rozdzielczości 768 x 512)
- Jednoczesne kodowanie 24 obrazów (24 procesy)
- Każdy proces kodowania oprogramowania jest realizowany z 4 wątkami. (-j 4)
Deweloperzy mogą wdrażać koder Pulsar-AVIF z maszynami wirtualnymi w chmurze, takimi jak Azure NP-Series.
Funkcje AVIF na stronach internetowych z dopasowaniem do ekranu
AVIF ma kilka interesujących funkcji, które ułatwiają wyświetlanie stron internetowych dostosowanych do urządzeń mobilnych. Tym razem zajmiemy się animowanymi formatami AVIF, które są zdecydowanie najskuteczniejszym sposobem wyświetlania ciekawych animacji w internecie.
Animowane AVIF
Animowany GIF to nadal popularny format animowanych obrazów, mimo że ma już 35 lat. Największe wady animowanych GIF-ów to obsługa tylko 256 kolorów i słaba kompresja, co prowadzi do bardzo dużych rozmiarów pliku, a jednocześnie ogranicza rozdzielczość lub liczbę klatek w praktycznych przypadkach użycia. Z kolei kodowanie animowanych plików AVIF jest takie samo jak schemat kodowania wideo AV1, który zapewnia znaczne zmniejszenie rozmiaru pliku w porównaniu z animowanym GIF-em.
Przeprowadziliśmy prosty test porównawczy, w którym zakodowaliśmy zestaw animowanych GIF-ów zarówno do formatu AVIF, jak i JPEG XL. W przypadku testowanego zbioru średnia oszczędność miejsca na dysku w porównaniu z oryginalnymi plikami GIF wyniosła około 86%, a w porównaniu z animowanymi plikami JPEG XL* – około 73%.
Chrome, Firefox i Safari obsługują odtwarzanie animowanych plików AVIF.
FFmpeg to jedno z narzędzi do tworzenia animowanych plików AVIF. Oto podstawowy przykład konwertowania GIF-a na AVIF za pomocą FFmpeg:
ffmpeg -i "$INPUT_GIF" -crf $CRF -b:v 0 "$OUTPUT.avif"
$CRF to żądana jakość wyjściowa na 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.
Do kodowania obrazów AVIF FFmpeg domyślnie używa biblioteki libaom, ale może też użyć biblioteki rav1e lub SVT-AV1, jeśli są dostępne. Więcej informacji o wyborze kodera oraz dostrajaniu parametrów kodowania pod kątem kompromisu między szybkością a jakością znajdziesz w przewodniku po kodowaniu AV1 firmy FFmpeg.
Innym sposobem jest przepakowanie filmu AV1 do formatu AVIF bez ponownego kodowania oryginalnego pliku. Jest to znacznie tańsze niż dekodowanie lub kodowanie oryginalnego pliku AV1 i umożliwia użycie filmu AV1 z elementem <img>. Można to zrobić przez przekazanie pliku -c:v copy do FFmpeg.
ffmpeg -i "$INPUT_AV1_VIDEO" -c:v copy -an "$OUTPUT.avif"
Podsumowanie
Wykorzystanie plików AVIF w internecie nieustannie rośnie od momentu wprowadzenia ich na rynek. Jest ono powszechnie obsługiwane przez przeglądarki, sieci CDN związane z obrazami, wtyczki WordPress oraz narzędzia do kodowania. Podsumowując, AVIF to świetny wybór do wyświetlania obrazów w internecie. Format ten jest szybki do kodowania i dekodowania, a jednocześnie zapewnia najlepszą jakość lub najmniejszy rozmiar pliku – w zależności od tego, co jest dla Ciebie ważniejsze w przypadku Twojej witryny. AVIF to najskuteczniejszy sposób wyświetlania animacji w internecie. Jeśli masz pytania, komentarze lub propozycje funkcji, skontaktuj się z nami na liście mailingowej av1-discuss, w społeczności AOM na GitHubie i w wiki AVIF.
Baner powitalny z filmu Unsplash, którego autorem jest Amal S .