Modern képformátum

A képek adják a legtöbb oldal letöltött méretének nagy részét. A WebP és az AVIF ugyanazt a látható minőséget jellemzően kisebb fájlban adja, mint a JPEG vagy a PNG, így gyorsabb a betöltés, kisebb az adatforgalom, és a legnagyobb tartalmi elem (LCP) is hamarabb megjelenik. A teszt azt nézi, marad-e olyan nagyobb kép, amelyet még a régi formátumban kap a látogató.

Hogyan mérjük

A riport egy valódi, mobilnak emulált böngészővel betölti a megadott oldalt, és összegyűjti a betöltés közben letöltött képeket (a Lighthouse hálózati naplójából, Image típusú kérések).

• Nem mérhető: az oldal egyetlen képet sem töltött le.
• Megfelelő: nincs olyan kép, amelynek típusa image/jpeg vagy image/png, és az átvitt mérete legalább 10 KB (10 240 bájt).
• Hiba: legalább egy ilyen kép van. A riport megadja a darabszámot és legfeljebb 10 kép címét. Súlyossága: alacsony.

Amit a teszt nem néz: a 10 KB alatti képeket, az SVG-t, a GIF-et, a WebP-t és az AVIF-ot (ezek nem számítanak hibának). Azt sem vizsgálja, hogy a kép a megfelelő méretű-e; erről a Képméretek, lusta betöltés teszt szól.

Az eredmény egy betöltésből jön, a megadott címről, mobil nézetben. A valódi látogatók eszközén más képek is előkerülhetnek (például más képernyőméretre szánt változatok).

Hogyan javítsd

1. Nézd meg a riportban felsorolt képeket, és állapítsd meg, melyek a legnagyobbak.
2. Készíts belőlük WebP-t, a legfontosabbakhoz AVIF-et is. A web.dev szerint a WebP jellemzően 25-35%-kal kisebb fájlt ad, mint a JPEG vagy a PNG. Egyszeri konverzióhoz használhatod a Squoosh böngészős eszközt vagy a Google cwebp parancssori programját.
3. Ellenőrizd a konvertált képet szemmel is: túl alacsony minőségi beállításnál foltosodik, főleg sima felületeken és arcokon.
4. Cseréld le a képet az oldalon. Ha a régi böngészők miatt kell tartalék, használd a <picture> elemet: a böngésző az első olyan forrást tölti le, amelynek formátumát ismeri, a többit kihagyja.

HTML

HTML

<picture>
  <source srcset="/kepek/kep.avif" type="image/avif">
  <source srcset="/kepek/kep.webp" type="image/webp">
  <img src="/kepek/kep.jpg" width="640" height="360" alt="A kép leírása">
</picture>

Az .avif és a .webp fájlt előbb készítsd el ugyanabból a képből. Az <img> mindig a legvégén áll, és olyan formátumú legyen, amelyet minden célböngésző megjelenít (JPEG vagy PNG). Mindig add meg a width és a height attribútumot is, hogy a lap ne ugráljon betöltéskor.

WordPress

WordPressben a médiatárba a már konvertált fájlt töltsd fel, és azt szúrd be a tartalomba. Ha a téma vagy egy oldalépítő a képet CSS-háttérként tölti be, a cserét ott kell elvégezni.

Hogyan ellenőrizd

• Futtasd újra a riportot: a teszt akkor lesz megfelelő, ha nem marad 10 KB-nál nagyobb JPEG vagy PNG a betöltésben.
• A böngésző fejlesztői eszközeinek Network füle, Img szűrővel, megmutatja, melyik kép milyen típussal és mérettel érkezett.
• A PageSpeed Insights is jelzi a kiszolgálandó képek méretét.