Kompresowanie obrazów w witrynie za pomocą formatu AVIF

Jai Krishnan
Jai Krishnan
Wan-Teh Chang
Wan-Teh Chang

Często piszemy o problemach z rozmiarem witryn spowodowanym przez obrazy. Narzędzie Lighthouse wskazuje, kiedy wczytywanie obrazów ma negatywny wpływ na wrażenia użytkowników, np. wydłuża czas wczytywania lub odbiera przepustowość łącza innym, ważniejszym zasobom. Jednym ze sposobów rozwiązania tego problemu jest użycie nowoczesnej kompresji w celu zmniejszenia rozmiaru plików obrazów. Nową opcją dla programistów stron internetowych jest format obrazu AVIF. W tym wpisie na blogu opisujemy najnowsze aktualizacje narzędzi open source do obsługi formatu AVIF, przedstawiamy biblioteki kodowania libaom i libavif oraz instrukcję efektywnego kodowania obrazów AVIF za pomocą tych bibliotek.

AVIF to format obrazu oparty na kodzieku wideo AV1 i znormalizowany przez Alliance for Open Media. AVIF zapewnia znaczne korzyści w zakresie kompresji w porównaniu z innymi formatami obrazów, takimi jak JPEG i WebP. Dokładne oszczędności zależą od treści, ustawień kodowania i docelowej jakości, ale my i inni odnotowaliśmy oszczędności większe niż 50% w porównaniu z JPEG.

Obraz w formacie AVIF
1120 x 840 AVIF o rozmiary 18 769 bajtów (kliknij,aby powiększyć)
obraz w formacie JPEG,
1120 x 840 JPEG o rozmiary 20 036 bajtów (kliknij,aby powiększyć)

Dodatkowo AVIF dodaje obsługę kodeków i kontenerów dla nowych funkcji obrazu, takich jak High Dynamic Range i Wide Color Gamut, synteza ziarnistości filmu oraz dekodowanie progresywne.

Co nowego

Od czasu wprowadzenia obsługi formatu AVIF w Chrome M85 obsługa tego formatu w ekosystemie oprogramowania open source poprawiła się pod wieloma względami.

Libaom

Libaom to szyfrujący i deszyfrujący koder AV1 w wersji open source, który jest utrzymywany przez firmy zrzeszone w stowarzyszeniu Alliance for Open Media i używany w wielu usługach produkcyjnych Google i innych firm członkowskich. W czasie od wydania libaom 2.0.0 – mniej więcej w tym samym czasie, gdy Chrome dodało obsługę AVIF – do najnowszej wersji 3.1.0 wprowadzono znaczne optymalizacje kodowania obrazów statycznych. Obejmują one:

  • Optymalizacja pod kątem wielowątkowości i kodowania płytkowego.
  • 5-krotne zmniejszenie wykorzystania pamięci.
  • 6,5-krotne zmniejszenie wykorzystania procesora, jak widać na wykresie poniżej.
Użycie opcji speed=6, cq-level=18 w przypadku obrazów o rozdzielczości 8, 1 Mpix

Te zmiany znacznie obniżają koszty kodowania AVIF, zwłaszcza w przypadku najczęściej wczytywanych lub priorytetowych obrazów w Twojej witrynie. Wraz z uzyskiwaniem przez kodowanie z akceleracją sprzętową AV1 coraz większej dostępności na serwerach i w usługach w chmurze koszty tworzenia obrazów AVIF będą się nadal zmniejszać.

Libavif

Libavif, czyli implementacja referencyjna AVIF, to muxer i parsujący AVIF na licencji open source, który jest używany w Chrome do dekodowania obrazów AVIF. Można go też używać z libav om do tworzenia obrazów AVIF z dotychczasowych nieskompresowanych obrazów lub do transkodowania z dotychczasowych obrazów internetowych (JPEG, PNG itp.).

