# Modern képformátum

> A teszt a 10 KB-nál nagyobb JPEG és PNG képeket keresi; ha van ilyen, WebP vagy AVIF formátumra érdemes cserélni őket.

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](https://hub.hellowp.io/hu/report/teljesitmeny/kepmeretek-lusta-betoltes/) 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](https://hub.hellowp.io/hu/knowledge-base/useful-tools/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 title="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](https://hub.hellowp.io/hu/knowledge-base/useful-tools/pagespeed-insights/) is jelzi a kiszolgálandó képek méretét.