Wyświetlanie obrazów AVIF

1. Wprowadzenie

Obrazy stanowią średnio ponad 60% bajtów potrzebnych do wczytania strony internetowej. Dzięki formatowi AVIF możesz zmniejszyć rozmiar obrazów i przyspieszyć wczytywanie witryny.

Co to jest AVIF?

AVIF to format pliku graficznego pochodzący z bitstreamu wideo AV1. Format AVIF został opracowany z myślą o wydajnej kompresji.

Dlaczego AVIF?

Obrazy w formacie AVIF są znacznie mniejsze niż obrazy w formatach JPEG, PNG, GIF lub WebP, a ich jakość jest taka sama lub lepsza.

Czego się nauczysz

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

Czego potrzebujesz

• Dowolna główna przeglądarka.
• Edytor tekstu
• cmake
• git
• ninja
• Obraz. Jeden z nich znajdziesz pod tym linkiem.
• FFmpeg

2. Tworzenie obrazów AVIF za pomocą Squoosh

Squoosh to aplikacja internetowa do kompresji obrazów, która może konwertować obrazy do formatu AVIF.

1. Otwórz Squoosh.
2. Przeciągnij obraz lokalny do Squoosh.

3. W menu Kompresuj wybierz AVIF.

Squoosh skompresuje obraz do formatu AVIF. Gdy Squoosh skończy, w prawym dolnym rogu pojawi się przycisk pobierania z informacjami statystycznymi o obrazie AVIF.

Oryginalny obraz przykładowy miał rozmiar 3340 kB, a skompresowany – 378 kB. Obraz przykładowy został skompresowany prawie 10 razy bardziej niż obraz oryginalny.

4. Pobierz obraz AVIF.

Kliknij przycisk pobierania, a obraz AVIF zostanie zapisany na dysku lokalnym.

Aby wyświetlić obraz AVIF, przeciągnij go do Chrome.

Masz już swój własny obraz AVIF.

3. Tworzenie kodera wiersza poleceń avifenc

avifenc to aplikacja wiersza poleceń, która może konwertować obrazy PNG i JPEG na obrazy AVIF. avifenc używa biblioteki libavif, która może dekodować i kodować obrazy AVIF. Jeśli masz dużo obrazów, które chcesz przekonwertować na format AVIF, dobrym rozwiązaniem będzie użycie kodera wiersza poleceń avifenc.

Chrome używa biblioteki 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 sposobów konfigurowania avifenc i libavif do kompilacji. Więcej informacji znajdziesz na stronie libavif. Utworzymy avifenc tak, aby był statycznie połączony z koderem libaom, dekoderem dav1d i bibliotekami przetwarzania libyuv.

libyuv jest ważna, ponieważ przyspiesza konwersję kolorów.

3. 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 -DAVIF_CODEC_AOM=LOCAL -DAVIF_CODEC_DAV1D=LOCAL -DAVIF_LIBYUV=LOCAL -DBUILD_SHARED_LIBS=OFF -DAVIF_BUILD_APPS=ON ../

Utwórz avifenc.

make

avifenc został utworzony.

4. Tworzenie obrazów AVIF za pomocą avifenc

1. Utwórz obraz AVIF z ustawieniami domyślnymi.

Najbardziej podstawowe parametry, które trzeba ustawić, aby uruchomić avifenc, to pliki wejściowe i wyjściowe.

./avifenc happy_dog.jpg example.avif

Masz już swój drugi obraz AVIF.

2. Zmiana jakości kodowania AVIF.

Zwykle jedynym parametrem, który możesz chcieć zmienić w kodowaniu AVIF, jest parametr quality. quality to parametr, który określa jakość skompresowanego obrazu w zależności od rozmiaru pliku. Na przykład plik o wysokiej jakości (-q 90) będzie znacznie większy niż plik o niskiej jakości (-q 20), ale będzie wyglądał znacznie lepiej.

avifenc ma wiele opcji, które wpływają zarówno na jakość, jak i szybkość. Jeśli chcesz zobaczyć opcje i dowiedzieć się o nich więcej, uruchom ./avifenc.

5. Renderowanie obrazów AVIF na stronie internetowej

Teraz pokażemy światu Twoją 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 (example.avif) do tego samego katalogu co avif_example.html.