Libavif niedawno dodał obsługę szerszego zakresu ustawień kodera, w tym integrację z bardziej zaawansowanymi ustawieniami kodera libaom. Optymalizacje w potoku przetwarzania, takie jak szybka konwersja YUV na RGB za pomocą biblioteki libyuv oraz obsługa premultiplikowanej alfa, jeszcze bardziej przyspieszają proces dekodowania. I wreszcie obsługa trybu kodowania all-intra, która została dodana w wersji libaom 3.1.0, zapewnia wszystkie ulepszenia libaom wymienione powyżej.

Kodowanie obrazów AVIF za pomocą avifenc

Szybki sposób na eksperymentowanie z formatem AVIF to aplikacja Squoosh.app. Używa ona wersji biblioteki libavif w standardzie WebAssembly i oferuje wiele takich samych funkcji jak narzędzia wiersza poleceń. To łatwy sposób na porównanie formatu AVIF z innymi starymi i nowymi formatami. Dostępna jest też wersja wiersza poleceń Squoosh przeznaczona do aplikacji Node.

Jednak WebAssembly nie ma jeszcze dostępu do wszystkich podstawowych funkcji procesorów, więc jeśli chcesz uruchomić libavif z największą szybkością, zalecamy użycie kodera wiersza poleceń avifenc.

Aby dowiedzieć się, jak kodować obrazy AVIF, zaprezentujemy samouczek, w którym użyjemy tego samego źródłowego obrazu, który został użyty w powyższym przykładzie. Aby rozpocząć, musisz mieć:

Musisz też zainstalować pakiety programistyczne zlib, libpng i libjpeg. Polecenia dla dystrybucji Linuksa Debian i Ubuntu:

sudo apt-get install zlib1g-dev
sudo apt-get install libpng-dev
sudo apt-get install libjpeg-dev

Tworzenie kodera avifenc na poziomie wiersza poleceń

1. Pobierz kod

Sprawdź tag wersji libavif.

git clone -b v0.9.1 https://github.com/AOMediaCodec/libavif.git

2. Zmień katalog na libavif

cd libavif

Istnieje wiele sposobów konfigurowania avifenc i libavif. Więcej informacji znajdziesz na stronie libavif. Skompilujemy avifenc tak, aby był on połączony statycznie z biblioteką kodera i dekodera AV1, czyli libaom.

3. Pobieranie i kompilowanie libaom

Przejdź do katalogu zewnętrznych zależności libavif.

cd ext

Następne polecenie pobiera kod źródłowy libaom i kompiluje libaom w sposób statyczny.

./aom.cmd

Przejdź do katalogu libavif.

cd ..

4. Utwórz narzędzie do kodowania w wierszu 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 ..

Utwórz avifenc.

make

Udało Ci się skompilować avifenc.

Parametry wiersza poleceń avifenc

avifenc używa struktury wiersza poleceń:

./avifenc [options] input.file output.avif

Podstawowe parametry avifenc użyte w tym samouczku to:

avifenc
--min 0Ustaw minimalny kwantyfikator koloru na 0.
--max 63Ustaw maksymalny kwantyfikator koloru na 63.
--minalpha 0Ustaw minimalny kwantyfikator dla alfa na 0.
--maxalpha 63Ustaw maksymalny kwantyfikator dla alfa na 63.
-a end-usage=qUstaw tryb kontroli szybkości na tryb stałej jakości (Q).
-a cq-level=QUstaw poziom kwantowania zarówno koloru, jak i alfa na Q.
–a color:cq-level=QUstaw poziom kwantowania koloru na Q.
-a alpha:cq-level=QUstaw poziom kwantowania dla alfa na Q.
-a tune=ssimDostosowanie do SSIM (domyślnie jest to dostosowanie do PSNR)
--jobs JUżyj J wątków roboczych (domyślnie: 1)
--prędkość SUstaw szybkość kodowania od 0 do 10 (najwolniejsza do najszybszej, domyślnie 6).

