Wyświetlanie obrazów AVIF

1. Wprowadzenie

Obrazy stanowią średnio ponad 60% bajtów niezbędnych do wczytania strony internetowej. Format AVIF pozwala zmniejszyć obrazy i przyspieszyć wczytywanie witryny.

Co to jest AVIF?

AVIF to nowy format obrazu pozyskany z bitrema wideo AV1. Format AVIF został stworzony z myślą o wydajności kompresji.

Dlaczego AVIF?

Obrazy w formacie AVIF są znacznie mniejsze niż obrazy JPEG, PNG, GIF i WebP tej samej lub lepszej jakości.

Czego się nauczysz

• Jak tworzyć obrazy AVIF na podstawie własnych obrazów
• Jak renderować obrazy AVIF na stronie internetowej

Czego potrzebujesz

• Chrome w wersji 85 lub nowszej,
• Edytor tekstu
• cmake
• git
• ninja
• Obraz. Podałem go tutaj
• FFmpeg

2. Tworzenie obrazów AVIF w aplikacji Squoosh

Squoosh to aplikacja internetowa do kompresji obrazów. Aplikacja Squoosh pozwala łatwo skompresować obrazy do formatu AVIF.

1. Otwórz https://squoosh.app.
2. Upuść lokalny obraz w aplikacji Squoosh.

3. Wybierz AVIF z menu Kompresuj.

Aplikacja Squoosh skompresuje obraz do formatu AVIF. Po zakończeniu działania aplikacji Squoosh wyświetli się przycisk pobierania z pewnymi statystykami dotyczącymi obrazu AVIF w prawym dolnym rogu.

Pierwotny przykładowy obraz miał rozmiar 3340 kB, a skompresowany – 378 kB. Przykładowy obraz został skompresowany prawie 10 razy mniejszy niż obraz oryginalny.

4. Pobierz obraz AVIF

Kliknij przycisk pobierania. Obraz AVIF zostanie zapisany na dysku lokalnym.

Możesz wyświetlić obraz AVIF, przeciągając go do Chrome.

Masz teraz własny obraz AVIF.

3. Tworzenie awfencjonera kodera wiersza poleceń

avifenc to aplikacja wiersza poleceń, która konwertuje obrazy PNG i JPEG na AVIF. Avifenc używa biblioteki libavif, która potrafi dekodować i kodować obrazy AVIF. Jeśli masz dużo obrazów, które chcesz przekonwertować do formatu AVIF, dobrym rozwiązaniem będzie skorzystanie z kodera wiersza poleceń avifenc.

Chrome używa libavif do renderowania obrazów AVIF.

1. Pobierz kod.

git clone 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 rozszerzeń libavif.

cd ext

Następne polecenie pobierze kod źródłowy libaom i statycznie zbuduje bibliotekę.

./aom.cmd

Zmień katalog na libavif.

cd ../

4. Utwórz narzędzie 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 -DAVIF_LOCAL_AOM=1 -DAVIF_CODEC_AOM=1 -DBUILD_SHARED_LIBS=0 -DAVIF_BUILD_APPS=1 ../

Buduj awifen.

make

Udało Ci się zbudować awifen!

4. Tworzenie obrazów AVIF przy użyciu avifenc

1. Utwórz obraz 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 example.avif --min 0 --max 63 -a end-usage=q -a cq-level=32 -a tune=ssim -a deltaq-mode=3 -a sharpness=3 -y 420

"–min 0 –max 63 -a end-usage=q -a cq-level=32 -a tune=ssim -a deltaq-mode=3 -ostrość=3 -y 420" to zalecane ustawienia dla obrazów 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 drugi obraz AVIF.

2. Przyspieszam koder.

Parametr, który można zmienić w zależności od liczby rdzeni komputera, to parametr --jobs. Ten parametr określa liczbę wątków, których avifenc użyje do utworzenia obrazów AVIF. Spróbuj uruchomić ten wiersz polecenia.

./avifenc happy_dog.jpg example.avif --jobs 8

Dzięki temu podczas tworzenia obrazu AVIF AVIF ma użyć 8 wątków. Na moim komputerze to przyspiesza kodowanie AVIF 5x.

5. Renderuj obrazy AVIF na stronie internetowej.

Teraz pokaż wszystkim swoją ciężką pracę.

1. Utwórz stronę internetową, na której będzie wyświetlany obraz AVIF.

