Layout Shift veroorzaakt door automatisch schalen van afbeeldingen oplossen

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>

De declaratie width: auto is het probleem. Het overschrijft de breedte die de browser berekent uit je HTML width- en height-attributen, wat betekent dat de browser geen ruimte meer kan reserveren voor de afbeelding voordat deze wordt geladen. De afbeelding wordt gerenderd op 0x0 pixels totdat het bestand is gedownload en gedecodeerd, en springt dan naar zijn volledige grootte. Dat is je layout shift.

Waarom dit gebeurt

Sinds 2019 koppelen moderne browsers de HTML-attributen width en height aan een interne aspect-ratio presentational hint. Deze hint heeft een CSS-specificiteit van nul. Elke CSS-regel van een auteur wint het ervan, zelfs een simpele img { width: auto; }. Wanneer CSS width: auto instelt, verliest de browser de informatie die hij nodig heeft om de gereserveerde hoogte te berekenen op basis van de aspect ratio. Beide dimensies worden onbekend totdat de afbeelding wordt geladen.

Dit is de reden waarom het instellen van aspect-ratio in CSS het probleem ook niet oplost. Met width: auto stelt de browser de breedte vast op 0 voor een niet-geladen afbeelding. Een aspect ratio berekent op basis van een breedte van 0 levert nog steeds een hoogte van 0 op. De ruimtereservering werkt alleen wanneer de browser ten minste één bekende dimensie heeft om mee te werken.

Het is ook verraderlijk omdat het alleen een layout shift veroorzaakt bij nieuwe bezoekers. Als de afbeelding al in de browser-cache staat, zijn de intrinsieke afmetingen onmiddellijk beschikbaar en vindt er geen verschuiving plaats. Jij, als ontwikkelaar, zult het waarschijnlijk nooit zien.

Hoe we het hebben gevonden

Deze problemen zijn bijna onmogelijk te vangen in lab-tests, omdat Lighthouse op een snelle machine met een warme cache draait. De manier om ze te detecteren is met [url=https:\/\/coredash.app]Real User Monitoring[\/url]. RUM volgt de Core Web Vitals voor echte bezoekers op echte apparaten en rapporteert de werkelijke CLS-scores aan jou, inclusief verschuivingen die alleen optreden bij eerste bezoeken via trage verbindingen.

De [url=https:\/\/almanac.httparchive.org\/en\/2025\/performance]2025 Web Almanac[\/url] meldt dat 62% van de mobiele pagina's nog steeds ten minste één ongedimensioneerde afbeelding heeft. Veel daarvan worden veroorzaakt door precies dit CSS-patroon: de ontwikkelaar heeft de breedte en hoogte ingesteld in HTML, maar een wereldwijde CSS-regel overschrijft deze met auto.

De oplossing

Verwijder width: auto. Behoud height: auto en max-width: 100%. Dit is het [url=https:\/\/web.dev\/articles\/optimize-cls]patroon aanbevolen door web.dev[\/url] voor responsieve afbeeldingen die geen layout shifts veroorzaken:

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

Met deze CSS gebruikt de browser het HTML width-attribuut om de breedte van de afbeelding te bepalen (beperkt tot 100% van de container door max-width), en height: auto berekent de juiste hoogte op basis van de aspect ratio. De ruimte wordt gereserveerd voordat de afbeelding wordt geladen. Geen layout shift.

Zorg ervoor dat je <img>-tags zowel breedte- als hoogte-attributen bevatten:

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

Doe jezelf een plezier: klik met de rechtermuisknop op een afbeelding op je site, kies "Inspecteren" en controleer de berekende stijlen (computed styles) op width: auto. Als je het ziet, weet je nu wat je moet doen.

Tip: Zie voor meer technieken voor beeldoptimalisatie [url=\/pagespeed\/optimize-images-for-core-web-vitals]hoe je afbeeldingen kunt optimaliseren voor Core Web Vitals[\/url] en [url=\/pagespeed\/fix-slow-hero-images-core-web-vitals]hoe je trage hero-afbeeldingen kunt herstellen[\/url].

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

            
            
[include]sidebar.html[\/include]
        
    

[include]blogfooter.html[\/include]