Layout Shift durch auto-sizing Bilder beheben

Layout Shift durch auto-sizing Bilder beheben

Es gibt ein weit verbreitetes CSS-Muster, das Ihren Cumulative Layout Shift-Score mit einer einzigen Codezeile zerstören wird. Ich habe es auf dutzenden Websites gesehen, und es verursacht einen Layout Shift, selbst wenn Sie width und height für Ihre Bilder explizit festgelegt haben. Auch das Setzen der CSS-Eigenschaft aspect-ratio wird dies nicht beheben.

Dieser Artikel konzentriert sich auf das CSS-Problem width: auto. Den vollständigen Leitfaden zu allen Ursachen für Layout Shifts durch Bilder und Medien (Videos, Iframes, Art Direction, responsive Bilder, Lazy Loading, Platzhalter) finden Sie unter Wie Bilder und Medien Layout Shifts verursachen.

Zuletzt überprüft von Arjen Karel im März 2026

Das Problem

Hier ist das CSS, das dieses Problem verursacht. Es wird häufig für responsive Bilder verwendet:

<style>
img {
    width: auto;
    height: auto;
    max-width: 100%;
}
</style>

Die Deklaration width: auto ist das Problem. Sie überschreibt die Breite, die der Browser aus Ihren HTML-Attributen width und height berechnet, was bedeutet, dass der Browser keinen Platz mehr für das Bild reservieren kann, bevor es geladen wird. Das Bild wird mit 0x0 Pixeln gerendert, bis die Datei heruntergeladen und dekodiert ist, und springt dann auf seine volle Größe. Das ist Ihr Layout Shift.

Warum das passiert

Seit 2019 weisen moderne Browser die HTML-Attribute width und height einem internen aspect-ratio Presentational Hint zu. Dieser Hinweis hat keinerlei CSS-Spezifität. Jede Autoren-CSS-Regel übertrumpft ihn, sogar ein einfaches img { width: auto; }. Wenn CSS width: auto setzt, verliert der Browser die Informationen, die er benötigt, um die reservierte Höhe aus dem Seitenverhältnis zu berechnen. Beide Dimensionen bleiben unbekannt, bis das Bild geladen ist.

Aus diesem Grund behebt auch das Setzen von aspect-ratio im CSS das Problem nicht. Bei width: auto löst der Browser die Breite für ein noch nicht geladenes Bild auf 0 auf. Ein aus einer Breite von 0 berechnetes Seitenverhältnis ergibt weiterhin eine Höhe von 0. Die Platzreservierung funktioniert nur, wenn der Browser mit mindestens einer bekannten Dimension arbeiten kann.

Es ist zudem tückisch, da es nur bei Erstbesuchern einen Layout Shift verursacht. Wenn Sie das Bild bereits in Ihrem Browser-Cache haben, stehen die intrinsischen Dimensionen sofort zur Verfügung und es tritt kein Shift auf. Sie als Entwickler werden es wahrscheinlich nie bemerken.

Wie wir es gefunden haben

Diese Probleme sind in Labortests fast unmöglich zu erfassen, da Lighthouse auf einer schnellen Maschine mit einem warmen Cache läuft. Der Weg, sie zu erkennen, ist mit Real User Monitoring. RUM trackt die Core Web Vitals für echte Besucher auf echten Geräten und meldet Ihnen die tatsächlichen CLS-Scores zurück, einschließlich Shifts, die nur bei Erstbesuchen über langsame Verbindungen auftreten.

Der Web Almanac 2025 berichtet, dass 62% der mobilen Seiten immer noch mindestens ein Bild ohne Größenangaben aufweisen. Viele davon werden durch genau dieses CSS-Muster verursacht: Der Entwickler hat width und height in HTML festgelegt, aber eine globale CSS-Regel überschreibt sie mit auto.

Die Lösung

Entfernen Sie width: auto. Behalten Sie height: auto und max-width: 100% bei. Dies ist das von web.dev empfohlene Muster für responsive Bilder, die keine Layout Shifts verursachen:

<style>
img {
    height: auto;
    max-width: 100%;
}
</style>

Mit diesem CSS verwendet der Browser das HTML-Attribut width, um die Breite des Bildes zu bestimmen (durch max-width auf 100% des Containers begrenzt), und height: auto berechnet die korrekte Höhe aus dem Seitenverhältnis. Der Platz wird reserviert, bevor das Bild geladen wird. Kein Layout Shift.

Stellen Sie sicher, dass Ihre <img>-Tags sowohl width- als auch height-Attribute enthalten:

<img src="hero.jpg" width="800" height="450" alt="Description">

Tun Sie sich einen Gefallen: Klicken Sie mit der rechten Maustaste auf ein beliebiges Bild auf Ihrer Website, wählen Sie "Element untersuchen" und überprüfen Sie die berechneten Stile auf width: auto. Wenn Sie es sehen, wissen Sie jetzt, was zu tun ist.

Tipp: Für weitere Techniken zur Bildoptimierung, lesen Sie, wie Sie Bilder für Core Web Vitals optimieren und wie Sie langsame Hero-Bilder reparieren.