Wdrażanie pliku AVIF na potrzeby bardziej elastycznych witryn

Informacje o tym, jak AVIF został przyjęty w ekosystemie.

Jani Huoponen
Jani Huoponen
Vignesh Venkatasubramanian
Vignesh Venkatasubramanian

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.

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%.

Wykres liniowy pokazujący użycie formatu AVIF w Chrome od maja 2021 r. do marca 2023 r. Liczba użytkowników korzystających z pomocy wzrosła z 0% do niecałych 1,4%.

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.:

Deweloperzy, którzy lubią samodzielnie testować narzędzia, mogą zacząć od korzystania z narzędzi takich jak ImageMagickFFmpeg.

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 słupkowy porównujący różne rozmiary plików kodeków obrazu jako procent wyjściowego pliku TurboJPEG. Najmniejsza jest wartość AVIF, potem JPEG XL, potem WebP, a na końcu MozJPEG.

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.

Porównanie szybkości kodowania kodeka obrazu. Porównywane kodery to średni AVIF, średni JPEG XL, średni WebP (jeden wątek) i średni MozJPEG (jeden wątek). AVIF to jeden z najszybszych koderów obrazów pod względem najlepszej jakości i domyślnej metody działania, ale jest najwolniejszy spośród wszystkich koderów zapewniających wydajność „w locie”.

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.

za pomocą kodera. Czas kodowania (ms) Klatki na sekundę Wykorzystanie procesora Specyfikacja sprzętu
Pulsar-AVIF
(FPGA)
60 409,85 305% AMD Alveo U250 1 szt.+ procesor Intel(R) Xeon(R)
Platinum 8171 2,6 GHz, 10 rdzeni
avifenc
(libaom)
405 59,26 3200% Procesor Intel(R) Xeon(R) Platinum 8370C
2,8 GHz, 32 rdzenie
avifenc
(SVT-AV1)
1325 18.11 3200% Procesor Intel(R) Xeon(R) Platinum 8370C
2,8 GHz, 32 rdzenie
Porównanie szybkości kodowania AVIF
  • 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%.

Porównanie skuteczności kodeków animowanych obrazów. Format AVIF przewyższa pod względem przeciętnego rozmiaru i mediany rozmiaru pliku niż w przypadku formatów GIF i JPEG XL.
* Wersje libavif i libjxl: libavif w wersji 4cff6a3 (libaom w wersji 3.5.0), libjxl w wersji 176b1c03. Zestaw testowy: 15 przykładowych GIF-ów z Wikipedii.

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 .