Rob's web

Afbeeldingen

Het bekende gezegde zegt: "Een foto zegt meer dan duizend worden".

Onderdersteunde bestandstypen

Grafische objecten zijn er in verschillende bestandstype met ieder hun eigen voor en nadelen. Voor websites is vooral de bestandsgroote van belang terwijl er ook een goede kwaliteit op het scherm wordt verlangt.

Voor tekeningen is het gif bestand het meest geschikt. Het is compact en heeft een beperkt aan kleuren, wat in tekeningen geen bezwaar is.

Voor foto's wordt meestal het jpg type gebruikt wat je naar eigen wil kunt aanpassen tussen grootte en beeldkwaliteit. Ook png is een goed alternatief.

Image tag

De tag is <img> en is van het zelf sluitende type. Correct in xhtml is dan <img />, dus en spatie tussen g en /.

Binnen deze tag wordt de locatie en naam van het plaatje vermeld. Dit doen we met de attribuut src. We krijgen dan:

<img src="/path/plaatje.jpg" />

Voor een snellere opmaak op het scherm wordt aangeraden de maten van de afbeelding in de code te vermelden. Dit doen we met de attribuuts width en height. De browser kan nu de tekst vast opmaken met rekening houden van de ruimte die de afbeeldingen nodig hebben.

De bron code wordt nu:

<img src="plaatje.jpg" width="480" height="599" />

Volgens de richtlijnen dient er ook nog het alt attribuut gebruikt te worden. De rede is dat als de afbeelding niet geladen kan worden er nog iets wordt getoont, n.l. de alt tekst.

De totale code wordt nu:

<img src="plaatje.jpg" width="480" height="599" alt="Dit is een afbeelding" />

Dit is een afbeelding