WebP vagy AVIF?

Egy weboldal betöltési sebességét rengeteg dolog befolyásolja, de az egyik leggyakoribb „súlyfelesleget” még mindig a képek jelentik. Egy gyönyörű, több megabájtos fotó látványos lehet – csak éppen mobilinterneten komoly terhet jelenthet, és feleslegesen lassíthatja az oldalt.

Sokáig egyszerű volt a választás: fényképekhez JPG, átlátszó hátterű grafikákhoz PNG. Az elmúlt években azonban megjelent a WebP, most pedig egyre többször találkozhatunk egy újabb formátummal is: AVIF.

De mi ez pontosan? Jobb, mint a WebP? Le kell cserélni miatta az összes JPG képet? És egyáltalán észrevesz ebből bármit a weboldal látogatója?

Miért nem mindegy, milyen formátumban kerülnek fel a képek?

Tegyük fel, hogy van egy 2000×1300 pixeles fotónk, amely JPG formátumban 800 KB.

Ha egy oldalon tíz hasonló kép szerepel, máris több megabájtnyi adatot kell letöltenie a látogató böngészőjének – miközben a kép akár jóval kisebb fájlmérettel is közel ugyanolyan minőségben megjeleníthető lenne.

A modern képformátumok egyik legfontosabb célja pontosan ez, hogy minél kisebb fájlméret mellett biztosítson, minél jobb képminőséget.

A kisebb képek gyorsabban tölthetők le, kisebb adatforgalmat generálnak, és közvetve a weboldal teljesítményére, felhasználói élményére és a Google által vizsgált sebességi mutatókra is kedvező hatással lehetnek.

A WebP-t a Google fejlesztette ki, és mára széles körben használt webes képformátummá vált. Nagy előnye, hogy ugyanazt a képet általában kisebb fájlméret mellett tudja tárolni, mint a hagyományos JPG vagy PNG. Ráadásul meglehetősen sokoldalú, mivel használható veszteséges és veszteségmentes tömörítéssel, támogatja az átlátszóságot és még animációt is.

A WebP tehát nem egyszerűen egy „új JPG”.

Bizonyos feladatoknál a JPG-t, más esetekben akár a PNG-t vagy a GIF-et is helyettesítheti. Az MDN szerint a WebP lényegesen jobb tömörítést kínálhat a JPEG-hez és PNG-hez képest, miközben olyan funkciókat is támogat, mint az átlátszóság és az animáció.

A Smush (wp plugin) dokumentációja szerint WebP használatával tipikusan 26–30%-kal kisebb fájlméret érhető el a hagyományos JPEG/PNG képekhez képest.

És amikor már azt hittük, hogy ezzel meg is érkeztünk a modern webes képformátumok világába, megjelent az AVIF.

Az AVIF az AV1 Image File Format rövidítése. Az AV1 technológiára épül, amelyet eredetileg elsősorban hatékony internetes videókódolásra fejlesztettek ki. Nagyon leegyszerűsítve: az AVIF még tovább próbálja vinni azt, amit a WebP elkezdett. Még kisebb fájlméretet szeretne elérni úgy, hogy közben a kép vizuális minősége megmaradjon.

Az AVIF ráadásul nem csak fényképek tárolására alkalmas. Támogatja többek között az átlátszóságot, a veszteséges és veszteségmentes tömörítést, az animációt, a HDR-t és a széles színtartományt is.

A Smush jelenlegi dokumentációja szerint az AVIF képek akár 60%-kal kisebbek lehetnek a hasonló JPG vagy PNG fájloknál. Ez természetesen nem azt jelenti, hogy minden egyes kép pontosan 60%-kal kisebb lesz – a tényleges eredmény függ a képtől és a tömörítési beállításoktól

Van még egy különbség, az AVIF kódolása számításigényesebb lehet, és nem támogatja a JPEG-nél megszokott progresszív megjelenítést sem.

Egy megfelelően beállított modern weboldalon nem feltétlenül úgy működik a dolog, hogy fogjuk a Médiatár összes JPG-jét, letöröljük, majd AVIF formátumban újra feltöltjük.

Sőt, ezt általában nem is javasolnám.

A megfelelő képoptimalizáló rendszer megtarthatja az eredeti JPG vagy PNG képet, létrehozhat belőle egy modern változatot, majd a látogató böngészőjének képességei alapján szolgálhatja ki a megfelelő fájlt. A Smush például képes JPG és PNG képekből WebP vagy AVIF változatokat létrehozni. A plugin dokumentációja szerint ellenőrzi, hogy a böngésző elfogadja-e az adott modern formátumot, és nem kompatibilis böngésző esetén vissza tud térni az eredeti JPEG/PNG képhez.

A látogató ebből ideális esetben semmit sem vesz észre csak azt, hogy gyorsan megjelenik a kép.

Egy WordPress-weboldal esetében egy képoptimalizáló rendszer – például a Smush – az eredeti Médiatár mellett külön WebP vagy AVIF változatokat is létrehozhat. A Smush jelenlegi Next-Gen Formats funkciója (Pro előfizetéssel) például az AVIF változatokat külön: /wp-content/smush-avif/ könyvtárban tárolhatja, miközben az eredeti feltöltések továbbra is megmaradnak az uploads könyvtárban. Ez azért jó, mert nem kell véglegesen feláldoznunk az eredeti fájlokat az optimalizálás kedvéért. Ráadásul a már korábban feltöltött képek is átalakíthatók, az újonnan feltöltöttek pedig megfelelő konfiguráció mellett automatikusan megkaphatják a modern változatukat