Afbeeldingen

De afbeeldingstest controleert alle afbeeldingen op een website om te zien of ze op de beste werkwijze zijn gekoppeld. We controleren ook of de afbeeldingen een juiste webindeling hebben.

Waarom testen we dit?

Websitemakers plaatsen afbeeldingen vaak op een onjuiste manier op websites, wat ervoor zorgt dat bezoekers de website niet goed kunnen benaderen en de laadtijden van pagina's toenemen.

Het is belangrijk om de breedte- en hoogte-attributen in elke afbeeldingstag te vermelden. De opmaak is wel geldig zonder hoogte- of breedte-attribuut, maar het is beter ze, volgens de beste werkwijzen, wel te vermelden. Zonder deze attributen weet de webbrowser van de bezoeker niet hoeveel ruimte er voor de afbeelding moet worden gereserveerd totdat deze is gedownload. Dit betekent dat zodra de afbeelding is geladen, de browser van de bezoeker de pagina opnieuw moet indelen, wat voor een langere laadtijd van de pagina zorgt en ertoe kan leiden dat elementen op de pagina verspringen, vooral als de gebruiker een trage internetverbinding heeft. Door deze attributen te gebruiken wordt de afbeelding niet uitgerekt, maar met de werkelijke afmetingen van de afbeelding weergegeven. Dit versnelt ook het laden van de pagina.

Hoe testen we dit?

We downloaden alle afbeeldingen op een site en geven de score voor verschillende criteria:

• Is het een niet-webvriendelijk formaat? Alleen webp-, avif-, jpeg-, png-, svg- en gif-afbeeldingen zijn toegestaan.
• Ontbreken de breedte- en hoogte-attributen? Als u geen breedte- en hoogte-attributen voor een afbeelding hebt ingevoerd.
• Wordt de afbeelding in de browser uitgerekt? Dit gebeurt als de bronafbeelding een ander formaat heeft dan de breedte- en hoogte-attributen die in de HTML zijn opgegeven. Als u een afbeelding in de browser wilt laten uitrekken, dient u CSS te gebruiken. Deze tag beschrijft namelijk de bronafbeelding, niet hoe deze afbeelding moet worden weergegeven.

Wat kan ik hieraan doen?

Zorg ervoor dat alle afbeeldingen die u gebruikt, een webvriendelijke indeling hebben, zoals jpeg, gif of png. U dient ook de breedte- en hoogte-attributen voor alle afbeeldingen te vermelden, en deze dienen overeen te komen met de werkelijke afmetingen van de bronafbeelding. Als u de afbeelding in de browser wilt laten uitrekken, gebruik dan CSS. De afbeeldingstag in de HTML bepaalt de bronafbeelding en de CSS bepaalt hoe deze afbeelding moet worden weergegeven.