Afbeeldingen

Je website is nogal saai zonder afbeeldingen. Je wilt bijvoorbeeld foto's en logo's toevoegen. Dit hoofdstuk geeft informatie over de verschillende bestandsformaten voor afbeeldingen en hoe je afbeeldingen in je pagina plaatst.

Bestandsformaten en -grootte

Het meest gebruikte digitale formaat is JPEG. De bestanden hebben namen die eindigen in *.jpeg of *.jpg. Bijna alle digitale camera's maken foto's in dit formaat. Andere veelgebruikte formaten voor afbeeldingen zijn GIF en PNG. Alle onderstaande voorbeelden werken met al deze bestandsformaten.

Sommige tekenprogramma's kunnen GIF bestanden met een andere lijnvolgorde bewaren, "interlaced" heet dat in het Engels. Daarmee kunnen browsers een ruwe versie van de afbeelding tekenen voor het hele bestand binnengehaald is. Nu bandbreedte steeds goedkoper wordt, is dit minder relevant.

Als je afbeeldingen bewaart voor het web, let er dan op dat ze niet te groot worden. Als je afbeelding 100 kB groot is, heeft iemand met een 512 kbps aansluiting (zoals een goedkope ADSL aansluiting) twee seconden nodig om de afbeelding binnen te halen. Als je tien van zulke afbeeldingen op je pagina hebt heeft de lezer twintig seconden nodig om je afbeelding binnen te halen. Dat kan lang genoeg zijn om de lezer door te laten klikken naar een andere pagina.

Als je bijvoorbeeld een fotoalbum online zet, verwacht de lezer dat de pagina's groot zijn. Maar alle andere pagina's moeten snel binnen te halen zijn. Probeer gewone pagina's onder de 100 kB te houden, inclusief afbeeldingen en stylesheets.

Afbeeldingen in de tekst

Het element om een afbeelding in te voegen is heel eenvoudig:

<IMG SRC="w3c-html4.gif" ALT="HTML logo">

Het attribuut SRC="w3c-html4.gif" geeft de naam van het bestand (SRC betekent "source", bron).

Het ALT="HTML logo" attribuut geeft de tekst die de browser toont als de afbeelding niet getoond kan worden of als de gebruiker er voor kiest om geen afbeeldingen te tonen. Blinden en slechtzienden gebruiken braille computers om het web te bekijken en die zijn volledig afhankelijk van het ALT attribuut. Als je afbeeldingen als links gebruikt is het belangrijk een ALT attribuut te gebruiken.

WIDTH en HEIGHT attributen

Het WIDTH en HEIGHT kun je gebruiken om de grootte van je afbeelding in pixels aan te geven:

<IMG SRC="parts/w3c-html4.gif" WIDTH="88" HEIGHT="31" ALT="HTML logo">

Als de browser de afmetingen van de afbeeldingen kent kan met de opmaak van de pagina begonnen worden voor alle afbeeldingen helemaal gedownload zijn. In de meeste tekenprogramma's kun je de grootte van een afbeelding vinden. De meeste browsers laten de grootte van een afbeelding zien als je die opent in een nieuw venster (rechts klikken of ctrl-klik). Goede HTML editors kunnen WIDTH en HEIGHT automatisch invoegen.

Als je iets anders dan de werkelijke grootte van de afbeelding opgeeft, proberen de meeste browsers de afbeelding te vergroten of verkleinen. Kijk eens naar dit voorbeeld:

<IMG SRC="parts/w3c-html4.gif" WIDTH="400" HEIGHT="31" ALT="HTML logo">

Er zijn echter grenzen aan hoever je een afbeelding uit kunt rekken en de resultaten zijn niet altijd voorspelbaar.

TITLE attribuut

Bij afbeeldingen kun je een TITLE attribuut gebruiken. Daarmee kun je tekst laten verschijnen als de muiscursor boven een afbeelding hangt. Hiermee kun je bijvoorbeeld extra toelichting geven:

<IMG SRC="parts/w3c-html4.gif" WIDTH="88" HEIGHT="31" ALT="HTML logo" TITLE="Dit is het officiële HTML 4 logo">

Hierdoor verschijnt de tekst "Dit is het officiële HTML 4 logo" als de muis boven de afbeelding hangt. Het TITLE attribuut werkt met de meeste elementen.