Rychlost Střední dopad Snadné 5–15 min

Rozměry obrázků (width/height)

Bez rozměrů obrázku poskakuje layout (CLS).

Co to je

Když <img> nemá uvedené width a height, prohlížeč do načtení neví, kolik místa obrázek zabere a po jeho dorazení obsah „poskočí". To měří metrika CLS (Cumulative Layout Shift).

Proč to řešit

Poskakování layoutu je frustrující (uživatel klikne na něco jiného, než chtěl) a Google ho penalizuje přes CLS v Core Web Vitals.

Jak na to

1Uváděj width a height u všech <img> (prohlížeč si z nich spočítá poměr stran).
2Případně rezervuj místo přes aspect-ratio v CSS.
3Totéž platí pro embedy a reklamy: rezervuj jim prostor.

Příklad

Špatně

<img src="foto.webp" alt="...">

Správně

<img src="foto.webp" alt="..." width="800" height="600">

Závěr

Doplnit rozměry obrázků je pětiminutovka s přímým dopadem na CLS, jednu z Core Web Vitals. Kombinuj s lazy loadingem a moderními formáty. Rezervuj místo i embedům a reklamám, ať nic neposkakuje.

Související témata