3.2: Afbeeldingen 2
Normaal wordt een afbeelding weergegeven in z'n oorspronkelijke afmetingen. Anders gezegd: net zo groot als in het teken- of fotoprogramma waarin je hem hebt gemaakt. Of net zo groot als je hem hebt gedownload van het Internet.
Aan het <img> element kunnen we echter de volgende style-opties toevoegen:
style="width: npx;" om de breedte van de afbeelding te wijzigen.
style=" height: npx;" om de hoogte van de afbeelding aan te passen.
Pas je als je alléén de breedte aan dan zal de hoogte automatisch mee aangepast worden. Dat geldt ook voor het aanpassen van alléén de hoogte. In dat geval wordt de breedte automatisch mee aangepast zodat de verhoudingen in orde blijven.
Verander je echter de hoogte èn de breedte dan kan de afmeting vervormen. Voor de letter n vul je een getal in die de grootte in pixels (px) aangeeft. In dat geval wordt de afbeelding weergegeven in de opgegeven afmetingen.
Als je een afmeting opgeeft die groter is dan de oorspronkelijke maat van je afbeelding, zal de weergave minder scherp zijn dan het origineel. Geef je een afmeting op die kleiner is dan het origineel, zal het inlezen van je pagina onnodig lang duren. De bezoeker krijgt weliswaar een klein plaatje te zien, maar zal daarvoor wel de grotere, originele afbeelding moeten inlezen. In beide gevallen is het dus beter om met een tekenpakket de afbeelding zodanig te bewerken, dat deze de juiste afmeting heeft, zoals je hem ook op je pagina wilt hebben.
In html5 is het belangrijk om alt="tekst" toe te voegen aan een afbeelding. Deze tekst moet een beschrijving zijn van wat er op de afbeelding te zien is. Deze alt-tekst is vooral van belang voor blinden en slechtzienden,
die webpagina's "bekijken" met een zogenaamde tekstreader. Deze tekstreader leest de alt-tekst van de afbeelding, zodat de slechtziende/blinde ook weet wat er op de afbeelding staat.
Voeg aan het <img> element de volgende optie toe: alt="tekst". Voor tekst geef je natuurlijk een passende omschrijving van je afbeelding. Let op de aanhalingstekens.
Om alles nog eens duidelijk op een rijtje te zetten volgt hier een voorbeeld van hoe een volledig afbeeldings-element er uit zou kunnen zien:
<img src="images/html5rocket.png" alt="html5 gaat als een raket">
Het uiteindelijke resultaat zie je hieronder:
