Képformátumok a gyakorlatban: WebP és AVIF

Miért számítanak a képformátumok a sebességben?

A sebesség nem csupán kényelmi kérdés: a lassú oldalról a látogató hamarabb távozik, és a keresők is figyelik az oldalélmény mutatóit. Egy nehéz, tömörítetlen kép több másodperccel is megnyújthatja a betöltést, különösen mobilhálózaton. A képek okos tömörítése ezért a leggyorsabban megtérülő sebességi munka.

A jó hír, hogy a képek optimalizálása jellemzően nem jár minőségromlással. A modern formátumok fejlettebb tömörítési eljárásokat használnak, így a szemünk számára észrevehetetlen a különbség, miközben a fájl mérete a töredékére csökken. A megfelelő formátum megválasztása tehát nyereség kompromisszum nélkül.

JPEG, PNG, WebP és AVIF - mi a különbség?

A JPEG a klasszikus fényképformátum: veszteséges tömörítésű, széles körben támogatott, de a modern eljárásokhoz képest nagyobb fájlt ad. A PNG veszteségmentes, ezért grafikák, logók és átlátszóságot igénylő képek esetén jó, viszont fényképeknél feleslegesen nehéz. A WebP és az AVIF ezekhez képest újabb, hatékonyabb formátumok.

• JPEG: fényképekhez, veszteséges, univerzális támogatás, de nagyobb méret.
• PNG: grafikákhoz, veszteségmentes, átlátszóság, fényképnél túl nehéz.
• WebP: veszteséges és veszteségmentes is, átlátszóság, kis méret, széles támogatás.
• AVIF: legjobb tömörítés, gazdag színmélység, de lassabb kódolás, szűkebb támogatás.

A fenti ábra jól szemlélteti, hogy azonos vizuális minőség mellett ugyanaz a kép a WebP-ben és különösen az AVIF-ban lényegesen kisebb, mint a JPEG-ben. A gyakorlatban ez a különbség dönti el, mennyi adatot tölt le a látogató böngészője.

A WebP a gyakorlatban

A WebP-t a Google fejlesztette, és ma szinte minden korszerű böngésző támogatja. Egy WebP kép jellemzően érdemben kisebb, mint az azonos minőségű JPEG vagy PNG, miközben kezeli az átlátszóságot és az animációt is. Emiatt jó általános alapértelmezés a legtöbb weboldalhoz.

Mikor a WebP a jó választás?

A WebP kiválóan illik a legtöbb tartalmi képhez: termékfotókhoz, blogképekhez, illusztrációkhoz. A veszteséges módja fényképekhez, a veszteségmentes módja pedig grafikákhoz és logókhoz ideális. Mivel a támogatottsága gyakorlatilag teljes, sok webhelynél a WebP önmagában is elég modern megoldás.

A WebP kódolása gyors, ezért nagy mennyiségű kép feldolgozásánál sem lassítja észrevehetően a folyamatot. Egy webshopnál, ahol több ezer terméknek kell képet generálni, ez a sebesség komoly előny. Emiatt a WebP gyakran a legkényelmesebb kiindulópont a képgyorsításhoz.

Az AVIF a gyakorlatban

Az AVIF egy újabb, videokódolási technológiára épülő képformátum, amely gyakran még a WebP-nél is kisebb fájlt ad azonos minőség mellett. Különösen gazdag színátmenetű fényképeknél és nagy felbontású képeknél mutatja meg az előnyét. A tömörítése a jelenlegi legfejlettebbek közé tartozik.

Cserébe az AVIF kódolása lassabb és számításigényesebb, mint a WebP-é, ami nagy mennyiségű kép feldolgozásánál időt jelent. A böngészőtámogatása bővül, de a WebP-hez képest még mindig valamivel szűkebb, ezért tartalékmegoldás nélkül nem érdemes egyedüli formátumként használni. Ahol a méret a legfontosabb, ott viszont az AVIF hozza a legjobb eredményt.

A gyakorlatban az AVIF akkor éri meg leginkább, ha a képek a felhasználói élmény középpontjában állnak, és minden lementett kilobájt számít - például nagy, egész képernyős fejlécképeknél. Ilyenkor a lassabb kódolás egyszeri ára megtérül a gyorsabb betöltésben, amelyet minden látogató élvez.

Böngészőtámogatás és tartalékmegoldás

A modern formátumoknál mindig a böngészőtámogatásból kell kiindulni, mert hiába kisebb egy AVIF kép, ha a látogató böngészője nem tudja megjeleníteni. A WebP támogatottsága ma gyakorlatilag teljes, az AVIF-é folyamatosan bővül, de még nem éri el a WebP szintjét. A fenti trendábra ezt a bővülést szemlélteti.

A picture elem: mindenki a neki való formátumot kapja

A megbízható megoldás a HTML picture eleme, amellyel több formátumot kínálhatsz fel egyszerre. A böngésző a felsorolásból az elsőt választja, amelyet támogat: aki tudja, AVIF-ot vagy WebP-t kap, aki nem, az a JPEG tartalékot. Így a modern formátum előnyét kockázat nélkül használhatod ki.

