Wie Bilder und Medien Layout Shift verursachen (und wie man es behebt)

Wie Bilder und Medien Layout Shift verursachen (und wie man es behebt)

Der Web Almanac 2025 beziffert das, was ich in der Praxis immer wieder sehe: 62 % der mobilen Seiten haben mindestens ein Bild ohne explizite Breiten- und Höhenangabe. Das macht Medien ohne Größenangaben zur Hauptursache für Cumulative Layout Shift im Web. Und jede einzelne dieser Verschiebungen ist mit Techniken vermeidbar, die es bereits seit 2019 gibt.

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

Der Browser weiß nicht, wie groß Ihr Bild ist

Jeder durch ein Bild verursachte Layout Shift läuft auf eine einzige Sache hinaus: Der Browser weiß nicht, wie viel Platz er reservieren muss, bevor das Bild geladen ist.

Wenn der Browser auf ein <img>-Tag ohne Dimensionen stößt, hält er nicht an, bis er die Bildmaße kennt. Nein, er reserviert einfach einen Platz von 0x0 Pixeln. Wenn das Bild dann heruntergeladen ist, berechnet der Browser das Layout neu und alles unterhalb des Bildes springt nach unten. Dieser Sprung ist Ihr CLS.

Wie Breite und Höhe Layout Shift verhindern

Die einzige Lösung für einen Layout Shift ist, den richtigen Platz zu reservieren. Der einfachste Weg, dies zu tun, ist einfach die korrekte (intrinsische) Breite und Höhe des Bildes festzulegen. In den Jahren 2019 und 2020 implementierten alle großen Browser ein Feature, das die Funktionsweise der width- und height-Attribute veränderte. Browser verwenden sie nun, um ein Seitenverhältnis zu berechnen, bevor das Bild heruntergeladen wird.

Wenn Sie dies schreiben:

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

Generiert der Browser intern Folgendes:

img[Attributes Style] {
    aspect-ratio: auto 800 / 450;
}

Fügen Sie für responsive Bilder dieses CSS hinzu:

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

Browser müssen nicht die vollständige Bilddatei herunterladen, um die Dimensionen zu berechnen. Der Browser kennt das Verhältnis und reserviert den vertikalen Platz. Das CSS übernimmt den letzten Teil: die Eingrenzung (Containment). height: auto berechnet die Höhe anhand des Verhältnisses. max-width: 100% verhindert, dass das Bild über seinen Container hinausragt.

Dinge, die diese Lösung zunichtemachen

Breiten- und Höhenattribute sind alles, was Sie benötigen, um zu verhindern, dass Bilder Layout Shifts verursachen. Aber es gibt immer noch ein paar gängige Muster, die diese Arbeit zunichtemachen und dazu führen, dass Bilder selbst mit Dimensionen und CSS Layout Shifts verursachen.

width:auto in CSS

Dies ist das Problem, das ich am häufigsten sehe und das die meiste Debugging-Zeit verschwendet. Der Entwickler setzt width und height bei jedem Bild, macht im HTML alles richtig, aber irgendwo in der CSS-Datei gibt es ein zusätzliches width:auto für Bilder.

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

Das Problem ist width: auto. Da das interne Verhältnis des Browsers die niedrigste CSS-Priorität hat, wird es von jeder Regel überschrieben. width: auto entfernt die Breite, die der Browser zur Berechnung der Höhe verwendet hat. Beide Dimensionen werden unbekannt. Das Bild wird mit 0x0 gerendert, bis die Datei heruntergeladen ist und die endgültigen Dimensionen bekannt sind.

Das Setzen von aspect-ratio in CSS behebt dies nicht. Mit width: auto behandelt der Browser die Breite anfänglich als 0. Ein Seitenverhältnis, das von 0 berechnet wird, ergibt immer noch 0x0.

Die Lösung:

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

Entfernen Sie width: auto. Behalten Sie height: auto und max-width: 100%. Dies ist das von web.dev empfohlene Muster.

Schnellprüfung: Klicken Sie mit der rechten Maustaste auf ein beliebiges Bild, untersuchen Sie es und sehen Sie sich die berechneten Stile (Computed Styles) an. Wenn Sie width: auto sehen, ist das Ihr Problem. Für die vollständige Anleitung siehe Layout Shift durch automatisch skalierende Bilder beheben.

