Een ontbrekende breedte en hoogte veroorzaakt verschuiving

Een browser bouwt een pagina op uit HTML, CSS en afbeeldingen. Zolang een afbeelding nog niet is binnengehaald en er geen afmetingen bekend zijn, kan de browser er geen juiste ruimte voor reserveren. Zodra het bestand binnenkomt, rekent de browser de pagina opnieuw uit en schuiven elementen eronder op. Dat voelt voor lezers storend, zeker als ze net op een knop wilden klikken.

De MDN-pagina over webprestaties beschrijft prestaties niet alleen als laadtijd, maar ook als hoe soepel inhoud aanvoelt tijdens het gebruik. Een pagina waarop inhoud verspringt, past daar als praktisch voorbeeld bij; de pagina zelf bespreekt layoutverschuiving niet specifiek. Verspringing ontstaat vaak door afbeeldingen zonder afmetingen, maar ook door advertenties, ingesloten video's, lettertypen en late widgets. Deze gids beperkt zich tot afbeeldingen.

Je hebt drie bruikbare manieren om vooraf ruimte vrij te houden. Welke past, hangt van je template en CMS af.

• Breedte- en hoogteattributen op het afbeeldingselement, met de eigen pixelafmetingen van het bestand. Samen met CSS zoals een maximumbreedte van 100% en automatische hoogte blijft de afbeelding responsief, terwijl de browser de verhouding kent. Controleer in je eigen browsers of dat bij jouw opmaak werkt.
• CSS aspect-ratio op de afbeelding of op een omhulsel, handig als je de verhouding via stijlen wilt sturen.
• Een omhulsel met vaste verhouding waarin de afbeelding bijgesneden wordt, nuttig als redacteurs beelden met wisselende verhoudingen uploaden.

Reserveren lost enkel de sprong op. Het optimaliseren en efficiënt serveren van afbeeldingen komt aan bod in de module over afbeeldingen in de cursus over webprestaties op web.dev.

1. Kies drie representatieve pagina's: een artikel, een categoriepagina en je homepage. Noteer per pagina welke afbeeldingen zichtbaar zijn zonder scrollen.
2. Open de pagina in een browservenster en schakel in de ontwikkelaarstools de cache uit. Beperk de netwerksnelheid zodat afbeeldingen merkbaar later binnenkomen.
3. Laad de pagina opnieuw en kijk of de tekst onder een afbeelding opschuift zodra die verschijnt. Maak, als je kunt, een opname van het scherm.
4. Inspecteer elke verdachte afbeelding in de elementweergave. Kijk of er breedte- en hoogteattributen staan en of CSS een verhouding of hoogte opgeeft.
5. Noteer per afbeelding de gereserveerde ruimte voor het laden en de uiteindelijke grootte na het laden. Verschillen ze, dan is dat de plaats van de verschuiving.
6. Herhaal op een smal venster of telefoon, omdat afmetingen daar anders uitvallen.
7. Test ook afbeeldingen die later laden, zoals beelden onder de vouw. Ze verspringen ook als er voor hen geen ruimte gereserveerd is.

Onderstaande gegevens zijn verzonnen en tonen alleen de methode. Een afbeelding heeft eigen afmetingen van 1200 bij 800 pixels. Dat is een verhouding van 3 op 2. In een kolom van 600 pixels breed hoort de gereserveerde hoogte dan 600 maal 800 gedeeld door 1200 te zijn, dus 400 pixels. In een smalle kolom van 360 pixels is dat 240 pixels.

• Invoer: afbeelding 1200 bij 800, kolombreedte 600 en daarna 360.
• Verwachte controle: de hoogte van het afbeeldingsvak vóór het laden is 400 en daarna 240, en komt overeen met de hoogte na het laden.
• Verwachte controle van de tekst: de eerste alinea onder de afbeelding staat voor en na het laden op dezelfde plaats.

Upload een redacteur een bestand van 1200 bij 900 in een vak met een verhouding van 3 op 2, dan moet de afbeelding bijgesneden of geschaald worden. Controleer dat het vak zelf niet meegroeit.

Herhaal na de aanpassing dezelfde testpagina's met dezelfde netwerkbeperking en vergelijk met je eerste opname. Controleer ook of je lazy loading niet per ongeluk op zichtbare afbeeldingen boven de vouw hebt gezet; dat is een aparte beslissing per afbeelding en staat los van het reserveren van ruimte. Test nogmaals op telefoon en op een nieuwe template of CMS-update, want een nieuw beeldformaat kan het gedrag veranderen.

Vergeet de toegankelijkheid niet: de tutorials van W3C behandelen onder meer toegankelijke afbeeldingen. Controleer dus ook dat een alternatieve tekst blijft staan wanneer je de markup aanpast. Dat is een deelcontrole en bewijst geen volledige WCAG-conformiteit. Een labtest in je eigen browser toont wat er op jouw toestel gebeurt, niet wat bezoekers met andere netwerken ervaren, en garandeert geen betere positie in zoekresultaten.

Wil je zien welke publieke signalen je website vertoont? Bekijk ze via Marketing Scan. Een publieke scan meet zichtbare signalen en bewijst niet dat je layout op elk toestel stabiel is.