Warum das Layout springt

Wenn der Browser eine Seite aufbaut, kennt er die Größe eines Bildes erst, wenn es geladen ist. Fehlt eine Größenangabe, reserviert er dafür keinen Platz — der Text darunter rutscht nach oben, als wäre das Bild nicht da. Sobald das Bild ankommt, drängt es sich dazwischen und schiebt alles nach unten. Genau in diesem Moment „springt" die Seite. Google misst das als Cumulative Layout Shift (CLS) — einen der Core Web Vitals — und wertet starke Sprünge als schlechte Nutzererfahrung.

Die Lösung: dem Browser die Maße verraten

Gib jedem Bild seine echten Pixelmaße als width und height mit:

<img src="foto.jpg" alt="..." width="1200" height="800">

Der Browser rechnet daraus das Seitenverhältnis (hier 3:2) aus und reserviert sofort einen Platzhalter in der richtigen Höhe — bevor das Bild geladen ist. Kommt das Bild an, füllt es exakt den vorgehaltenen Raum, und nichts springt. Zwei Zahlen, Problem gelöst.

„Aber dann ist mein Bild doch nicht mehr responsiv!"

Der häufigste Einwand — und ein Missverständnis. Die HTML-Attribute geben nur das Seitenverhältnis vor, nicht die feste Anzeigegröße. Mit etwas CSS bleibt das Bild voll flexibel:

img {
  width: 100%;
  height: auto;
}

So skaliert das Bild weiterhin mit dem Container — der Browser nutzt die Attribute ausschließlich, um vorab den Platz im richtigen Verhältnis freizuhalten. Responsiv und sprungfrei schließen sich nicht aus.

Die moderne Variante: aspect-ratio

Wenn die Pixelmaße nicht als Attribut vorliegen (dynamische Bilder, Video-Einbettungen, Container mit Hintergrundbild), hilft die CSS-Eigenschaft aspect-ratio:

.bild-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Der Container behält immer das 16:9-Verhältnis und reserviert den Platz unabhängig davon, wann das Bild lädt. Ideal für Galerie-Kacheln und eingebettete Medien.

Zusammenspiel mit Lazy Loading

Gerade bei lazy geladenen Bildern ist die Größenangabe doppelt wichtig: Sie erscheinen ja bewusst erst später — ohne reservierten Platz wäre der Sprung beim Nachladen garantiert.loading="lazy" und width/height gehören deshalb immer zusammen.

Weitere häufige CLS-Quellen (kurz)

  • Webfonts, die spät laden und Text umbrechen lassen — mit font-display steuern.
  • Werbung und Einbettungen ohne reservierten Platz — feste Container-Höhe geben.
  • Dynamisch eingefügte Banner oben auf der Seite — besser unterhalb oder mit reserviertem Raum.

Bilder sind aber die häufigste und am leichtesten behebbare Ursache. Wie CLS in die gesamten Core Web Vitals passt, steht im Beitrag Core Web Vitals verbessern.

Häufige Fragen

Warum springt mein Layout, während die Seite lädt?

Weil Bilder ohne Größenangabe erst Platz einnehmen, wenn sie geladen sind. Bis dahin hat der Browser dafür keinen Raum reserviert, und wenn das Bild plötzlich da ist, schiebt es den darunterliegenden Inhalt nach unten. Das misst Google als Cumulative Layout Shift (CLS).

Wie verhindere ich Layout Shift durch Bilder?

Indem du jedem Bild width und height (die Pixelmaße des Bildes) mitgibst. Der Browser berechnet daraus das Seitenverhältnis und reserviert den Platz, bevor das Bild geladen ist. Das Bild bleibt per CSS trotzdem responsiv skalierbar.

Widerspricht width/height nicht der responsiven Skalierung?

Nein. Die HTML-Attribute width und height geben nur das Seitenverhältnis vor. Mit CSS (etwa width:100%; height:auto) skaliert das Bild weiterhin flexibel — der Browser nutzt die Attribute nur, um vorab den richtigen Platz freizuhalten.

Was ist mit aspect-ratio?

Die CSS-Eigenschaft aspect-ratio ist die moderne Alternative: Sie legt das Seitenverhältnis fest, auch wenn die Pixelmaße nicht als Attribut vorliegen — nützlich für Container, Videos und Bilder aus dynamischen Quellen.

Quellen

web.dev — Cumulative Layout Shift · MDN — aspect-ratio.