Falsche Bilddimensionen

Erinnern Sie sich an das intern generierte Seitenverhältnis? Hier wird es etwas technischer. Das Schlüsselwort auto sagt dem Browser: Verwende dieses Verhältnis als Platzhalter, aber sobald das tatsächliche Bild geladen ist, wechsle zu den echten Dimensionen. Wenn Sie falsche Werte setzen (width="4" height="3" bei einem 16:9-Bild), reserviert der Browser anfangs 4:3-Platz und korrigiert dann auf 16:9, wenn das Bild lädt. Diese Korrektur ist ein Layout Shift. Verwenden Sie immer die tatsächlichen Pixeldimensionen des Bildes.

Wann CSS aspect-ratio die bessere Wahl ist

Breiten-/Höhenattribute sind der Standardansatz und immer der beste Ansatz, aber manchmal lässt Ihr CMS Sie keine Bilddimensionen hinzufügen (und das passiert öfter, als Sie denken!). In diesem Fall können Sie kontrollieren, wie viel Platz reserviert wird, indem Sie das CSS aspect-ratio verwenden. Wenn Ihr Hero-Bild beispielsweise die Klasse .hero hat, können Sie den Platz so reservieren:

img.hero {
    aspect-ratio: 16 / 9;
    width: 100%;
}

Funktioniert in allen modernen Browsern (Chrome 88+, Firefox 87+, Safari 15+) und auf jedem Element, nicht nur bei Bildern und Videos.

Videos, Iframes und SVGs

Videos

Gleiches Problem, gleiche Lösung. Setzen Sie Breite und Höhe entsprechend der Videoauflösung:

<video src="demo.mp4" width="1280" height="720" autoplay muted loop></video>

Fügen Sie height: auto; max-width: 100%; im CSS hinzu. Eine Sache ist zu beachten: Setzen Sie die Dimensionen passend zur Videoauflösung, nicht zum Poster-Bild. Wenn diese voneinander abweichen, entsteht ein Shift, wenn die Wiedergabe beginnt.

Iframes

Im Gegensatz zu Bildern berechnen Iframes kein Seitenverhältnis aus ihren Attributen. Ohne explizite Dimensionen verwenden sie standardmäßig 300x150 Pixel. Für die meisten Einbettungen ist das falsch. Für Iframes ist es am besten, das aspect-ratio wie folgt festzulegen:

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

Noch besser: Laden Sie den Iframe gar nicht erst. Bei YouTube, Vimeo, Google Maps und Social-Embeds habe ich schon vor Jahren aufgehört, Iframes beim Laden der Seite zu laden. Zeigen Sie ein statisches Platzhalterbild mit dem korrekten Seitenverhältnis an. Wenn der Iframe sichtbar wird, tauscht JavaScript ihn gegen den echten Iframe aus. Der Shift durch diesen Tausch geschieht innerhalb von 500ms nach Benutzereingabe und ist systembedingt von CLS ausgeschlossen.

Für Implementierungsdetails siehe perfekte YouTube-Embeds und Google Maps ohne Verlust von PageSpeed.

SVGs

SVGs, die über <img> geladen werden, benötigen Breite und Höhe auf dem Tag, genau wie Rastergrafiken. Inline-<svg>-Elemente benötigen eine viewBox mit CSS aspect-ratio. Ohne beides werden sie standardmäßig mit 300x150 gerendert.

Responsive Bilder

Behalten Sie dasselbe Verhältnis über alle srcset-Quellen hinweg bei

Alle Bilder in einem srcset müssen dasselbe Seitenverhältnis teilen. Wenn das der Fall ist, reicht ein Satz von Breite/Höhe auf dem <img> aus:

<img
    src="hero-800.jpg"
    srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
    sizes="(max-width: 600px) 100vw, 800px"
    width="800" height="450"
    alt="Hero image">

800:450 ist dasselbe Verhältnis über alle drei Varianten hinweg. Egal, welche der Browser auswählt, der reservierte Platz ist korrekt. Wenn Sie unterschiedliche Verhältnisse benötigen, verwenden Sie stattdessen <picture> mit <source>-Elementen.

Art Direction: unterschiedliche Verhältnisse pro Breakpoint

