Co to jest AVIF lub AV1? Jak włączyć obsługę w Chrome i Firefox?

Jeśli chodzi o ładowanie stron internetowych, obrazy zajmują dużo czasu ze względu na rozmiar. W ciągu ostatnich kilku lat włożono wiele wysiłku i WebP stał się popularny. W porównaniu z JPEG format WebP jest o 30% mniejszy, co jest ogromne, zwłaszcza teraz, gdy kluczowy czynnik sieciowy Google jest częścią algorytmu wyszukiwania. Ale to nie koniec.

Alliance for Open Media opracowała nowy format obrazu — AV1 (.avif) , który jest o 50% mniejszy niż JPEG . W tym poście porozmawiamy o tym i o tym, jak włączyć jego obsługę w Chrome , Firefox i Edge .

AVIF lub AV1

Co to jest format obrazu AVIF lub AV1?

Alliance for Open Media we współpracy z Google , Cisco i Xiph.org stworzył format AVIF . Jest to format typu open source, który nie wymaga żadnych opłat   licencyjnych (wdrożenie JPEG wymaga drogich licencji). (JPEG)Jest to superskompresowany obraz, który zapewnia lepszą jakość kompresji w stosunku do rozmiaru pliku. Oto lista funkcji:

  • Obsługuje dowolny kodek obrazu
  • Może być stratny lub bezstratny.
  • Może przechowywać serię ramek, tj . Obsługuje GIF .
  • Obsługuje obsługę kolorów HDR z lepszą jasnością, głębią kolorów i gamami kolorów

Włącz obsługę AVIF(AVIF) lub AV1 w Chrome , Edge i Firefox

Ponieważ format jest nowy(the format is new) i zajmie trochę czasu, aby stać się głównym nurtem. Dobrą wiadomością jest to, że przeglądarki już je obsługują, ale nie zostały jeszcze domyślnie włączone. W końcu stanie się to wzdłuż pasa.

Chrome w wersji 85 już ją włączył, podczas gdy Firefox (wersja 80) wymaga włączenia flagi. Postępuj zgodnie z poniższą metodą dla przeglądarki Firefox(Firefox) :

  • W nowej karcie wpisz about:config i naciśnij klawisz Enter.
  • Znajdź image.avif.enabled
  • Kliknij dwukrotnie, aby zmienić wartość na true.

Ponieważ Microsoft Edge korzysta z tego samego silnika Chromium(Chromium Engine) , obsługa Edge powinna wkrótce zostać wprowadzona.

Jak strony internetowe mogą to zaimplementować?

Właściciele witryn mogą używać elementu PICTURE w natywnym HTML , aby uwzględnić rezerwę, tj. jeśli przeglądarka go nie obsługuje, możesz poprosić przeglądarkę o użycie innego formatu obrazu.

<picture>
	<source srcset="img/photo.avif" type="image/avif">
	<source srcset="img/photo.webp" type="image/webp">
	<img src="img/photo.jpg" alt="Description of Photo">
</picture>

Jak utworzyć plik AVIF

Sqoosh AVIF Konwertuj

Możesz użyć aplikacji internetowej Squoosh , aby przekonwertować dowolny obraz na AVIF . Dzięki wsparciu zespołu Google Chrome Labs masz dostęp do zaawansowanych opcji dla wszystkich kompresorów obrazu. Jeśli masz tylko kilka obrazów, możesz użyć tego.

W przypadku witryn internetowych lub masowej konwersji obrazów możesz użyć biblioteki AOMedia,  libavif (AOMedia),(libavif) do kodowania/dekodowania plików AVIF . Ci, którzy są użytkownikami macOS z Homebrew , mogą zainstalować wstępnie zbudowaną wersję za pomocą następującego polecenia

brew install joedrago/repo/avifenc

Format obrazu AVIF(AVIF) brzmi obiecująco. Ponieważ pomaga znacznie szybciej ładować strony internetowe, powinien zostać przyjęty szybciej niż format WebP(WebP) . To ostatnie zajęło dużo czasu, głównie dlatego, że prędkość nie była wtedy głównym problemem, ale teraz tak jest.



Nicole Krajewska

About the author

Jestem inżynierem telefonicznym z ponad 10-letnim doświadczeniem w branży mobilnej i specjalizuję się w naprawie i modernizacji smartfonów. Moja praca obejmowała opracowywanie i utrzymywanie oprogramowania sprzętowego telefonu, tworzenie obrazów dla urządzeń Apple oraz pracę nad projektami Firefox OS. Dzięki moim umiejętnościom w zakresie tworzenia oprogramowania, inżynierii sprzętu, przetwarzania obrazu i tworzenia systemu Firefox OS, potrafię brać złożone problemy i przekształcać je w proste rozwiązania, które działają na każdym urządzeniu.


Related posts