Często wspominamy o nadużywaniu obrazów w witrynach, a narzędzia takie jak Lighthouse zwracają uwagę na to, że wczytywanie obrazów ma negatywny wpływ na wrażenia użytkownika, np. wydłuża czas wczytywania lub zmniejsza przepustowość ważniejszych zasobów. Jednym ze sposobów rozwiązania tego problemu jest zastosowanie nowoczesnej kompresji, by zmniejszyć rozmiar pliku graficznego. Nową opcją dla programistów stron internetowych jest format obrazu AVIF. W tym poście omawiamy ostatnie aktualizacje narzędzi open source do kodowania AVIF, biblioteki kodowania libaom i libavif oraz samouczek na temat ich używania do wydajnego kodowania obrazów AVIF.
AVIF to format obrazu oparty na kodeku wideo AV1, ustandaryzowany przez Alliance for Open Media. Format AVIF zapewnia znaczny wzrost kompresji w porównaniu z innymi formatami obrazów, takimi jak JPEG czy WebP. Dokładne oszczędności zależą od treści, ustawień kodowania i docelowej jakości, ale my i inne firmy odnotowaliśmy ponad 50% oszczędności w porównaniu z formatem JPEG.
Dodatkowo AVIF dodaje obsługę kodeka i kontenera na potrzeby nowych funkcji obrazów, takich jak High Dynamic Range i Wide Color Gamut, synteza ziaren kliszy oraz dekodowanie progresywne.
Nowości
Od wprowadzenia obsługi AVIF w Chrome M85 obsługa AVIF w ekosystemie open source została ulepszona pod wieloma względami.
Libaom
Libaom to koder i dekoder AV1 typu open source opracowany przez firmy w ramach Alliance for Open Media i używany w wielu usługach produkcyjnych Google i innych firm członkowskich. Pomiędzy libaom 2.0.0 (mniej więcej w tym samym czasie, w którym Chrome dodał obsługę AVIF), a w najnowszej wersji 3.1.0 zostały wprowadzone istotne optymalizacje kodowania obrazów do bazy kodu. Są to między innymi:
- Optymalizacje w zakresie wielowątkowości i kodowania kafelkowego.
- 5-krotne zmniejszenie wykorzystania pamięci.
- 6,5-krotne zmniejszenie wykorzystania procesora, jak widać na wykresie poniżej.
Zmiany te znacznie obniżają koszty kodowania AVIF – zwłaszcza najczęściej wczytywane lub o najwyższym priorytecie obrazy w witrynie. W miarę jak kodowanie AV1 z akceleracją sprzętową stanie się dostępne na serwerach i w usługach w chmurze, koszty tworzenia obrazów AVIF będą nadal spadać.
libavif
Libavif, referencyjna implementacja AVIF, to multiplekser i parser AVIF typu open source, który jest używany w Chrome do dekodowania obrazów AVIF. Można go również używać do tworzenia obrazów AVIF na podstawie istniejących nieskompresowanych obrazów lub transkodowania z istniejących obrazów w internecie (JPEG, PNG itp.).
Libavif dodało ostatnio obsługę szerszego zakresu ustawień kodera, w tym integracji z bardziej zaawansowanymi ustawieniami kodera Libaom. Optymalizacje procesu przetwarzania, takie jak szybka konwersja YUV na RGB z wykorzystaniem libyuv i wstępnie mnożonej obsługi kanału alfa, jeszcze bardziej przyspieszają proces dekodowania. Obsługa trybu kodowania all-intra, który został dodany w libaom 3.1.0, zapewnia wszystkie te ulepszenia, o których wspominaliśmy powyżej.
.Kodowanie obrazów AVIF za pomocą avifenc
Szybkim sposobem na przetestowanie AVIF jest użycie Squoosh.app. Squoosh uruchamia wersję libavif WebAssembly i udostępnia wiele tych samych funkcji, które są dostępne w narzędziach wiersza poleceń. To prosty sposób na porównanie formatu AVIF z innymi starymi i nowymi formatami. Dostępnych jest też wersja wiersza poleceń Squoosh przeznaczona dla aplikacji Node.
WebAssembly nie ma jeszcze dostępu do wszystkich podstawowych elementów wydajności CPU, więc jeśli chcesz uruchomić libavif jak najszybciej, zalecamy koder wiersza poleceń avifenc.
Aby zrozumieć, jak kodować obrazy AVIF, zaprezentujemy samouczek z wykorzystaniem tego samego obrazu źródłowego w przykładzie powyżej. Na początek będziesz potrzebować:
Musisz też zainstalować pakiety programistyczne z bibliotek zlib, libpng i libjpeg. Polecenia dla dystrybucji Debian i Ubuntu Linux:
sudo apt-get install zlib1g-dev
sudo apt-get install libpng-dev
sudo apt-get install libjpeg-dev
Tworzenie awfencjonera kodera wiersza poleceń
1. Pobierz kod
Zobacz tag wydania libavif.
git clone -b v0.9.1 https://github.com/AOMediaCodec/libavif.git
2. Zmień katalog na libavif
cd libavif
Istnieje wiele różnych sposobów konfigurowania plików avifenc i libavif do tworzenia. Więcej informacji znajdziesz na stronie libavif. Planujemy stworzenie avifenc, aby było statycznie połączone z biblioteką libaom kodera i dekodera AV1.
3. Zyskaj i zbuduj Libaom
Przejdź do katalogu zależności zewnętrznych libavif.
cd ext
Następne polecenie pobierze kod źródłowy libaom i statycznie zbuduje libaom.
./aom.cmd
Zmień katalog na libavif.
cd ..
4. Tworzenie narzędzia do kodowania wiersza poleceń – avifenc
Warto utworzyć katalog kompilacji dla avifenc.
mkdir build
Przejdź do katalogu kompilacji.
cd build
Utwórz pliki kompilacji dla avifenc.
cmake -DCMAKE_BUILD_TYPE=Release -DBUILD_SHARED_LIBS=0 -DAVIF_CODEC_AOM=1 -DAVIF_LOCAL_AOM=1 -DAVIF_BUILD_APPS=1 ..
Buduj awifen.
make
Udało Ci się zbudować awifen!
Omówienie parametrów wiersza poleceń avifenc
W avifenc jest używana struktura wiersza poleceń:
./avifenc [options] input.file output.avif
Podstawowe parametry avifenc wykorzystane w tym samouczku:
| Avifenc | |
|---|---|
| --min 0 | Ustaw minimalny kwantyzator dla koloru na 0 |
| --maks. 63 | Ustaw maksymalny kwantyzator dla koloru na 63 |
| --minalpha 0 | Ustaw minimalny kwantyzator dla kanału alfa na 0 |
| --maxalpha 63 | Ustaw maksymalny kwantyzator dla kanału alfa na 63 |
| -końcowe wykorzystanie=q | Ustaw tryb regulacji szybkości na tryb stałej jakości (Q). |
| -a cq-level=Q | Ustaw poziom kwantyfikacji dla koloru i alfa na Q |
| -a color:cq-level=Q | Ustaw poziom kwantyfikacji koloru na Q |
| -a alfa:cq-level=Q | Ustaw poziom kwantyfikacji dla alfa na Q |
| -tune=ssim | Dostrój do SSIM (domyślnie jest dostrajany do PSNR) |
| --jobs J | Używaj wątków instancji roboczych J (domyślnie: 1) |
| --Szybkość S | Ustaw szybkość kodera w zakresie od 0 do 10 (najwolniejsza szybkość, wartość domyślna: 6). |
Opcja na poziomie cq ustawia poziom kwantyzacji (0–63), aby kontrolować jakość koloru lub alfa.
Tworzenie obrazu AVIF z ustawieniami domyślnymi
Najbardziej podstawowymi parametrami umożliwiającymi uruchomienie avifencu są ustawienia plików wejściowych i wyjściowych.
./avifenc happy_dog.jpg happy_dog.avif
Zalecamy zakodowanie obrazu za pomocą tego wiersza poleceń, na przykład przy kwantyzacji na poziomie 18:
./avifenc --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim happy_dog.jpg happy_dog.avif
Avifenc ma wiele opcji, które wpływają zarówno na jakość, jak i na szybkość.
Jeśli chcesz zobaczyć te opcje i dowiedzieć się o nich więcej, uruchom ./avifenc
Masz teraz własny obraz AVIF.
Przyspieszam koder
Jednym z parametrów, który warto zmienić w zależności od liczby rdzeni komputera, jest parametr --jobs.
Ten parametr określa liczbę wątków, których avifenc użyje do utworzenia obrazów AVIF.
Spróbuj ją uruchomić w wierszu poleceń.
./avifenc --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim --jobs 8 happy_dog.jpg happy_dog.avif
Oznacza to, że AVIF ma użyć 8 wątków do tworzenia obrazu AVIF, co przyspiesza kodowanie AVIF około 5 razy.
Wpływ na największe wyrenderowanie treści (LCP)
Obrazy są typową kandydatką do pomiaru największego wyrenderowania treści (LCP). Jedną z typowych zaleceń dotyczących poprawy szybkości wczytywania obrazów LCP jest zapewnienie optymalizacji obrazu. Zmniejszając rozmiar transferu zasobu, skracasz czas wczytywania zasobów, który jest jednym z 4 kluczowych etapów, na których należy wykonywać działania związane z kandydatami LCP, które są obrazami.
Przy optymalizowaniu obrazów zdecydowanie zalecamy korzystanie z graficznej sieci CDN, ponieważ wymaga to znacznie mniej wysiłku niż skonfigurowanie potoków optymalizacji obrazów w procesie tworzenia witryny lub ręczne optymalizowanie obrazów za pomocą plików binarnych kodera. W niektórych projektach związane z obrazem sieci CDN mogą jednak być niedozwolone. W takim przypadku rozważ następujące kwestie podczas optymalizacji przy użyciu kodera AVIfenc:
- Zapoznaj się z opcjami kodera. Eksperymentując z niektórymi dostępnymi funkcjami kodowania AVIF, możesz uzyskać dodatkowe oszczędności przy utrzymaniu odpowiedniej jakości obrazu.
- AVIF umożliwia zarówno kodowanie stratne, jak i bezstratne. W zależności od zawartości obrazu jeden typ kodowania może być skuteczniejszy niż inny. Na przykład zdjęcia, które normalnie są wyświetlane w formacie JPEG, najlepiej sprawdzą się w przypadku kodowania stratnego, podczas gdy kodowanie bezstratne będzie prawdopodobnie najlepsze w przypadku zdjęć zawierających proste szczegóły lub grafiki normalnie wyświetlanych w formacie PNG.
- Jeśli korzystasz z pakietu graficznego z pomocą społeczności plików Imagemin, rozważ użycie pakietu imagemin-avif, aby umożliwić jego generowanie wariantów obrazu AVIF.
Eksperymentując z formatem AVIF, możesz poprawić czasy LCP witryny, jeśli kandydat LCP to obraz. Więcej informacji o optymalizacji LCP znajdziesz w przewodniku po optymalizacji LCP.
Podsumowanie
Korzystając z libaom, libavif i innych narzędzi open source, możesz uzyskać najlepszą jakość i wydajność obrazu dla swojej witryny za pomocą AVIF. Format jest stosunkowo nowy, trwa opracowujemy optymalizacje i integracje narzędzi. Jeśli masz pytania, komentarze lub prośby o dodanie funkcji, skorzystaj z listy adresowej av1-Dysku, społeczności AOM GitHub lub strony AVIF wiki.