Waarom het specificeren van width en height in een afbeeldingstag belangrijk is

Waarom het specificeren van width en height in een afbeeldingstag belangrijk is

Bij het bouwen van een webpagina is de <img>-tag een van de meest gebruikte elementen. Toch zien we nog vaak situaties waarin alleen de src wordt opgegeven en de grootte-informatie wordt weggelaten.

Dit kan leiden tot verschuivingen in het layout tijdens het laden, wat de gebruikerservaring en prestatie-indicatoren negatief beïnvloedt. In dit artikel bekijken we waarom het specificeren van width en height in een <img>-tag cruciaal is en welke concrete voordelen het oplevert, vanuit een technisch perspectief.

1. Renderingprestaties en laadsnelheid

1-1. Stabiel layout garanderen

Browsers parsen HTML en renderen zo snel mogelijk. Als de grootte van een afbeelding onbekend is, kan de browser niet vooraf berekenen hoeveel ruimte het element zal innemen.

Dit resulteert in een layout shift wanneer de afbeelding laadt, waardoor bestaande content wordt verplaatst.

<img src="photo.jpg">

In dit geval wordt de afbeelding vóór het laden behandeld als een element zonder hoogte, en pas na het laden wordt de daadwerkelijke hoogte toegepast, waardoor de pagina opnieuw wordt gerenderd.

1-2. CLS (Cumulative Layout Shift) verminderen

CLS is een van de Google Core Web Vitals en meet onverwachte layoutveranderingen tijdens het laden.

Door width en height op te geven, kan de browser de aspect ratio berekenen en de benodigde ruimte vooraf reserveren.

CLS-criteria

• CLS ≤ 0.1 : goed
• CLS ≥ 0.25 : verbetering nodig

Het specificeren van de afbeeldinggrootte is een eenvoudige maar effectieve manier om CLS te verlagen.

1-3. Begrip van netwerkbandbreedte

Een veelvoorkomend misverstand is dat het opgeven van width en height de downloadgrootte van de afbeelding verkleint.

• De browser downloadt nog steeds het originele bestand.
• De attributen dienen alleen voor layoutberekening.

Echte bandbreedtebesparing gebeurt via:

• srcset / sizes
• Server-side afbeeldingresizing
• <picture>-element

Toch zorgt het specificeren van de grootte voor een stabielere rendering, wat de waargenomen laadtijd en visuele kwaliteit aanzienlijk verbetert.

2. Toegankelijkheidsvoordelen

2-1. Voorspelbare leesstroom

Toegankelijkheid draait om de alt-tekst, maar een stabiel layout speelt ook een ondersteunende rol.

Duidelijke afmetingen maken de pagina-structuur voorspelbaar, waardoor de leesstroom voor schermlezers niet abrupt verandert.

width en height zijn geen verplichte toegankelijkheidsattributen, maar een stabiel layout verbetert indirect de toegankelijkheid.

2-2. Layoutvoorspelbaarheid op mobiel

Op mobiele apparaten is de schermgrootte beperkt, waardoor kleine layoutveranderingen sterk opvallen.

Als de grootte niet is opgegeven, kan:

• Inhoud tijdens het laden verschuiven
• De afstand tussen elementen plotseling veranderen bij in- of uitzoomen.

Het expliciet definiëren van de basisaspectratio vermindert deze onzekerheid.

3. SEO-perspectief

Zoekmachines waarderen pagina's met goede laadtijd en gebruikerservaring.

• Lage CLS
• Stabiele initiële rendering

Deze eigenschappen worden gezien als indicaties van een kwalitatieve pagina, wat de positie in zoekresultaten kan verbeteren.

Een duidelijke afbeeldingstructuur helpt zoekmachines de pagina beter te begrijpen en kan ook positieve effecten hebben op afbeeldingzoekresultaten.

4. Praktische codevoorbeelden

4-1. Zonder grootte (probleemvoorbeeld)

<img src="https://example.com/photo.jpg" alt="Beautiful scenery">

4-2. Met grootte (aanbevolen voorbeeld)

<img
  src="https://example.com/photo.jpg"
  alt="Beautiful scenery"
  width="800"
  height="600">

Opmerking

• width en height gebruiken pixelwaarden.
• Bij responsieve layouts is het gebruikelijk om de volgende CSS toe te passen.

img {
  max-width: 100%;
  height: auto;
}

5. Praktische tips samengevat

6. Conclusie

• Stabiel layout → CLS vermindert → betere gebruikerservaring
• Predictable rendering → Waargenomen prestaties verbeteren
• Positieve SEO-signalen

Het specificeren van width en height is dus niet alleen een kwestie van code-stijl, maar een fundamenteel principe om webprestaties en UX te verbeteren.

Door deze attributen gewoonlijk toe te voegen bij het invoegen van afbeeldingen, wordt de kwaliteit van je webpagina aanzienlijk verhoogd.

Voor front-end engineers zijn de volgende posts ook interessant:

1. Zelfs backend engineers moeten deze dingen weten - Top 5 frontend JS-methoden en modules
2. [Web uploaden vereenvoudigd] De ultieme Dropzone.js gids