WebP és AVIF (modern képformátumok)

Sebesség és mérhető pontszám

A képek a legnagyobb letöltött erőforrások egy átlagos oldalon. Ha 800 kB helyett 300 kB érkezik, a hero-kép hamarabb kirajzolódik. Ez közvetlenül javítja az LCP (Largest Contentful Paint) értékét, ami a Core Web Vitals egyik mért mutatója.

Mobil és adatforgalom

Magyar KKV-oldalakon a forgalom 60-75 százaléka mobil. Lassabb hálózaton minden megspórolt száz kilobájt látható különbség. A riportokban rendszeresen látunk 2-4 MB-os kategóriaoldalakat, ahol pusztán a formátumváltás felezné a méretet.

Üzleti hatás

A lassú termékoldalról a látogató visszalép a találati oldalra. Webshopban ez elveszett kosár. A szerverköltség is csökken, mert kevesebb bájtot kell kiszolgálni.

AI-oldalról

A képformátum önmagában nem befolyásolja, mit ért egy nyelvi modell az oldalból. A gyorsabb, kisebb oldalt viszont a crawlerek is könnyebben végigjárják, és kevesebb időtúllépés keletkezik.

Vonatkozik rá:

• Minden nyilvános oldal, amelyen fotók vagy illusztrációk vannak.
• Webshopok: termékképek, kategórialisták, bannerek.
• Blogok, portfóliók, ingatlan- és utazási oldalak.
• Landing oldalak nagy háttérképpel.

Kevésbé vagy egyáltalán nem vonatkozik rá:

• Tisztán szöveges oldalak, ahol csak logó és ikonok vannak.
• Vektoros grafika: ott az SVG a helyes választás, nem a WebP.
• Olyan képek, ahol a veszteségmentes eredeti kötelező, például nyomdai letöltés vagy jogi dokumentum melléklete.
• Staging és belső admin felületek, ahol nincs valódi forgalom.

Animált GIF helyett érdemes videót vagy animált WebP-t használni, a különbség gyakran tízszeres.

1. Nyisd meg az oldalt böngészőben, és indítsd el a devtools Network fülét.
2. Szűrj az Img típusra, majd frissíts (Ctrl+F5 vagy Cmd+Shift+R).
3. Nézd a Type és a Size oszlopot. Rendezd méret szerint csökkenő sorrendbe.
4. Kattints a legnagyobb képre, és ellenőrizd a válasz Content-Type fejlécét.
5. Futtass egy PageSpeed Insights mérést. A „Serve images in modern formats” javaslat megmondja, hány kilobájt spórolható.
6. Parancssorból is ellenőrizheted: curl -I a kép URL-jére, és nézd a content-type sort.

Jó jel:

• A válasz content-type: image/webp vagy image/avif.
• A nagy hero-kép 150 kB alatt van.
• A HTML-ben picture elem vagy srcset szerepel több formátummal.
• A PageSpeed nem jelez modern formátum javaslatot.

Rossz jel:

• Minden kép image/jpeg vagy image/png.
• Egyetlen kép 500 kB fölött.
• 1 MB fölötti összes képméret egy aloldalon.
• PNG-ben mentett fotó, ami tipikusan négyszeres méret.

WordPress

1. A WordPress 5.8-tól tudja kezelni a WebP feltöltést, 6.5-től az AVIF-ot is.
2. Telepíts képkonvertáló bővítményt, amely a médiatár meglévő képeit is átalakítja.
3. Futtass egy tömeges konverziót a teljes médiatárra, ne csak az új feltöltésekre.
4. Ellenőrizd, hogy a sablon the_post_thumbnail() kimenete tartalmaz-e srcset attribútumot.
5. Ha van gyorsítótár-bővítmény, üríts cache-t a konverzió után.

Shopify