Utwórz plik o nazwie avif_example.html.

Otwórz avif_example.html w edytorze tekstu i wpisz ten kod:

<html>
  <head>
    <title>AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="example.avif" />
      <img src="happy_dog.jpg" />
    </picture>
  </body>
</html>

Skopiuj plik źródłowy (w moim przypadku happy_dog.jpg) i plik AVIF (eaxmple.avif) do tego samego katalogu, w którym znajduje się avif_example.html.

Jeśli przeglądarka obsługuje format AVIF, do renderowania obrazu AVIF używamy elementu . Jeśli przeglądarka tego nie obsługuje, używany jest plik JPEG. Więcej informacji o znajdziesz tutaj.

2. Otwórz stronę internetową w Chrome.

Jednym ze sposobów otwarcia pliku HTML jest przeciągnięcie pliku avif_example.html do Chrome. Innym sposobem otwarcia pliku HTML jest wyświetlenie pliku avif_example.html z serwera HTTP.

Teraz obraz AVIF powinien wyświetlić się w Chrome. Aby to sprawdzić, kliknij obraz prawym przyciskiem myszy i wybierz Save image as.... Powinno się otworzyć okno dialogowe z example.avif. Możesz też otworzyć Narzędzia dla deweloperów w Chrome i sprawdzić, czy aplikacja example.avif została pobrana.

6. Tworzenie animowanych obrazów AVIF

1. Przekonwertuj multimedia źródłowe na format y4m.

avifenc obsługuje jako dane wejściowe y4m do tworzenia animowanych obrazów AVIF. Świetnym sposobem na tworzenie plików Y4m jest użycie FFmpeg.

Pliki Y4m nie są kompresowane, więc mogą być bardzo duże.

ffmpeg -i input.gif -pix_fmt yuv420p -f yuv4mpegpipe output.y4m

2. Utwórz animowany obraz AVIF.

Utworzyliśmy plik y4m, którego możesz użyć, jeśli nie masz źródłowego pliku multimedialnego: ice_qcif_15fps.y4m. Plik pochodzi z Xiph.org Video Test Media.

Uruchom to polecenie, aby utworzyć animowany obraz AVIF z pliku y4m.

avifenc ice_qcif_15fps.y4m animated.avif

Masz teraz własny animowany obraz AVIF.

3. Renderuj animowany obraz AVIF na stronie internetowej.

Utwórz plik o nazwie avif_animated_example.html.

Mam dla Ciebie plik GIF. Jeśli nie masz źródłowego pliku multimedialnego: ice_qcif_15fps.gif.

Pamiętaj, że plik GIF jest około 35 razy większy i znacznie gorsza.

Otwórz avif_animated_example.html w edytorze tekstu i wpisz ten kod:

<html>
  <head>
    <title>Animated AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="animated.avif" />
      <img src="ice_qcif_15fps.gif" />
    </picture>
  </body>
</html>

Skopiuj plik źródłowy (ice_qcif_15fps.gif) i plik AVIF (animated.avif) do tego samego katalogu, w którym znajduje się avif_animated_example.html.

4. Otwórz stronę internetową w Chrome.

Jednym ze sposobów otwarcia pliku HTML jest przeciągnięcie pliku avif_animated_example.html do Chrome. Innym sposobem otwarcia pliku HTML jest wyświetlenie pliku avif_animated_example.html z serwera HTTP.

Animowany obraz AVIF powinien wyświetlić się w Chrome.

Jeśli użyjesz dostarczonych przykładowych multimediów, plik powinien wyglądać tak:

Z wyjątkiem animowanego AVIF, znacznie lepsza jakość.

Aby sprawdzić, czy jest to animowany obraz AVIF, kliknij go prawym przyciskiem myszy i wybierz Save image as.... Powinno się otworzyć okno dialogowe z animated.avif. Możesz też otworzyć Narzędzia dla deweloperów w Chrome i sprawdzić, czy aplikacja animated.avif została pobrana.

7. Gratulacje!

To już koniec modułu dotyczącego kodowania obrazów AVIF.

Mamy nadzieję, że jest dla Ciebie jasne, w jaki sposób format AVIF może pomóc zmniejszyć rozmiar obrazów i zwiększyć ich skuteczność podczas przesyłania przez internet. Więcej informacji o funkcjach AVIF znajdziesz w świetnym poście autorstwa Jake'a Archibalda.