Wyświetlanie obrazów AVIF

1. Wprowadzenie

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

Co to jest AVIF?

AVIF to format obrazu pochodzący ze strumienia bitów wideo AV1. Format AVIF został stworzony z myślą o wydajnej kompresji.

Dlaczego AVIF?

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

Czego się nauczysz

Jak tworzyć obrazy AVIF z obrazów
Jak renderować obrazy AVIF na stronie internetowej

Czego potrzebujesz

dowolnej popularnej przeglądarki,
edytor tekstu,
cmake
git
ninja
obrazu, Podałem(-am) go tutaj
FFmpeg

2. Tworzenie obrazów AVIF za pomocą Squoosh

Squoosh to internetowa aplikacja do kompresji obrazów. Umożliwia łatwe kompresowanie obrazów do formatu AVIF.

Otwórz stronę https://squoosh.app.
Upuść obraz lokalny w Squoosh.

Zrzut ekranu Squoosh

W menu Kompresuj wybierz AVIF.

Menu Squoosh

Squoosh skompresuje obraz do formatu AVIF. Po zakończeniu działania Squoosh w prawym dolnym rogu pojawi się przycisk pobierania ze statystykami dotyczącymi obrazu AVIF.

Przycisk pobierania Squoosh

Oryginalny przykładowy obraz miał rozmiar 3340 kB, a skompresowany – 378 kB. Przykładowy obraz został skompresowany do rozmiaru prawie 10 razy mniejszego niż oryginalny obraz.

Pobierz obraz AVIF

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

Masz już własny obraz AVIF.

3. Kompilowanie kodera wiersza poleceń avifenc

avifenc to aplikacja wiersza poleceń, która może konwertować obrazy PNG i JPEG na obrazy AVIF. avifenc korzysta z biblioteki libavif, która może dekodować i kodować obrazy AVIF. Jeśli chcesz przekonwertować wiele obrazów na format AVIF, dobrym wyborem będzie użycie kodera wiersza poleceń avifenc.

Pobierz kod.

git clone https://github.com/AOMediaCodec/libavif.git

Przejdź do katalogu libavif.

cd libavif/

Istnieje wiele różnych sposobów konfigurowania kompilacji avifenc i libavif. Więcej informacji znajdziesz na stronie libavif. Zamierzamy utworzyć narzędzie avifenc, które będzie statycznie połączone z enkoderem libaom, dekoderem dav1d i bibliotekami przetwarzania libyuv.

Skompiluj 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 ../

Kompilowanie avifenc

make

Kompilacja avifenc zakończyła się sukcesem.

4. Tworzenie obrazów AVIF za pomocą avifenc

Utwórz obraz AVIF z ustawieniami domyślnymi.

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

./avifenc happy_dog.jpg example.avif

Masz już drugi obraz AVIF.

Zmiana jakości kodowania AVIF.

Zwykle jedynym parametrem, który warto zmienić w przypadku kodowania AVIF, jest parametr quality. quality to parametr, który wpływa na jakość skompresowanego obrazu w zamian za rozmiar pliku. Np. 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.

5. renderować obrazy AVIF na stronie internetowej;

Teraz pokażmy światu efekty Twojej ciężkiej pracy.

Utwórz stronę internetową, która będzie wyświetlać obraz AVIF.

Utwórz plik o nazwie avif_example.html.

Otwórz plik 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 co avif_example.html.

Używamy elementu picture do renderowania obrazu AVIF, jeśli przeglądarka obsługuje ten format. Jeśli nie, używamy obrazu JPEG. Więcej informacji o elemencie picture znajdziesz tutaj.

Otwórz stronę w Chrome.

Jednym ze sposobów otwarcia pliku HTML jest przeciągnięcie go do Chrome avif_example.html. Innym sposobem otwarcia pliku HTML jest udostępnienie go 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 Save image as.... Powinno się otworzyć okno dialogowe z example.avif. Możesz też otworzyć Narzędzia deweloperskie w Chrome i sprawdzić, czy plik example.avif został pobrany.

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

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ż własny animowany obraz AVIF.

Wyświetl animowany obraz AVIF na stronie internetowej.

Utwórz plik o nazwie avif_animated_example.html.

Otwórz plik 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 tym przypadku ice_qcif_15fps.gif) i plik AVIF (animated.avif) do tego samego katalogu co avif_animated_example.html.

Otwórz stronę w Chrome.

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

Animowany obraz AVIF powinien być teraz renderowany w Chrome.

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

Animowane lodowisko

Aby sprawdzić, czy obraz AVIF jest animowany, kliknij go prawym przyciskiem myszy i wybierz Save image as.... Powinno się otworzyć okno z animated.avif. Możesz też otworzyć Narzędzia deweloperskie w Chrome i sprawdzić, czy plik animated.avif został pobrany.

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

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

avifenc obsługuje format y4m jako dane wejściowe do tworzenia animowanych obrazów AVIF. Świetnym narzędziem do tworzenia plików Y4M jest FFmpeg.

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

Utwórz animowany obraz AVIF.

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

./avifenc ice_qcif_15fps.y4m animated.avif

Masz już drugi animowany obraz AVIF.

Wyświetl animowany obraz AVIF na stronie internetowej.

Utwórz plik o nazwie avif_animated_example.html.

Otwórz plik 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 tym przypadku ice_qcif_15fps.gif) i plik AVIF (animated.avif) do tego samego katalogu co avif_animated_example.html.

Otwórz stronę w Chrome.

Animowany obraz AVIF powinien być teraz renderowany w Chrome.

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

Animowane lodowisko

Zmiana jakości kodowania AVIF.

Plik ice_qcif_15fps.gif jest około 7 razy większy i ma znacznie gorszą jakość. Jakość pliku AVIF możesz dostosować do jakości pliku ice_qcif_15fps.gif, zmieniając parametr jakości na 20.

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

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

8. Gratulacje!

To już koniec tego modułu.

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