1. A Shopify CDN a támogató böngészőknek automatikusan WebP-t szolgál ki.
2. Feltöltéskor ne pakolj be 4000 pixel széles eredetit, ha 1200 is elég.
3. A sablonban használd az image_url szűrőt width paraméterrel, és adj srcset listát.
4. A sebesség-jelentésben nézd vissza a termékoldal LCP-jét.

Unas

1. Az admin képkezelőjében a feltöltött kép mérete a kiindulás: kicsinyítsd le a feltöltés előtt.
2. Mentsd a fotókat 75-80 százalékos JPEG-minőségen, ha nincs automatikus konverzió.
3. A rendszer által kiszolgált formátumot a devtools Content-Type sora mutatja meg.
4. Ha a sablon egyedi, oda betehető a picture elemes megoldás saját WebP-fájlokkal.

Shoprenter

1. Ellenőrizd a devtools Network fülén, milyen formátumban jönnek a termékképek.
2. A feltöltött eredetit mindig méretezd a ténylegesen megjelenített szélességre.
3. Egyedi sablonnál a képmegjelenítő blokkban adj srcset és sizes attribútumot.
4. A bannerek és kategóriafejlécek a legnagyobb nyereségforrások, azokkal kezdd.

Egyedi fejlesztés

1. Építs build-lépést, amely minden képből generál WebP és AVIF változatot.
2. A HTML-ben picture elemmel add meg a sorrendet: AVIF, WebP, majd JPEG.
3. Vagy a szerveren dönts az Accept fejléc alapján, és küldj Vary: Accept választ.
4. Kapcsold be a CDN (tartalomszolgáltató hálózat) képtranszformációs funkcióját, ha van ilyen.
5. Állíts be hosszú Cache-Control értéket a képekre, verziózott fájlnévvel.

• Fotó PNG-ben mentve: a PNG veszteségmentes, ezért egy fotónál sokszorosa a JPEG méretének.
• Konvertálás méretezés nélkül: egy 4000 pixeles kép WebP-ben is nagy marad, ha 600 pixelen jelenik meg.
• Túl agresszív minőség: 50 alatti beállításnál láthatóan szétesik a termékfotó, és visszajön a reklamáció.
• Csak az új feltöltések konvertálva: a régi médiatár marad JPEG, a riport továbbra is jelzi a hibát.
• Hiányzó visszaesés: AVIF-ot adsz img tagben picture nélkül, így régi böngészőn törött kép lesz.
• Cache-fejléc nélküli kiszolgálás: minden látogatásnál újra letöltődik a kép, a megtakarítás elvész.
• A Lazy loading (lusta betöltés) mint pótlék: a lusta betöltés késlelteti, de nem kicsinyíti a fájlt.

A picture elem több formátumot ajánl fel, a böngésző az elsőt választja, amelyet ismer:

<picture>
  <source srcset="/img/termek-800.avif 800w, /img/termek-1600.avif 1600w"
          sizes="(max-width: 768px) 100vw, 800px"
          type="image/avif">
  <source srcset="/img/termek-800.webp 800w, /img/termek-1600.webp 1600w"
          sizes="(max-width: 768px) 100vw, 800px"
          type="image/webp">
  <img src="/img/termek-800.jpg"
       width="800" height="600"
       alt="Tölgyfa étkezőasztal oldalnézetből"
       loading="lazy" decoding="async">
</picture>

A width és height megadása a helyfoglalás miatt kell, enélkül ugrál az elrendezés. A hero-képre soha ne tegyél loading="lazy" értéket.

Ellenőrzés parancssorból, a böngésző fejlécét utánozva:

curl -s -o /dev/null \
  -w "%{content_type} | %{size_download} bajt\n" \
  -H "Accept: image/avif,image/webp,image/*,*/*" \
  https://pelda.hu/img/termek-800.jpg

Ha a válasz image/webp vagy image/avif, a szerver vagy a CDN már konvertál. Ha image/jpeg jön vissza, nincs modern formátum a kiszolgálásban.