Afbeeldingen en alt-tekst

Een img-element heeft twee attributen nodig om bruikbaar te zijn: src, dat zegt waar de afbeelding is, en alt, dat zegt wat ze toont als ze niet te zien is.

Het img-element

Afbeeldingen staan niet in het HTML-bestand. De pagina wijst ernaar, en de browser haalt elke afbeelding als apart bestand op. Het element <img> doet het wijzen. Het is een leeg element, dus het heeft geen afsluitende tag, en het attribuut src bevat het adres van de afbeelding, absoluut of relatief, net als de href van een link. Afbeeldingen zijn vervangen elementen: de browser vervangt het element door de afbeelding, en de afbeelding bepaalt hoe groot ze is tenzij je anders aangeeft.

<img src="images/sourdough.jpg"
     alt="A round sourdough loaf with a dark, cracked crust"
     width="400" height="300">

De attributen width en height geven de grootte van de afbeelding in pixels, zonder eenheid. Stel ze in op de echte grootte van het bestand. De HTML komt meestal eerder aan dan de afbeeldingen, dus zonder deze getallen zet de browser eerst de tekst neer en duwt hem naar beneden zodra elke afbeelding klaar is met laden, wat storend is als je al begonnen bent met lezen. Met de getallen reserveert de browser vanaf het begin de juiste ruimte. Gebruik CSS om een afbeelding kleiner of groter te tonen, en verander deze getallen niet.

Alt-tekst schrijven

Het attribuut alt bevat een tekstalternatief. Een schermlezer leest het voor, een browser toont het als het bestand niet laadt, en zoekmachines lezen het om de afbeelding te begrijpen. MDN stelt een eenvoudige test voor: wat zou er verloren gaan als de afbeelding niet verscheen? Schrijf dat, kort. Beschrijf bij een productfoto wat iemand moet weten om het te kiezen. Geef bij een grafiek de strekking, zoals Verkoop verdrievoudigd van januari tot maart, in plaats van Staafdiagram.

• Begin niet met Afbeelding van of Foto van. Schermlezers melden al dat het een afbeelding is.
• Decoratieve afbeeldingen, zoals een golvende scheidingslijn, krijgen een lege alt="". Dan slaan schermlezers ze over. De alt helemaal weglaten is iets anders: sommige schermlezers lezen dan de bestandsnaam voor.
• Als een afbeelding de enige inhoud van een link is, is de alt-tekst de linktekst, dus beschrijf waar de link heen gaat (Home), niet de afbeelding (Broodlogo).
• Als dezelfde informatie al in de tekst naast de afbeelding staat, voorkomt alt="" dat het twee keer wordt gezegd.

Figuren en onderschriften

Als een afbeelding een onderschrift heeft, zet je beide in <figure> en het onderschrift in <figcaption>. Dat koppelt het onderschrift aan de afbeelding voor hulptechnologie, wat een gewone alinea onder de afbeelding niet doet. Een onderschrift en alt-tekst hebben verschillende taken: het onderschrift wordt door iedereen gelezen, terwijl alt de afbeelding vervangt als ze ontbreekt. Ze moeten elkaar niet gewoon herhalen. Een figure hoeft geen afbeelding te bevatten; een codevoorbeeld, een tabel of een gedicht kan ook een figure zijn.

Formaten, data-URL's en inline-SVG

Foto's zijn meestal JPEG of WebP, platte afbeeldingen met scherpe randen zijn PNG, en tekeningen van vormen zijn vaak SVG, een tekstformaat dat op elke grootte scherp blijft. Een kleine afbeelding kan zelfs rechtstreeks in de src worden geschreven als een data-URL die begint met data:image/svg+xml,; de oefeningen hieronder doen dat, zodat er niets van een andere site wordt geladen. Een SVG kun je ook rechtstreeks in de HTML schrijven met een element <svg>. Geef het role="img" en een kind <title> zodat schermlezers er een naam voor hebben. Tot slot zegt loading="lazy" bij afbeeldingen ver onderaan een lange pagina tegen de browser dat hij moet wachten tot de lezer in de buurt scrolt.

Nog een regel van MDN: gebruik alleen afbeeldingen waarvoor je toestemming hebt. Afbeeldingen die je online vindt, zijn auteursrechtelijk beschermd tenzij hun licentie anders zegt, en je src naar andermans server laten wijzen zonder toestemming, hotlinking genoemd, laat hen ook voor jouw verkeer betalen.