AVIF képformátum: mennyivel kisebb, ki kezeli, és mikor ne használd

Az AVIF egy képformátum, ami ugyanolyan képminőséget kisebb fájlban ad, mint a JPEG vagy a WebP. Kisebb kép gyorsabb oldalt jelent, főleg mobilon, ahol a képek adják a letöltött adat nagy részét.

Mi az AVIF?

Az AVIF (AV1 Image File Format) az AV1 videókodekre épülő képformátum, az Alliance for Open Media fejlesztette, az első változata 2019-ben jelent meg. Ugyanaz a tömörítés van mögötte, amivel a streaming szolgáltatók a videóikat kicsire nyomják.

Tud veszteséges és veszteségmentes tömörítést, átlátszó hátteret, és a JPEG 8 bitjével szemben 10 és 12 bites színmélységet is. A gyakorlatban a veszteséges változatot használod: a fotók és a borítóképek ebben a formában kerülnek fel a weboldalra.

Mennyivel kisebb, mint a JPEG és a WebP?

A saját blogom három borítóképét mentettem el 1024 pixel szélesen mindhárom formátumban (JPEG 82-es, WebP 80-as, AVIF 62-es minőségen). A képminőséget SSIM-mel ellenőriztem, ez a képek közötti eltérés bevett mérőszáma: a három formátum mindegyik képnél nagyjából azonos minőséget adott.

Kép	JPEG	WebP	AVIF
Weboldal árak borító	86 KB	59 KB	47 KB
Betűtípus borító	43 KB	19 KB	13 KB
TTFB borító	63 KB	34 KB	24 KB

Az AVIF ezeknél a képeknél 45-70%-kal kisebb lett a JPEG-nél, és 20-32%-kal a WebP-nél. A nyereség képenként változik: a nagy, egyszínű felületeken a legnagyobb, a sok apró részletnél kisebb.

Egy oldalon ritkán van egyetlen kép. Ha a kezdőlapod tíz fotója egyenként 50 KB-tal kisebb, az fél megabájttal kevesebb letöltés, ami lassú mobilnetén másodpercekben mérhető. Hogy ez hogyan jelenik meg a PageSpeed mérésén, az LCP javításról szóló cikkben írtam le.

Melyik böngésző kezeli az AVIF-et?

A ma használt böngészők mindegyike. A caniuse.com adatai szerint a világ böngészőhasználatának 96%-a megjeleníti az AVIF képeket.

• Chrome: a 85-ös verziótól, 2020 augusztusa óta

• Firefox: a 93-as verziótól, 2021 októbere óta

• Safari iPhone-on és iPaden: az iOS 16-tól, 2022 szeptembere óta

• Safari Macen: teljes támogatással a 16.4-es verziótól, 2023 márciusa óta

• Edge: a 121-es verziótól, 2024 januárja óta

Az Internet Explorer soha nem tanulta meg, de a Microsoft 2022 júniusában nyugdíjazta, úgyhogy nálam nem szempont.

A maradék néhány százalék sem marad kép nélkül. A picture elemmel a böngésző maga választ: amelyik érti az AVIF-et, azt tölti le, amelyik nem, az a tartalék képet.

<picture>
  <source srcset="borito.avif" type="image/avif">
  <img src="borito.jpg" alt="..." width="1024" height="538">
</picture>

Az általam készített oldalakon a régi böngésző az eredeti feltöltött képet kapja. A látogató ugyanazt látja, csak nagyobb fájlból töltődik le.

Mik az AVIF hátrányai?

A kódolás lassabb

Egy AVIF fájl elkészítése több időt és processzort visz, mint egy JPEG-é. A látogató ebből semmit nem érez, mert a képek a feltöltéskor egyszer készülnek el, de egy nagy képtár átalakítása a szervert is megdolgoztatja.

A kódolón múlik a minőség

