Często piszemy o dużej liczbie obrazów w witrynach. O tym, że ładowanie obrazów ma negatywny wpływ na wrażenia użytkownika, np. załadowanie obrazu, narzędzia takie jak Lighthouse, np. wydłużają czas wczytywania czy odbierają przepustowość od ważniejszych zasobów. Jednym ze sposobów rozwiązania tego problemu jest zastosowanie nowoczesnej kompresji, która zmniejsza rozmiar plików. Nową opcją dla programistów stron internetowych jest format obrazu AVIF. W tym poście omawiamy najnowsze aktualizacje narzędzi open source w formatach AVIF, biblioteki kodowania libaom i libavif oraz samouczek na temat tego, jak używać tych bibliotek do wydajnego kodowania obrazów AVIF.
AVIF to format obrazu oparty na kodeku wideo AV1 i ustandaryzowany przez Alliance for Open Media. Format AVIF znacznie zwiększa kompresję w porównaniu z innymi formatami obrazów, takimi jak JPEG i WebP. Konkretne oszczędności zależą od treści, ustawień kodowania i celu jakości, ale my i inni zaobserwowaliśmy ponad 50% oszczędności w porównaniu z formatem JPEG.
AVIF dodaje też obsługę kodeka i kontenera w przypadku nowych funkcji obrazu, takich jak High Dynamic Range i Wide Color Gamut, synteza ziarna kliszy oraz dekodowanie progresywne.
Nowości
Od wprowadzenia obsługi AVIF w Chrome M85 obsługa AVIF w ekosystemie open source znacznie wzrosła.
Libaom
Libaom to koder i dekoder typu open source AV1 udostępniany przez firmy należące do Alliance for Open Media i używany w wielu usługach produkcyjnych Google i innych firm członkowskich. Między wersją libaom 2.0.0 (mniej więcej w tym samym czasie, kiedy Chrome dodał obsługę AVIF) a ostatnią wersją 3.1.0, w bazie kodu zostały wprowadzone istotne optymalizacje kodowania obrazów. Są to między innymi:
- Optymalizacja pod kątem wielowątkowości i kodowania kafelków.
- 5 razy mniejsze wykorzystanie pamięci.
- 6,5 raza mniejsze wykorzystanie procesora, co widać na wykresie poniżej.
Zmiany te znacznie zmniejszają koszty kodowania AVIF – w szczególności dotyczy to najczęściej wczytywanych obrazów lub obrazów o najwyższym priorytecie w witrynie. W miarę jak kodowanie AV1 wspomagane sprzętowo będzie coraz bardziej dostępne na serwerach i w usługach w chmurze, koszty tworzenia obrazów AVIF będą stale spadać.
Libavif
Libavif, referencyjna implementacja AVIF, to dostępny na licencji open source Muxer i parser AVIF używany w Chrome do dekodowania obrazów AVIF. Można go również używać z libaom do tworzenia obrazów AVIF na podstawie istniejących nieskompresowanych obrazów lub transkodowania z istniejących obrazów z internetu (JPEG, PNG itp.).
Firma Libavif niedawno dodała obsługę szerszego zakresu ustawień koderów, w tym integrację z bardziej zaawansowanymi ustawieniami kodera libaom. Optymalizacje w procesie przetwarzania, takie jak szybka konwersja z YUV na RGB przy użyciu libyuv i wstępnie mnożone wartości alfa, jeszcze bardziej przyspieszają proces dekodowania. Obsługa trybu kodowania all-intra dodana w wersji libaom 3.1.0 zapewnia wszystkie wymienione powyżej ulepszenia libaom.
Kodowanie obrazów AVIF za pomocą avifenc
Szybkim sposobem na eksperyment z AVIF jest Squoosh.app. Squoosh uruchamia wersję libavif w formacie WebAssembly i udostępnia wiele funkcji dostępnych w narzędziach wiersza poleceń. Jest to prosty sposób na porównanie formatu AVIF z innymi starymi i nowymi formatami. Istnieje też wersja interfejsu wiersza poleceń Squoosh przeznaczona dla aplikacji Node.
WebAssembly nie ma jeszcze dostępu do wszystkich procesorów podstawowych o wydajności, więc jeśli chcesz jak najszybciej uruchamiać libavif, zalecamy koder wiersza poleceń avifenc.
Aby pokazać, jak kodować obrazy w formacie AVIF, zaprezentujemy samouczek przy użyciu tego samego obrazu źródłowego, który został użyty w powyższym przykładzie. Na początek musisz mieć:
Musisz też zainstalować pakiety programistyczne dla zlib, libpng i libjpeg. Polecenia do dystrybucji Debian i Ubuntu Linux to:
sudo apt-get install zlib1g-dev
sudo apt-get install libpng-dev
sudo apt-get install libjpeg-dev
Tworzenie kodera wiersza poleceń avifenc
1. Pobierz kod
Sprawdź 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 programów avifenc i libavif. Więcej informacji znajdziesz na stronie libavif. Planujemy utworzyć avifenc, który będzie statycznie połączony z biblioteką kodera i dekodera AV1 libaom.
3. Pobierz i stwórz libaom
Przejdź do katalogu zewnętrznych zależności libavif.
cd ext
Następne polecenie pobierze kod źródłowy libaom i statycznie utworzy 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 avifenc.
make
Udało Ci się zbudować awifan!
Parametry wiersza poleceń avifenc
Aplikacja avifenc używa struktury wiersza poleceń:
./avifenc [options] input.file output.avif
Podstawowe parametry aplikacji avifenc używane w tym samouczku to:
| Awifenc | |
|---|---|
| --min 0 | Ustaw minimalny kwantyzator koloru na 0 |
| --maks. 63 | Ustaw maksymalny kwantyzator koloru na 63 |
| --minalfa 0 | Ustaw kwantyzator minimalnego dla alfa na wartość 0 |
| --maxalpha 63 | Ustaw maksymalny kwantyzator dla alfa na 63 |
| -a end-usage=q | Ustaw tryb sterowania szybkością na tryb Stała jakość (Q) |
| -a cq-level=Q | Ustaw poziom kwantyzacji dla koloru i alfa do Q |
| -a color:cq-level=Q | Ustaw poziom kwantyzacji dla koloru na Q |
| -a alpha:cq-level=Q | Ustaw poziom kwantyzacji dla wartości alfa na Q |
| -tune=sim | Dostrój na SSIM (domyślnie jest dostrajanie na PSNR) |
| – zadania Jobs | Używaj wątków instancji roboczych J (domyślnie: 1) |
| --szybkość S | Ustaw szybkość kodera w zakresie 0–10 (najwolniejszy ruch, wartość domyślna: 6) |
Opcja cq-level ustawia poziom kwantyzacji (0–63), który umożliwia kontrolowanie jakości koloru lub alfa.
Tworzenie obrazu AVIF z ustawieniami domyślnymi
Najbardziej podstawowymi parametrami pozwalającymi na uruchomienie aplikacji avifenc jest ustawienie plików wejściowych i wyjściowych.
./avifenc happy_dog.jpg happy_dog.avif
Do zakodowania obrazu (na przykład na poziomie 18) zalecamy zakodowanie tego obrazu:
./avifenc --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim happy_dog.jpg happy_dog.avif
Avifenc udostępnia wiele opcji, które wpływają zarówno na jakość, jak i szybkość.
Jeśli chcesz zobaczyć dostępne opcje i dowiedzieć się o nich więcej, po prostu uruchom polecenie ./avifenc
Masz teraz własny obraz AVIF.
Przyspieszanie kodera
Jednym z parametrów, które warto zmienić w zależności od liczby rdzeni na komputerze, jest --jobs.
Ten parametr określa liczbę wątków, których avifenc będzie używać do tworzenia obrazów AVIF.
Spróbuj uruchomić to z poziomu wiersza 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
Powoduje to, że do tworzenia obrazu AVIF używany jest 8 wątków. Kodowanie AVIF przyspiesza około 5 razy.
Wpływ na największe wyrenderowanie treści (LCP)
Obrazy są częstym kandydatem do określania największego wyrenderowania treści (LCP). Jednym z częstych zaleceń dotyczących przyspieszenia wczytywania obrazów LCP jest zoptymalizowanie obrazu. Zmniejszając rozmiar transferu zasobu, skracasz jego czas wczytywania zasobu, który jest jednym z 4 kluczowych etapów, na które należy kierować reklamy w przypadku kandydatów LCP, które są obrazami.
Do optymalizacji obrazów zdecydowanie zalecamy korzystanie z sieci CDN z obrazami, ponieważ wymaga ona znacznie mniej wysiłku niż konfigurowanie potoków optymalizacji obrazów w procesie kompilacji witryny lub ręczne korzystanie z plików binarnych kodera w celu ręcznej optymalizacji obrazów. Jednak w przypadku niektórych projektów korzystanie z sieci CDN z obrazami może być płatne. 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. Eksperymentując z dostępnymi funkcjami kodowania AVIF, możesz uzyskać dodatkowe oszczędności przy zachowaniu wystarczającej jakości zdjęć.
- Format AVIF umożliwia zarówno stratne, jak i bezstratne kodowanie. W zależności od zawartości obrazu jeden typ kodowania może być skuteczniejszy od innego. Na przykład zdjęcia, które są zwykle wyświetlane jako pliki JPEG, najlepiej sprawdzają się w przypadku kodowania stratnego, natomiast kodowanie bezstratne jest prawdopodobnie najlepsze w przypadku obrazów zawierających proste szczegóły lub grafiki, które normalnie są wyświetlane jako pliki PNG.
- Jeśli korzystasz z pakietu i pomocy społeczności dotyczącej Imagemin, rozważ użycie pakietu imagemin-avif, aby umożliwić mu generowanie wariantów obrazów w formacie AVIF.
Eksperymentując z formatem AVIF, możesz poprawić wskaźnik LCP witryny w przypadku, gdy kandydat 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, za pomocą formatu AVIF możesz uzyskać najlepszą jakość obrazów i zdjęć w swojej witrynie. Format wciąż jest stosunkowo nowy, a wciąż pracujemy nad optymalizacją i integracją narzędzi. Jeśli masz pytania, komentarze lub prośby o dodanie funkcji, skontaktuj się z nami za pomocą listy adresowej av1-dyskusja, społeczności AOM GitHub lub witryny wiki AVIF.