Durch automatische Bildgrößenanpassung verursachten Layout Shift beheben

Bilder mit automatischer Breite und Höhe verursachen einen Layout Shift. Erfahren Sie, wie Sie dies beheben können.

Arjen Karel - linkedin

Last update: 2026-03-05

Durch automatische Bildgrößenanpassung verursachten Layout Shift beheben

Es gibt ein gängiges CSS-Muster, das Ihren [url=\/core-web-vitals\/cumulative-layout-shift]Cumulative Layout Shift (CLS)[\/url] Score mit einer einzigen Codezeile zerstören kann. Ich habe es auf Dutzenden von Websites gesehen, und es verursacht einen Layout Shift, selbst wenn Sie explizit Breite und Höhe für Ihre Bilder festgelegt haben. Sogar das Setzen der CSS-Eigenschaft aspect-ratio wird es nicht beheben.

Zuletzt überprüft von [url=https:\/\/www.linkedin.com\/in\/arjenkarel\/]Arjen Karel[\/url] im März 2026

[include]toc.html[\/include]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>