Een teller die de opmaak niet breekt
Een externe afbeelding in een zorgvuldig gebouwde webpagina opnemen, brengt altijd het risico mee de vastgelegde visuele structuur te verstoren. Wanneer een browser een pagina opbouwt, berekent hij de plaats van elk tekstblok en elk plaatje om soepel lezen mogelijk te maken.
Ontbreken bij een afbeelding uitdrukkelijke maten, dan kan de browser de nodige ruimte niet vooraf reserveren. Hij moet wachten tot het afbeeldingsbestand volledig gedownload is om de precieze hoogte en breedte te weten. Die vertraging veroorzaakt het verschijnsel dat verspringende opmaak heet.
De tekst springt plotseling omlaag of opzij om plaats te maken voor het net aangekomen plaatje. Voor wie een artikel probeert te lezen, is die plotselinge beweging bijzonder storend en wekt ze de indruk van technische onbetrouwbaarheid.
Twee getallen in de tag houden de ruimte vast
De oplossing tegen verspringende opmaak is opmerkelijk eenvoudig en bestaat uit vaste kenmerken rechtstreeks in de HTML-code. Elke afbeeldingstag kan een bepaalde hoogte en breedte in pixels aannemen. Staan die maten vooraf in de bron, dan weet de browser meteen hoeveel lege ruimte hij op het scherm moet reserveren, nog voordat het afbeeldingsbestand begint te downloaden.
De ruimte blijft volkomen leeg tot het plaatje aankomt, waardoor de omringende tekst stevig op zijn plaats blijft. De juiste maten vinden vraagt om te kijken naar het ontwerp dat uit de catalogus gekozen is.
Elk ontwerp heeft een exacte, onveranderlijke grootte. Die precieze getallen in de code schrijven maakt het springen volledig ongedaan. Het waarborgt een soepel, ononderbroken laden van de pagina, ongeacht de snelheid van het netwerk.
Wat er verschijnt wanneer de afbeelding dat niet doet
Hapert of faalt een netwerkverbinding, dan kan een ontbrekende afbeelding een lelijk, kapot pictogram op het scherm achterlaten. Om dat netjes op te vangen, speelt het kenmerk voor alternatieve tekst, bekend als het kenmerk alt, een belangrijke rol.
Kan de afbeelding niet getoond worden, dan toont de browser in plaats daarvan de tekst uit dat kenmerk. Voor een puur sierlijk of technisch element als een bezoekerstelling hoort die tekst uiterst kort te blijven of helemaal leeg gelaten te worden met twee aanhalingstekens zonder spatie ertussen.
Een lange, beschrijvende alternatieve tekst rekt het gereserveerde vak op onvoorspelbare manieren uit als de afbeelding niet laadt. Een leeg kenmerk laat eenvoudigweg een lege, onopvallende ruimte over en bewaart de structuur van de voettekst of zijkolom.
Als laatste geladen, met opzet
Moderne webstandaarden bieden extra middelen om te sturen hoe externe plaatjes de laadsnelheid van het document beïnvloeden. Twee kenmerken, loading en decoding, vertellen de browser welke voorrang de afbeelding krijgt.
Het laadkenmerk op lazy zetten zegt de browser het bestand pas op te halen wanneer de lezer werkelijk tot vlak bij die plek scrolt. Het decodeerkenmerk op async zetten laat de browser de hoofdtekst en de opmaak verwerken zonder te wachten tot de afbeeldingsgegevens volledig verwerkt zijn.
Omdat een statistiekplaatje zelden het belangrijkste is op een parochie- of verenigingspagina, zorgen die kenmerken ervoor dat de eigenlijke inhoud altijd eerst verschijnt. Het meetgereedschap neemt stilletjes zijn plaats op de achtergrond in en houdt de hoofdboodschap nooit op.