AVIF fájlt többféle program tud készíteni, és ugyanaz a minőségi érték mindegyikben mást jelent. A 60-as beállítás az egyikben szép képet ad, a másikban már foltosat. A számot ezért ne vedd át egyik eszközből a másikba, hanem nézd meg az eredményt a saját képeiden.

A legelterjedtebb eszközök:

• avifenc (libavif): a formátumot fejlesztő Alliance for Open Media saját, parancssoros programja.

• Squoosh: a Google ingyenes, böngészőben futó képtömörítője. Egy-egy képhez a legegyszerűbb, és egymás mellett mutatja az eredetit és a tömörített változatot.

• Sharp: a Node.js-re épülő oldalak bevett képkezelője.

• ImageMagick: a legtöbb tárhelyen ott van, és a WordPress is ezt használja, ha a szerveren elérhető.

• Photoshop és GIMP: mindkettő tud AVIF-be menteni.

Éles széleknél és alacsony minőségen látszik a tömörítés

Átlátszó háttérre tett lágy árnyékkal is lefuttattam egy tesztet. Az árnyék átmenete jól megmaradt: az átlátszóság legfeljebb 1,6%-kal tért el az eredetitől, q90-en a kép szemre azonos volt vele. Alacsonyabb minőségen, q62-n háromszoros nagyításban már látszott egy enyhe lépcsőzés az árnyékban, és a tárgy éles sarkán egy halvány világos csík. Normál méretben ez alig észrevehető, de egy feliratos képernyőképnél vagy egy logónál a tömörítés hamarabb kiütközik.

Mikor ne használj AVIF-et?

• Megosztási előnézetnél. Az a kép, ami a Facebookon vagy a Messengerben a link mellett megjelenik (og:image), nálam JPEG marad, mert azt minden közösségi oldal és üzenetküldő biztosan megmutatja.

• Logónál és ikonnál. Ezekre az SVG való: vektoros, bármekkora méretben éles, és általában kisebb is.

• Szöveges képernyőképnél alacsony minőségen. Az éles betűszélek a tömörítés legérzékenyebb pontjai. Ha AVIF, akkor magasabb minőségi beállítással.

Hogyan használd WordPressen?

A WordPress a 6.5-ös verziótól, 2024 áprilisa óta fogad AVIF fájlt a médiatárba. Ehhez a tárhelyen futó képkezelőnek (Imagick vagy GD) is ismernie kell a formátumot. Hogy a tiéd ismeri-e, azt az Eszközök > Webhely egészsége > Információ > Médiakezelés alatt látod: a támogatott formátumok között ott kell lennie az AVIF-nek. Ha nincs ott, a tárhelyszolgáltatónál kell kérni a képkezelő frissítését.

A feltöltés még nem átalakítás. Ha a JPEG-jeidből automatikusan AVIF változatokat szeretnél, arra a WordPress fejlesztőcsapatának Modern Image Formats bővítménye való: ha a szerver tudja, alapból AVIF-et készít, különben WebP-t. Csak az új feltöltéseken dolgozik, a régi képeket újra kell generáltatni, például a Regenerate Thumbnails pluginnal. A Beállítások > Média alatt az „Output fallback images” bekapcsolásával az eredeti formátumú változatok is elkészülnek.

Ha általában is lassú az oldalad, a képek csak egy tétel a sok közül. A többit a lassú weboldalról szóló cikkben szedtem össze, és ha WordPress és egyedi fejlesztés között döntesz, abban ez a cikk segít.

Hogyan csinálom én?

Az általam fejlesztett oldalakon a képeket egyszer kell feltölteni. A rendszer ilyenkor magától elkészíti az AVIF változatokat több méretben, és a látogató böngészője a képernyőjéhez illőt tölti le. Hogy milyen méretek és milyen minőség kell, az adminban képméretenként állítható.

Ha kíváncsi vagy, mennyit nyernél a saját oldaladon, küldd el a címét a kapcsolat oldalon, és megnézem, mekkorák a képeid, és mennyit faragna le belőlük az AVIF.