Połączenie nie powiodło się. Spróbuj ponownie.

Przejdź do treści
SEO Tools
Pomoc i dokumentacja
Szybkość Średni wpływ Łatwe 5–15 min

Wymiary obrazów (width/height)

Bez wymiarów obrazu układ skacze (CLS).

Co to jest

Gdy <img> nie ma podanych width i height, przeglądarka do czasu wczytania nie wie, ile miejsca zajmie obraz — a po jego nadejściu treść „podskakuje”. Mierzy to metryka CLS (Cumulative Layout Shift).

Dlaczego warto to rozwiązać

Skakanie układu jest frustrujące (użytkownik klika w coś innego, niż chciał), a Google penalizuje je przez CLS w Core Web Vitals.

Jak to zrobić

  1. 1Podawaj width i height przy wszystkich <img> (przeglądarka wyliczy z nich proporcje).
  2. 2Ewentualnie zarezerwuj miejsce przez aspect-ratio w CSS.
  3. 3To samo dotyczy osadzeń i reklam — zarezerwuj im przestrzeń.

Przykład

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

Podsumowanie

Uzupełnienie wymiarów obrazów to pięciominutowe zadanie z bezpośrednim wpływem na CLS — jedną z Core Web Vitals. Łącz z lazy loadingiem i nowoczesnymi formatami. Zarezerwuj miejsce także osadzeniom i reklamom, aby nic nie skakało.

Powiązane tematy