Wenn Sie bei unterschiedlichen Viewport-Breiten verschiedene Bildzuschnitte ausliefern, müssen Sie das <picture>-Element verwenden. Setzen Sie width und height auf jedem <source>:

<picture>
    <source
        media="(max-width: 799px)"
        srcset="hero-mobile.jpg"
        width="480" height="600">
    <source
        media="(min-width: 800px)"
        srcset="hero-desktop.jpg"
        width="1200" height="400">
    <img
        src="hero-desktop.jpg"
        width="1200" height="400"
        alt="Product hero image">
</picture>

Chrome und Safari übernehmen die korrekten Dimensionen von der jeweils aktiven <source>. Firefox tut dies nicht (Bug 1694741). Er verwendet immer den <img>-Fallback. Workaround: Passen Sie die Breakpoints mit CSS-Media-Queries an.

picture img {
    width: 100%;
    height: auto;
}
@media (max-width: 799px) {
    picture img {
        aspect-ratio: 480 / 600;
    }
}
@media (min-width: 800px) {
    picture img {
        aspect-ratio: 1200 / 400;
    }
}

Wenn alle Ihre Bildausschnitte dasselbe Verhältnis teilen, spielt der Firefox-Bug keine Rolle.

Feste Container, Karussells und Containment

object-fit für Container mit fester Größe

Produktkarten-Raster, bei denen jede Karte dieselbe Höhe hat, die Bilder aber unterschiedliche Verhältnisse aufweisen. Fixieren Sie den Container und lassen Sie das Bild ihn ausfüllen:

.product-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
}

<img
    src="product.jpg"
    width="400" height="600"
    class="product-image"
    alt="Product name">

Die Größe ist fixiert, bevor das Bild lädt. Dies ersetzt auch CSS-Hintergrundbilder. Hintergrundbilder können nicht lazy geladen werden, der Preload-Scanner findet sie nicht, und Sie können fetchpriority nicht verwenden. Ein <img> mit object-fit: cover bietet Ihnen all diese Kontrollmöglichkeiten.

Karussells

Slide-Übergänge, die left, width oder margin animieren, lösen eine Layout-Neuberechnung aus. Da Autoplay keine Benutzereingabe ist, zählt jeder Shift zum CLS. Fixieren Sie den Container mit einem festen Seitenverhältnis. Animieren Sie stattdessen mit transform: translateX(). Transforms laufen auf der GPU und lösen niemals ein Layout aus.

Containment für Embeds, die Sie nicht kontrollieren können

Ad-Slots, Widgets von Drittanbietern, nutzergenerierte Inhalte. Sie kontrollieren nicht, was sie rendern, und Sie können sie nicht abschneiden. Das realistische Ziel ist, den Shift zu minimieren, nicht ihn zu eliminieren.

Beginnen Sie damit, Platz zu reservieren:

.ad-slot {
    min-height: 250px;
    contain: layout style;
}

Die min-height bringt den großen Gewinn. Wenn die Anzeige mit 250px oder weniger lädt, gibt es keinen Shift. Wenn sie mit 300px lädt, erhalten Sie einen Shift von 50px anstelle eines Shifts von 300px ausgehend von Null. Dieser Unterschied ist entscheidend.

contain: layout macht etwas anderes. Es verhindert nicht, dass der Container wächst. Es isoliert das, was im Inneren passiert. Wenn das Werbenetzwerk Skripte injiziert, die ihren eigenen Inhalt umgestalten (Größenänderung von Iframes, Injektion neuer Elemente, Neuberechnung des internen Layouts), bleiben diese Neuberechnungen innerhalb des Containers. Ohne Containment löst jeder interne Reflow in der Anzeige eine Layout-Neuberechnung für die gesamte Seite aus. Damit überspringt der Browser alles außerhalb der Box. Das macht die Seite reaktionsschneller, während Anzeigen geladen werden.

contain: style verhindert, dass CSS-Zähler und andere Stil-Nebeneffekte nach außen dringen. Eine günstige Absicherung.

Für den min-height-Wert überprüfen Sie die häufigsten Creative-Größen Ihres Anzeigenanbieters und wählen diejenige, die die Mehrheit der Impressionen abdeckt. Wenn 90 % Ihrer Anzeigen 250px und 10 % 300px groß sind, setzen Sie den Wert auf 250px und nehmen Sie den gelegentlichen kleinen Shift in Kauf. Das Setzen auf 300px bedeutet, dass bei 90 % der Seitenaufrufe 50px an leerem Raum kollabieren, wenn eine kleinere Anzeige geladen wird. Dieses Kollabieren ist ebenfalls ein Layout Shift.

