Een hero-afbeelding met de verkeerde afmetingen

De kern van de controle is eenvoudig: hoe groot toont de pagina de afbeelding, en hoe groot is het bestand dat de browser daarvoor ophaalt? De cursus over beeldprestaties op web.dev omschrijft het doel als het beperken van verspilde bytes, ongeacht het toestel van de bezoeker. Dat is meteen de maatstaf voor deze gids.

Bestandsgewicht in kilobytes en afmetingen in pixels zijn twee aparte metingen. Noteer ze allebei. Een bestand kan weinig wegen en toch veel te breed zijn in pixels, of er kan zo zwaar gecomprimeerd zijn dat het beeld slecht oogt. Het weergegeven formaat verschilt bovendien per schermbreedte, dus je meet minstens een smal en een breed scherm.

Deze gids beperkt zich tot de afbeelding zelf. Lettertypes, scripts en serverreactie beïnvloeden de laadtijd ook, maar die vallen buiten deze procedure.

Je hebt alleen een gewone browser met ontwikkelaarstools nodig. Menunamen verschillen per browser en versie, dus zoek in jouw browser naar de tab voor netwerkverkeer en naar de functie om een element te inspecteren.

1. Open de pagina in een venster van ongeveer de breedte van een telefoon en laad ze opnieuw met een leeggemaakte cache.
2. Zoek in het netwerkoverzicht de hero-afbeelding en noteer bestandstype, bestandsgrootte en bestandsnaam.
3. Inspecteer het afbeeldingselement en lees het weergegeven formaat af. Veel browsers tonen ook de intrinsieke afmetingen van het bestand.
4. Noteer het verhoudingsgetal tussen intrinsieke breedte en weergegeven breedte.
5. Herhaal dit in een breed desktopvenster.
6. Kijk in de paginabron of het element een lijst met varianten heeft, of dat er slechts één bestand wordt aangeboden. Soms staat de afbeelding als achtergrond in de stijlen, wat andere aanpassingen vraagt.

Noteer ook of de afbeelding op een scherm met hoge pixeldichtheid scherper moet zijn. Dat bepaalt hoeveel extra pixels je terecht nodig hebt.

Gebruik dit blad om per bevinding te beslissen. De breedtes zijn werkhypotheses voor je eigen ontwerp, geen norm.

De laatste regel volgt uit het principe dat uitgesteld laden bedoeld is voor niet-kritieke middelen, zoals MDN het beschrijft. Een hero is meestal wel kritiek.

Bij een gewoon afbeeldingselement moeten de aangeboden bestanden en de layoutinformatie bij elkaar passen. De MDN-gids voor responsive afbeeldingen beschrijft hoe srcset en sizes daarbij helpen. Kijk niet alleen of er meerdere bestandsnamen staan: controleer ook of de aangegeven breedtes en de verwachte weergavebreedte correct zijn. Browserkeuze hangt onder meer van scherm, pixeldichtheid en beschikbare informatie af.

Dit is een verzonnen invoer om de rekenstappen te tonen, geen meting van een echte site.

Stel: op een breed scherm toont de pagina de hero op 1200 CSS-pixels breed. Op een telefoon is dat 390. In het netwerkoverzicht zie je één bestand van 3000 pixels breed.

Reken per situatie wat je minimaal nodig hebt. Op een desktopscherm met normale pixeldichtheid is dat 1200 pixels. Bij dubbele pixeldichtheid is dat 2400. Op de telefoon met dubbele dichtheid is dat 780, bij drievoudige dichtheid 1170. Binnen deze gekozen voorbeeldsituaties is 3000 pixels breed meer dan de berekende doelbreedte. Dat is geen bovengrens voor alle schermen: andere weergavebreedtes, zoom of pixeldichtheden kunnen een andere keuze vragen.

Een mogelijke verzameling varianten is dan 800, 1200, 1600 en 2400 pixels breed. Dat zijn kandidaatbestanden, geen voorspelling van de daadwerkelijke download. Controleer welke variant de browser kiest bij de ingestelde layoutinformatie, pixeldichtheid en cachetoestand. Als de oorspronkelijke en de doelafbeelding dezelfde beeldverhouding behouden, heeft de eerste bij normale desktopdichtheid in dit voorbeeld 6,25 keer zoveel beeldpixels: (3000 gedeeld door 1200) in het kwadraat is 6,25. Zonder gelijke beeldverhouding kun je de oppervlakte niet uit alleen de breedte afleiden. Dat zegt iets over verspilde pixels, niet over een gegarandeerde tijdswinst.

Herhaal exact de zes diagnosestappen en leg de nieuwe waarden naast je eerste notities. Controleer minstens deze punten:

• De gekozen variant past bij de geteste weergavebreedte en pixeldichtheid. Een smal scherm hoeft niet altijd een kleiner bestand te krijgen dan een breed scherm met lagere pixeldichtheid.
• Vergelijk de download met de berekende doelbreedte en beschikbare kandidaten. Enige overmaat kan logisch zijn als de dichtstbijzijnde grotere variant wordt gekozen; een exacte grens is geen algemene browserregel.
• Het beeld oogt scherp op een scherm met hoge pixeldichtheid, indien beschikbaar.
• De uitsnede klopt op elk formaat, zodat belangrijke inhoud niet wegvalt.
• De hero verschijnt zonder dat de tekst eromheen verspringt. Geef het element daarvoor vaste breedte- en hoogtewaarden of een beeldverhouding mee.

MDN maakt onderscheid tussen navigatie- en resourcetimings voor alle onderdelen die een pagina binnenhaalt. Je kunt die gegevens in de ontwikkelaarstools bekijken om te zien welke bestanden de browser effectief laadde. Een lagere bestandsgrootte is een controleerbaar resultaat. Een snellere pagina voor elke bezoeker is dat niet, omdat verbinding en toestel variëren.

Geef je ontwikkelaar of cms-beheerder een korte opdracht mee: de weergegeven breedtes per schermbreedte, de gewenste uitsneden, het gewenste bestandstype, de vaste verhouding van het beeld en de plaats op de pagina. Voeg je meetnotities toe, zodat ze kunnen herhalen wat jij zag. Vraag ook hoe het cms varianten genereert, want sommige systemen maken dat automatisch, andere niet. Dat controleert de beheerder in de eigen omgeving.

Vergeet de beschrijvende tekst niet. De tutorials van W3C WAI behandelen toegankelijke afbeeldingen. Een hero die puur decoratief is, vraagt een andere aanpak dan een hero die informatie draagt.

Grenzen: deze procedure meet één afbeelding op de pagina's die je test, in jouw browser. Ze bewijst geen volledige technische implementatie en geen invloed op bezoekersgedrag of zoekresultaten. Wil je weten welke publiek zichtbare signalen je website nu afgeeft, bekijk ze dan via Marketing Scan. Die scan voert niet alle controles uit die hier staan.