Afbeeldingen die later laden: zo doet u dat goed

Afbeeldingen zijn bijna altijd het zwaarste deel van een pagina. Een paar keuzes vooraf scheelt een seconde laadtijd.

Wat de browser zelf kan

Moderne browsers kunnen afbeeldingen zelf later laden. WordPress zet het attribuut loading standaard op lazy voor afbeeldingen in de inhoud.

Formaat en bestandstype

De eerste grote afbeelding bovenaan de pagina laadt u juist meteen. Anders wacht de bezoeker onnodig op het belangrijkste beeld.

Upload geen foto van 6000 pixels breed als de site hem op 1200 pixels toont. WordPress maakt kleinere versies, maar het origineel blijft op de server staan en soms wordt het toch geladen.

JPEG is nog steeds goed voor foto’s, WebP is meestal een stuk kleiner. Voor logo’s en iconen kiest u SVG of PNG.

Een afbeelding met afmetingen en uitgestelde laadtijd:

Moderne browsers kunnen afbeeldingen zelf later laden.

<img src="/wp-content/uploads/foto.jpg"
     width="1200" height="800"
     alt="Werkplaats met gereedschap"
     loading="lazy" decoding="async">

Geef afbeeldingen altijd een breedte en hoogte mee. De pagina springt dan niet als ze binnenkomen.

Wilt u weten waar uw site tijd verliest? We meten het graag voor u uit. Wat wij hierin voor u kunnen doen, leest u op de pagina diensten.