Pripojenie zlyhalo. Skúste to prosím znova.

Preskočiť na obsah
SEO Tools
Pomocník a dokumentácia
Rýchlosť Stredný dopad Ľahké 5–15 min

Rozmery obrázkov (width/height)

Bez rozmerov obrázka poskakuje layout (CLS).

Čo to je

Keď <img> nemá uvedené width a height, prehliadač do načítania nevie, koľko miesta obrázok zaberie — a po jeho dorazení obsah „poskočí“. To meria metrika CLS (Cumulative Layout Shift).

Prečo to riešiť

Poskakovanie layoutu je frustrujúce (používateľ klikne na niečo iné, než chcel) a Google ho penalizuje cez CLS v Core Web Vitals.

Ako na to

  1. 1Uvádzaj width a height pri všetkých <img> (prehliadač si z nich vypočíta pomer strán).
  2. 2Prípadne rezervuj miesto cez aspect-ratio v CSS.
  3. 3To isté platí pre embedy a reklamy — rezervuj im priestor.

Príklad

Zle
<img src="foto.webp" alt="...">
Správne
<img src="foto.webp" alt="..." width="800" height="600">

Záver

Doplniť rozmery obrázkov je päťminútovka s priamym dopadom na CLS — jednu z Core Web Vitals. Kombinuj s lazy loadingom a modernými formátmi. Rezervuj miesto aj embedom a reklamám, aby nič neposkakovalo.

Súvisiace témy