Es gibt keine perfekte Antwort für Anzeigen. Das Ziel ist der kleinstmögliche Shift über die meisten Seitenaufrufe hinweg.

Wie man Bild-CLS findet

Sie werden Bild-CLS unter normalen Surf-Bedingungen nicht bemerken. Ihr Browser-Cache hat bereits die Dimensionen von einem früheren Besuch, sodass der Shift niemals passiert. Um zu sehen, was Ihre echten Nutzer sehen, öffnen Sie die DevTools (F12), gehen Sie zum Network-Tab und aktivieren Sie "Disable cache". Der Cache ist nur deaktiviert, während die DevTools geöffnet sind. Alternativ können Sie ein Inkognito-Fenster verwenden.

Real User Monitoring

Beginnen Sie mit CoreDash oder einem anderen RUM-Tool. CLS-Attributionsdaten zeigen genau, welche Elemente sich verschoben haben. Navigieren Sie zu CLS und sehen Sie sich die Tabelle "Attribution Element" an. Filtern Sie nach Bild (image), und Sie erhalten jedes von Layout Shifts betroffene Bildelement, sortiert nach Auswirkung.

Chrome DevTools

Deaktivieren Sie den Cache im Network-Tab, drosseln Sie auf Slow 4G, aktivieren Sie Screenshots und laden Sie neu. Achten Sie auf visuelle Sprünge. Öffnen Sie dann das Performance-Panel und suchen Sie nach "Layout Shift"-Einträgen. Klicken Sie auf einen Shift, um den Node, den Score und die Information zu sehen, ob es kürzlich eine Benutzereingabe gab.

Core Web Vitals Visualizer

Die Erweiterung Core Web Vitals Visualizer hebt jeden Layout Shift mit einem farbigen Overlay hervor. Ich nutze dies als meinen ersten Schritt, bevor ich das Performance-Panel öffne. Laden Sie die Seite mit aktiver Erweiterung neu, und Sie sehen genau, was sich bewegt hat.

Schnelle Checkliste für CLS-Lösungen

Wie es im Web um Bild-CLS steht

Die Zahlen aus dem Web Almanac 2025:

• 62 % der mobilen Seiten haben mindestens ein Bild ohne Größenangabe. Das ist ein Rückgang von 66 % im Jahr 2024, aber immer noch die Mehrheit.
• 65 % der Desktop-Seiten haben Bilder ohne Größenangabe. Ein Rückgang von 69 %.
• Beim p75-Wert weist eine Desktop-Seite 9 Bilder ohne Größenangabe auf. Bei mobilen Seiten sind es 8.
• Der Median der Höhe von Bildern ohne Größenangabe: 111px auf dem Desktop, 98px auf Mobilgeräten. Genug, um einen Absatz zu verschieben.
• 72 % der Desktop- und 81 % der mobilen Origins bestehen CLS. Ein Anstieg im Vergleich zu 62 % im Jahr 2021.

CLS hat sich in den letzten vier Jahren stärker verbessert als jeder andere Core Web Vital. Bilder ohne Größenangaben sind nach wie vor der größte Verursacher. Beheben Sie dieses eine Problem, und Layout Shifts verschwinden auf den meisten Websites.

Verwandte Leitfäden

• Was ist Cumulative Layout Shift (CLS): Der vollständige Leitfaden. Formel, Schwellenwerte, Session-Fenster und alle CLS-Ursachen abseits von Bildern.
• CLS-Probleme finden und beheben: Schritt-für-Schritt-Diagnose mit RUM-Daten, DevTools und Lösungen für jede Ursache.
• Layout Shift durch automatisch skalierende Bilder beheben: Die komplette width: auto-Anleitung.
• Bilder für Core Web Vitals optimieren: Preloading, responsive Bilder, Formate, Priorisierung.
• Layout Shift verursacht durch CSS-Transitions: Wie Layout-auslösende Animationen CLS verursachen.
• Perfekte YouTube-Embeds: Das Fassaden-Muster für null CLS.
• Google Maps 100% PageSpeed: Derselbe Fassaden-Ansatz für Maps.