# Képméretek, lusta betöltés

> A teszt a width/height nélküli képeket és a hajtás alatt is azonnal betöltődő képeket keresi; mindkettő rontja a betöltést.

Két gyakori képhiba rontja a betöltést. Ha a képnek nincs megadott mérete, a böngésző nem tudja előre, mennyi helyet hagyjon neki, ezért betöltéskor elugrik alatta a tartalom (ez a CLS mutató). Ha a lap alján lévő képek is azonnal betöltődnek, elviszik a sávszélességet a látható tartalom elől.

## Hogyan mérjük

A riport mobilnak emulált böngészőben betölti az oldalt, és a kész lapon végigmegy a képeken (legfeljebb 2000-et néz meg). Csak azokat számolja, amelyeknek van látható szélessége.

- **Méret nélküli kép:** nincs rajta egyszerre `width` és `height` attribútum.
- **Azonnal betöltődő hajtás alatti kép:** a kép teteje a képernyő magasságán túl van, és nincs rajta `loading="lazy"`.
- **Nem mérhető:** az oldalon nincs látható kép.
- **Megfelelő:** egyik hiba sincs.
- **Hiba:** legalább az egyik előfordul. Súlyossága: alacsony. A riport külön megadja a két darabszámot.

Fontos, hogy a teszt a HTML-attribútumokat nézi. Ha a méretet csak CSS-sel (például `aspect-ratio`-val) adod meg, de az `<img>`-en nincs `width` és `height`, a teszt akkor is hibát jelez. A böngésző a `width` és `height` attribútumokból számol képarányt, ezért ezeket érdemes mindig kiírni.

A "hajtás alatti" helyzet a betöltött lap mobil képernyőméretéből jön; más képernyőn más képek esnek a hajtás alá.

## Hogyan javítsd

1. Adj minden képnek `width` és `height` attribútumot a kép tényleges (természetes) méretével. CSS-ben a `height: auto` megtartja az arányt, ha a kép kisebb helyen jelenik meg.
2. Ha a méretet nem tudod előre, a CSS `aspect-ratio` tulajdonság is helyet foglal a képnek; ettől a teszt még kérheti az attribútumokat.
3. A hajtás alatti képekre tedd rá a `loading="lazy"` attribútumot.
4. A lap tetején lévő, látható képeken, különösen a fő (hero) képen ne legyen `loading="lazy"`: ezt a böngésző előbb tölti le, ha nem halasztod. A web.dev külön kiemeli, hogy a legnagyobb tartalmi elem képét soha ne töltsd lustán.

### HTML

```html title="HTML"
<img src="/kepek/kep.webp" width="640" height="360" alt="A kép leírása" loading="lazy">
```

A `loading="lazy"` csak a hajtás alatti képekre kerüljön. A hajtás fölöttiekre csak a `width` és a `height` kell.

### CSS

```css title="CSS"
img {
  max-width: 100%;
  height: auto;
}
```

### WordPress

WordPressben a médiatárból a tartalomba szúrt képekre a WordPress magától teszi rá a méretet és a lusta betöltést (a `wp_filter_content_tags` szűrő). A méret nélküli képek többnyire a témából vagy egy oldalépítőből jönnek; ott kell javítani. A WordPress 6.3 óta a `wp_get_loading_optimization_attributes()` függvény adja a `loading` és `fetchpriority` attribútumokat, és a már kézzel megadott attribútumokat nem írja felül.

## Hogyan ellenőrizd

- Futtasd újra a riportot: mindkét darabszámnak 0-nak kell lennie.
- A böngésző fejlesztői eszközeiben (Elements) nézd meg a képek attribútumait.
- A [PageSpeed Insights](https://hub.hellowp.io/hu/knowledge-base/useful-tools/pagespeed-insights/) a CLS értékben mutatja a javulást. Lásd még: [Labor-CLS](https://hub.hellowp.io/hu/report/teljesitmeny/labor-cls/).