Verbinding mislukt. Probeer het opnieuw.

Naar inhoud springen
SEO Tools
Help en documentatie
Snelheid Gemiddelde impact Makkelijk 5–15 minuten

Afmetingen afbeelding (breedte/hoogte)

Zonder afbeeldingsafmetingen springt de lay-out (CLS).

Wat het is

Wanneer voor een <img> geen breedte en hoogte is opgegeven, weet de browser niet hoeveel ruimte de afbeelding in beslag zal nemen totdat deze wordt geladen - en zodra deze arriveert, "springt" de inhoud. Dit wordt gemeten aan de hand van de CLS-metriek (Cumulatieve Layout Shift).

Waarom het belangrijk is

Layoutspringen is frustrerend (de gebruiker klikt op iets anders dan bedoeld) en Google bestraft dit via CLS in Core Web Vitals.

Hoe je het doet

  1. 1Specificeer de breedte en hoogte van alle <img>-elementen (de browser berekent hieruit de beeldverhouding).
  2. 2U kunt ook ruimte reserveren via de beeldverhouding in CSS.
  3. 3Hetzelfde geldt voor insluitingen en advertenties: reserveer er ruimte voor.

Voorbeeld

Fout
<img src="photo.webp" alt="...">
Goed
<img src="photo.webp" alt="..." width="800" height="600">

Conclusie

Het toevoegen van afbeeldingsdimensies is een taak van vijf minuten met een directe impact op CLS – een van de Core Web Vitals. Combineer het met lazyloading en moderne formaten. Reserveer ook ruimte voor insluitingen en advertenties, zodat er niets verspringt.

Gerelateerde onderwerpen