Używamy elementu picture, aby renderować obraz AVIF, jeśli przeglądarka obsługuje ten format, a jeśli nie, to obraz JPEG. Więcej informacji o elem1encie picture.

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

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

Obraz AVIF powinien być teraz renderowany w Chrome. Możesz to sprawdzić, klikając obraz prawym przyciskiem myszy i wybierając opcję Save image as.... Powinno się otworzyć okno z plikiem example.avif. Innym sposobem jest otwarcie Narzędzi deweloperskich w Chrome i sprawdzenie, czy plik example.avif został pobrany.

6. Tworzenie animowanych obrazów AVIF za pomocą FFmpeg

Instalowanie FFmpeg w systemie wykracza poza zakres tego ćwiczenia. Więcej informacji o tym, jak zainstalować FFmpeg w systemie, znajdziesz w dokumentacji FFmpeg.

Utworzyłem dla Ciebie 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.

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

1. Utwórz animowany obraz AVIF.

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

ffmpeg -i ice_qcif_15fps.y4m animated.avif

Masz już swój własny animowany obraz AVIF.

2. Renderuj animowany obraz AVIF na stronie internetowej.

Utwórz plik o nazwie avif_animated_example.html.

Oto plik GIF, którego możesz użyć, jeśli nie masz źródłowego pliku multimedialnego: ice_qcif_15fps.gif.

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 (w powyższym przypadku ice_qcif_15fps.gif) i plik AVIF (animated.avif) do tego samego katalogu co avif_animated_example.html.

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

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

Animowany obraz AVIF powinien być teraz renderowany w Chrome.

Jeśli używasz podanych przykładowych multimediów, powinny one wyglądać mniej więcej tak:

Możesz sprawdzić, czy jest to animowany obraz AVIF, klikając go prawym przyciskiem myszy i wybierając opcję Save image as.... Powinno się otworzyć okno z plikiem animated.avif. Innym sposobem jest otwarcie Narzędzi deweloperskich w Chrome i sprawdzenie, czy plik animated.avif został pobrany.

7. Tworzenie animowanych obrazów AVIF za pomocą avifenc

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

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

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

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

2. Utwórz animowany obraz AVIF.

Utworzyłem dla Ciebie 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 już swój drugi animowany obraz AVIF.

3. Renderuj animowany obraz AVIF na stronie internetowej.

Utwórz plik o nazwie avif_animated_example.html.

Utworzyłem dla Ciebie plik GIF, którego możesz użyć, jeśli nie masz źródłowego pliku multimedialnego: ice_qcif_15fps.gif.

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 (w powyższym przypadku ice_qcif_15fps.gif) i plik AVIF (animated.avif) do tego samego katalogu co avif_animated_example.html.

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

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

Animowany obraz AVIF powinien być teraz renderowany w Chrome.

Jeśli używasz podanych przykładowych multimediów, powinny one wyglądać tak:

Z wyjątkiem tego, że animowany obraz AVIF ma znacznie lepszą jakość.

Możesz sprawdzić, czy jest to animowany obraz AVIF, klikając go prawym przyciskiem myszy i wybierając opcję Save image as.... Powinno się otworzyć okno z plikiem animated.avif. Innym sposobem jest otwarcie Narzędzi deweloperskich w Chrome i sprawdzenie, czy plik animated.avif został pobrany.

5. Zmiana jakości kodowania AVIF.

Plik ice_qcif_15fps.gif jest około 7 razy większy i ma znacznie gorszą jakość. Możesz zmienić jakość AVIF, aby mniej więcej odpowiadała jakości ice_qcif_15fps.gif, zmieniając parametr jakości na 20.

./avifenc -q 20 ice_qcif_15fps.y4m animated.avif

Teraz animowany plik AVIF i ice_qcif_15fps.gif mają podobną jakość, ale plik GIF jest około 22 razy większy.

8. Gratulacje!

Ukończono ćwiczenie z kodowania dotyczące wyświetlania obrazów AVIF.

Mamy nadzieję, że wiesz już, jak format AVIF może pomóc zmniejszyć rozmiar obrazów i zwiększyć wydajność ich przesyłania w internecie. Więcej informacji o funkcjach AVIF znajdziesz w świetnym poście Jake'a Archibalda.