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 obrazu 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 czy 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

2. Tworzenie obrazów AVIF za pomocą Squoosh

Squoosh to aplikacja internetowa do kompresji obrazów. Dzięki niej możesz łatwo kompresować obrazy do formatu AVIF.

  1. Otwórz https://squoosh.app.
  2. Przeciągnij obraz lokalny do Squoosh.

Squoosh screenshot

  1. W polu rozwijanym Compress (Kompresuj) wybierz AVIF.

Menu Squoosh

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

Przycisk pobierania Squoosh

Oryginalny przykładowy obraz miał rozmiar 3340 kB, a skompresowany – 378 kB. Rozmiar przykładowego obrazu został zmniejszony prawie 10-krotnie!

  1. Pobierz obraz AVIF.

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

Masz już 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.

  1. Pobierz kod.
git clone https://github.com/AOMediaCodec/libavif.git
  1. 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.

  1. 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ż drugi obraz AVIF!

  1. Zmienianie jakości kodowania AVIF.

Zwykle jedynym parametrem, który możesz chcieć zmienić w przypadku kodowania AVIF, jest parametr quality. quality to parametr, który określa kompromis między jakością skompresowanego obrazu a rozmiarem 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 też wyglądać znacznie lepiej.

5. Renderowanie obrazów AVIF na stronie internetowej.

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

  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 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 elemencie picture znajdziesz tutaj.

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

Aby otworzyć plik HTML, możesz przeciągnąć 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... (Zapisz obraz jako...). Powinno się otworzyć okno z plikiem 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

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

  1. Renderuj animowany obraz AVIF na stronie internetowej.

Utwórz plik o nazwie avif_animated_example.html.

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

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

Aby otworzyć plik HTML, możesz przeciągnąć 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 udostępnionych przykładowych multimediów, powinny one wyglądać mniej więcej tak:

Animowane lodowisko

Możesz sprawdzić, czy jest to animowany obraz AVIF, klikając go prawym przyciskiem myszy i wybierając opcję Save image as... (Zapisz obraz jako...). Powinno się otworzyć okno z plikiem 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

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

avifenc obsługuje format y4m jako dane wejściowe do tworzenia animowanych obrazów AVIF. Do tworzenia plików y4m najlepiej używać FFmpeg.

ffmpeg -i input.gif -pix_fmt yuvj444p -f yuv4mpegpipe output.y4m
  1. 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!

  1. Renderuj animowany obraz AVIF na stronie internetowej.

Utwórz plik o nazwie avif_animated_example.html.

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

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

Aby otworzyć plik HTML, możesz przeciągnąć 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 udostępnionych przykładowych multimediów, powinny one wyglądać tak:

Animowane lodowisko

Możesz sprawdzić, czy jest to animowany obraz AVIF, klikając go prawym przyciskiem myszy i wybierając opcję Save image as... (Zapisz obraz jako...). Powinno się otworzyć okno z plikiem animated.avif. Możesz też otworzyć Narzędzia deweloperskie w Chrome i sprawdzić, czy plik animated.avif został pobrany.

  1. Zmienianie 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 tak, 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ą mniej więcej taką samą jakość, ale plik GIF jest około 22 razy większy.

8. Gratulacje!

Ukończono moduł dotyczący 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 artykule Jake'a Archibalda.