Opcja cq-level ustawia poziom kwantowania (0–63) do kontrolowania jakości koloru lub alfa.

Tworzenie obrazu AVIF z ustawieniami domyślnymi

Najprostsze parametry, które należy ustawić, aby uruchomić avifenc, to pliki wejściowe i wyjściowe.

./avifenc happy_dog.jpg happy_dog.avif

Aby zakodować obraz na przykład z poziomem kwantowania 18, użyj tej linii poleceń:

./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 szybkość. Jeśli chcesz zobaczyć opcje i dowiedzieć się więcej o nich, uruchom ./avifenc

Masz już własny obraz AVIF.

Przyspieszanie kodowania

Jednym z parametrów, który warto zmienić w zależności od liczby rdzeni na komputerze, jest parametr --jobs. Ten parametr określa, ile wątków avifenc będzie używać do tworzenia obrazów AVIF. Spróbuj uruchomić to 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

Informuje avifenc, aby podczas tworzenia obrazu AVIF używał 8 wątków, co przyspiesza kodowanie AVIF około 5 razy.

Wpływ na największe wyrenderowanie treści (LCP)

Obrazy są często brane pod uwagę w przypadku wskaźnika największego wyrenderowania treści (LCP). Jedną z częstych rekomendacji dotyczących przyspieszania wczytywania obrazów LCP jest upewnienie się, że obraz jest zoptymalizowany. Zmniejszenie rozmiaru przesyłanych zasobów poprawia ich czas wczytywania, który jest jedną z 4 kluczowych faz, na które należy zwrócić uwagę w przypadku kandydatów LCP będących obrazami.

Używanie CDN dla obrazów jest zdecydowanie zalecane podczas optymalizowania obrazów, ponieważ wymaga znacznie mniej wysiłku niż konfigurowanie ścieżek optymalizacji obrazów w procesie kompilacji witryny lub ręczne optymalizowanie obrazów za pomocą binarnych koderów. Jednak w przypadku niektórych projektów CDN obrazów może być zbyt kosztowny. Jeśli tak jest w Twoim przypadku, podczas optymalizacji za pomocą kodera avifenc weź pod uwagę te kwestie:

  • Zapoznaj się z opcjami oferowanymi przez koder. Możesz uzyskać dodatkowe oszczędności, zachowując przy tym odpowiednią jakość obrazu, eksperymentując z niektórymi dostępnymi funkcjami kodowania AVIF.
  • Format AVIF umożliwia kodowanie z stratami i bez strat. W zależności od zawartości obrazu jeden typ kodowania może działać lepiej niż inny. Na przykład zdjęcia, które są zwykle wyświetlane jako pliki JPEG, będą prawdopodobnie najlepiej wyglądać po zastosowaniu kodowania stratnego, podczas gdy kodowanie bezstratne będzie prawdopodobnie najlepsze w przypadku obrazów zawierających proste szczegóły lub rysunki liniowe, które są zwykle wyświetlane jako pliki PNG.
  • Jeśli używasz pakietu zbiorczego z obsługą społeczności dla imagemin, rozważ użycie pakietu imagemin-avif, aby umożliwić pakietowi zbiorczemu generowanie wersji obrazów w formacie AVIF.

Eksperymentując z formatem AVIF, możesz poprawić czas LCP witryny w przypadkach, gdy element LCP to obraz. Więcej informacji o optymalizacji LCP znajdziesz w przewodniku na temat optymalizacji LCP.

Podsumowanie

Korzystając z libav, libavif i innych narzędzi open source, możesz uzyskać najlepszą jakość obrazu i najlepszą wydajność swojej witryny przy użyciu AVIF. Ten format jest stosunkowo nowy, a optymalizacje i integracje narzędzi są w trakcie aktywnego wdrażania. Jeśli masz pytania, komentarze lub sugestie dotyczące funkcji, skontaktuj się z nami na liście mailingowej av1-discuss, w społeczności GitHub AOM lub w wiki AIFF.