A tartalékmegoldás nemcsak biztonságot ad, hanem rugalmasságot is: bármikor bővítheted új formátummal anélkül, hogy a régebbi böngészőket cserben hagynád. A sorrend fontos - a legkisebb, legmodernebb formátum kerüljön előre, a megbízható tartalék pedig a végére.

Melyik formátumot válasszam?

A jó választás a képtípustól, a támogatástól és attól függ, mennyire kritikus a méret. Nincs egyetlen győztes formátum minden helyzetre; a döntés inkább mérlegelés. A gyakorlatban a legtöbb webhelynek a WebP a jó alapértelmezés, az AVIF pedig ott, ahol a méret a legfontosabb.

• Fényképek, termékfotók: WebP általánosan; AVIF, ahol a méret kritikus.
• Grafikák, logók, ikonok: WebP veszteségmentes módja vagy SVG.
• Átlátszóságot igénylő képek: WebP vagy AVIF a nehéz PNG helyett.
• Egyszerű ikonok, egyszínű grafikák: SVG, mert felbontásfüggetlen és pici.

A fenti ábra a döntés rétegeit szemlélteti: a formátumot a képtípus, a böngészőtámogatás és a tartalékmegoldás együtt határozza meg. Ha ezt a három szempontot végiggondolod, szinte mindig egyértelmű választ kapsz.

Minőség és tömörítés: hol a jó egyensúly?

A veszteséges tömörítésnél mindig egyensúlyt keresel a fájlméret és a vizuális minőség között. A tapasztalat szerint a minőségi szint enyhe csökkentése óriási méretcsökkenést hoz, miközben a különbség szabad szemmel alig látszik. A túl agresszív tömörítés viszont látható foltokat, elmosódást okozhat, ezért mértékkel érdemes bánni vele.

A gyakorlatban érdemes a képet a végleges megjelenítési méretére kicsinyíteni, mielőtt tömöríted, mert a felesleges felbontás sok fájlméretet visz el. Egy 3000 pixel széles fotót értelmetlen betölteni egy 600 pixeles helyre. A megfelelő méret és a modern formátum együtt adja a legjobb eredményt.

Reszponzív képek és a lusta betöltés

A formátum önmagában nem elég: a képet a megjelenítési méretéhez is igazítani kell. A srcset és a sizes attribútumokkal több méretet adhatsz meg, és a böngésző a képernyőhöz illőt tölti le. Így a mobil felhasználó nem tölt le fölöslegesen egy asztali méretű, nagy képet.

• srcset és sizes: a böngésző a képernyőhöz illő méretet választja.
• Lusta betöltés (loading=„lazy”): a kép csak akkor tölt be, amikor a látóterébe ér.
• A látható tartalom (LCP) képét viszont ne késleltesd, azt töltsd be azonnal.

A lusta betöltés különösen hosszú, sok képes oldalaknál segít, mert a látótéren kívüli képek nem terhelik a kezdeti betöltést. A legfontosabb, elsőként látható képet viszont sosem érdemes késleltetni, mert az rontja a betöltési élményt. A cél mindig a látogató által ténylegesen látott tartalom gyors megjelenése.

Mikor érdemes szakértőt bevonni?

Néhány kép átalakítását magad is elvégezheted, és a legtöbb tartalomkezelő rendszer ma már automatikusan generál WebP változatot. Ha viszont egy nagy webshop több ezer termékképét kell egységesen, automatikusan optimalizálni, vagy a régi képanyagot kell modern formátumra átállítani, gyakran érdemes egy webfejlesztő vagy üzemeltető szakértőt bevonni. Egy jól beállított képfolyamat sok kézi munkát megtakarít.

Cégünk a weboldal üzemeltetéshez eleve beépíti a modern képkezelést: automatikus tömörítést, formátumválasztást és tartalékmegoldást. Így a képek gyorsak maradnak akkor is, ha a webhely folyamatosan bővül, és a szerkesztőnek nem kell a tömörítéssel bajlódnia.

Ajánlott forrás: a web.dev útmutatója a modern képformátumokról.

Összegzés: modern képek, gyorsabb oldal

A képek adják a legtöbb weboldal súlyának nagy részét, ezért a modern formátumok - a WebP és az AVIF - a leggyorsabban megtérülő sebességi eszközök. Azonos vizuális minőség mellett érdemben kisebb fájlt adnak, mint a régi JPEG és PNG, így gyorsabb a betöltés és jobb az élmény, minőségromlás nélkül.

A gyakorlatban a WebP a jó általános alapértelmezés a szinte teljes támogatottsága miatt, az AVIF pedig ott, ahol a méret a legfontosabb, cserébe a lassabb kódolásért. Mindig tartalékmegoldással dolgozz a picture elemmel, hogy a modern formátumot kapja, aki támogatja, a többiek pedig a megbízható JPEG-et.

A formátum mellett a méretezés is számít: kicsinyítsd a képet a megjelenítési méretére, használj reszponzív képeket és lusta betöltést, de a látható tartalom képét ne késleltesd. Ha nagy, folyamatosan bővülő webhelyet üzemeltetsz, egy jól beállított, automatikus képfolyamat hosszú távon sok munkát és sávszélességet takarít meg.