Formaty grafik – WebP i AVIF

Na przestrzeni lat powstało wiele formatów grafiki takich jak: JPEG, GIF czy PNG, które wykorzystujemy tworząc nasze strony i aplikacje internetowe. W tym artykule przybliżę dwa z nich: WebP i AVIF – powstały one relatywnie niedawno.

Photo by Alexander Andrews on Unsplash

WebP

Google w 2010 roku opublikowało format WebP, który jest 25% lżejszy od najpopularniejszych formatów takich jak JPEG czy PNG. Oczywiście, aby móc z nimi konkurować obsługuje kanał przezroczystości. Warto zauważyć, że posiada dwa tryby: stratny i bezstratny. Jeśli możemy sobie pozwolić na tryb stratny to WebP może być nawet 3x mniejsze niż PNG.

Obecnie (stan na listopad 2020) obsługiwany format przez większość przeglądarek takich jak: Chrome, Firefox, Edge czy Opera. Dokładny spis przeglądarek w których jest obsługiwany format WebP dostępny na https://caniuse.com/webp.

AVIF

Alliance for Open Media w roku 2020 opublikowało format AVIF, który jest pochodną formatu video o nazwie AV1 opublikowanego w 2018 roku. AVIF jest lżejszy od JPEG o 50% i 20% od WebP. Posiada on kanał przezroczystości, może też przechowywać animowane sekwencje i obsługuje HDR. Tak samo jak WebP posiada dwa tryby: stratny i bezstratny.

Efektem ubocznym tego, że wywodzi się z formatu wideo jest załadowanie gotowego obrazka lub niczego. Co mam na myśli? Gdy ładujemy obrazek JPEG przy słabej przepustowości łącza uda nam się zaobserwować, że ładuje się ono częściami od góry do dołu. AVIF nie posiada takiego mechanizmu, więc zobaczymy całkowicie załadowany obrazek lub nic.

Obecnie (stan na listopad 2020) obsługiwany w Chrome oraz eksperymentalnie w Firefox. Dokładny spis przeglądarek w których jest obsługiwany format AVIF dostępny na https://caniuse.com/avif.

Jak ich użyć?

Formatów tych możemy użyć w naszym projekcie już dziś wykorzystując tag <img> lub bardziej uniwersalnie tag <picture>, który pozwoli nam na poradzenie sobie z sytuacją w której owe formaty nie są obsługiwane – posługując się wtedy formatem JPEG lub PNG.

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

Podsumowanie

Razem z rozwojem internetu powstają coraz to nowszego i lepsze formaty obsługi grafiki. W przyszłości formaty te będą coraz szybsze i lepiej zoptymalizowane. Przy zastosowaniu tagu <picture> już dziś możemy z nich korzystać – zabezpieczając się formatem JPEG lub PNG, gdyby nowe formaty nie były obsługiwane.

Udostępnij
Default image
Wojciech Szućko
Jestem Angular Developerem. Przedstawiam techniki i technologie, które wykorzystuje w codziennej pracy z web aplikacjami. Tworzyłem projekty między innymi dla Bank Pekao S.A., AlphaTauri czy Playmobil.