width/height gesetzt

Feste Abmessungen verhindern Layout-Sprünge.

Das Thema dieser Seite: Fehlende Bildabmessungen verursachen Layout-Verschiebungen und schlechtere CLS-Werte.

Inhalt

Klicke auf einen Abschnitt, um direkt dorthin zu springen.

Der Check prüft, ob Bilder mit width und height oder einem definierten Seitenverhältnis ausgeliefert werden. Das verhindert CLS.

Prüfpunkt	Bedeutung	Bewertung
Alle Bilder mit Dimensionen	Browser reserviert Platz	OK
Einzelne Bilder ohne Dimensionen	Lokale Layout-Sprünge	Warnung
Viele Bilder ohne Dimensionen	Schlechter CLS-Wert	Kritisch

Fehlende Dimensionen treten oft bei dynamisch generierten Bild-Widgets, CMS-Komponenten und Lazy-Loading-Setups auf.

Situation	Symptom	Risiko
CMS ohne Bild-Templates	Keine Width/Height Attribute	Unruhiges Layout, schlechte UX
JavaScript rendert Bilder	Platz wird erst spät reserviert	Layout-Sprünge beim Laden
Hero-Images ohne Ratio	Headline springt nach unten	CLS-Kritik von Google

Welche Lösung wann sinnvoll ist.

Wenn	Dann	Empfehlung
Bildgröße bekannt	HTML-Attribute nutzen	`width` und `height` setzen
Responsive Bilder	Ratio muss erhalten bleiben	Width/Height plus `srcset` nutzen
Variable Container	Flexibles Layout	`aspect-ratio` im CSS definieren

Moderne Browser nutzen Width/Height als Platzhalter und skalieren das Bild per CSS. Das reduziert Layout-Shift deutlich.

<img src="/img/header.jpg" alt="Header" width="1200" height="675" />

.hero-image {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

Risiko	Folge	Gegenmaßnahme
Falsche Dimensionen gesetzt	Gestauchte Bilder	Richtige Originalgröße verwenden
Dimensionen komplett fehlen	CLS-Probleme	Attribute im Template erzwingen
Nur CSS ohne Ratio	Platz wird trotzdem nicht reserviert	Aspect-Ratio oder HTML-Attribute nutzen