Durch automatische Bildgrößenanpassung verursachten Layout Shift beheben

Das Problem

Hier ist das CSS, das das 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. Das 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 wurde, und springt dann auf seine volle Größe. Das ist Ihr Layout Shift.

Warum das passiert

Seit 2019 bilden moderne Browser die HTML-Attribute width und height auf einen internen aspect-ratio Darstellungshinweis (Presentational Hint) ab. Dieser Hinweis hat eine CSS-Spezifität von Null. Jede CSS-Regel eines Autors gewinnt dagegen, selbst ein einfaches img { width: auto; }. Wenn das CSS width: auto festlegt, verliert der Browser die Informationen, die er benötigt, um die reservierte Höhe aus dem Seitenverhältnis (Aspect Ratio) zu berechnen. Beide Dimensionen werden unbekannt, bis das Bild geladen wird.

Dies ist der Grund, warum das Festlegen von aspect-ratio in CSS das Problem ebenfalls nicht löst. Bei width: auto löst der Browser die Breite für ein nicht geladenes Bild auf 0 auf. Ein aus einer Breite von 0 berechnetes Seitenverhältnis ergibt immer noch eine Höhe von 0. Die Platzreservierung funktioniert nur, wenn der Browser mindestens eine bekannte Dimension hat, mit der er arbeiten kann.

Es ist außerdem tückisch, weil es nur bei Erstbesuchern einen Layout Shift verursacht. Wenn Sie das Bild bereits im Browser-Cache haben, sind die intrinsischen Abmessungen sofort verfügbar und es tritt keine Verschiebung auf. Sie als Entwickler werden es wahrscheinlich nie sehen.

Wie wir es gefunden haben

Diese Probleme sind bei Labortests fast unmöglich zu erfassen, da Lighthouse auf einem schnellen Rechner mit einem "warmen" Cache läuft. Der Weg, sie zu erkennen, ist [url=https:\/\/coredash.app]Real User Monitoring (RUM)[\/url]. RUM verfolgt die Core Web Vitals für echte Besucher auf echten Geräten und meldet Ihnen die tatsächlichen CLS-Werte zurück, einschließlich Verschiebungen, die nur bei ersten Besuchen über langsame Verbindungen auftreten.

Der [url=https:\/\/almanac.httparchive.org\/en\/2025\/performance]2025 Web Almanac[\/url] berichtet, dass 62 % der mobilen Seiten immer noch mindestens ein Bild ohne Größenangabe haben. Viele davon werden durch genau dieses CSS-Muster verursacht: Der Entwickler hat Breite und Höhe im HTML festgelegt, aber eine globale CSS-Regel überschreibt diese mit auto.

Die Lösung

Entfernen Sie width: auto. Behalten Sie height: auto und max-width: 100% bei. Dies ist das [url=https:\/\/web.dev\/articles\/optimize-cls]von web.dev empfohlene Muster[\/url] 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="Beschreibung">

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

Tipp: Weitere Techniken zur Bildoptimierung finden Sie unter [url=\/pagespeed\/optimize-images-for-core-web-vitals]So optimieren Sie Bilder für Core Web Vitals[\/url] und [url=\/pagespeed\/fix-slow-hero-images-core-web-vitals]So beheben Sie langsame Hero-Bilder[\/url].

[include]cwv\/authorbio.html[\/include]

            
            
[include]sidebar.html[\/include]
        
    

[include]blogfooter.html[\/include]