Layout Shift veroorzaakt door automatisch schalen van afbeeldingen oplossen

Afbeeldingen met automatische breedte en hoogte veroorzaken een layout shift. Leer hoe je dit kunt oplossen

Arjen Karel - linkedin

Last update: 2026-03-05

Layout Shift veroorzaakt door automatisch schalen van afbeeldingen oplossen

Er is een veelvoorkomend CSS-patroon dat je [url=\/core-web-vitals\/cumulative-layout-shift]Cumulative Layout Shift[\/url] score met één regel code kan verpesten. Ik heb het op tientallen sites gezien, en het veroorzaakt een layout shift zelfs wanneer je expliciet de breedte en hoogte van je afbeeldingen hebt ingesteld. Zelfs het instellen van de aspect-ratio CSS-eigenschap lost het niet op.

Laatst herzien door [url=https:\/\/www.linkedin.com\/in\/arjenkarel\/]Arjen Karel[\/url] op maart 2026

[include]toc.html[\/include]Het probleem

Hier is de CSS die het probleem veroorzaakt. Het wordt vaak gebruikt voor responsieve afbeeldingen:
<style>
img {width: auto;height: auto;max-width: 100%;
}
<\/style>