Afbeeldingen

Op het huidige WWW kom je op vrijwel alle pagina's afbeeldingen tegen. Dat is niet verwonderlijk want met een goed gebruik van afbeeldingen kun je een website veel aan duidelijkheid en aantrekkelijkheid laten winnen.

Mits goed gebruikt zijn afbeeldingen een uitstekend middel om de tekst te verduidelijken en de aandacht van je bezoekers te trekken.

De keerzijde hiervan is dat als je afbeeldingen niet goed gebruikt het effect juist tegengesteld kan zijn. De bezoekers worden door de veelheid aan kleuren, plaatjes en animaties op het scherm afgeleid en zien door de bomen het bos niet meer.

Grafische bestandsindelingen

Er bestaat een groot aantal grafische bestandsformaten, maar voor het WWW worden meestal de volgende drie formaten gebruikt:

GIF

(Graphics Interchange Format). Een formaat wat gebruikt wordt voor kleine afbeeldingen met weinig kleuren. Het GIF formaat kan maar 256 kleuren tegelijk in een afbeelding hebben waardoor het maar beperkt te gebruiken is. Omdat GIF als enige formaat animaties ondersteund is het nog altijd populair op internet.

JPEG

(Joint Photographic Expert Group). Geschikt voor weergeven van fotorealistische afbeeldingen. Dit is een lossy formaat. Wat betekent dat afbeeldingen kwaliteit verliezen als je ze opslaat als een JPEG, maar daardoor wel als een heel klein bestand kan worden opgeslagen. Op een foto is dit kwaliteitsverschil vaak nauwelijks waar te nemen. Bij een afbeeldingen met scherpe lijnen en effen vlakken zie je dit kwaliteitsverschil wel. JPEG ondersteund in tegenstelling tot GIF en PNG geen transparantie.

PNG

(Portable Network Graphics). De vervanger van GIF. PNG slaat afbeeldingen op zonder kwaliteitsverlies en zonder beperking op het aantal kleuren. Dit formaat wordt dan ook het meest gebruikt voor de grafische elementen van een webpagina.

Afbeeldingen in een webpagina opnemen

Om plaatjes in een pagina op te nemen gebruiken we de tag <img> (image) met in ieder geval het attribuut src (source). De img-tag heeft geen sluit-tag. De meest eenvoudige code om een plaatje in je document op te nemen ziet er dan als volgt uit:

Je kan hier net als bij hyperlinks absolute en relatieve URL's gebruiken. Bovenstaand gebruiken we een simpele relatieve URL.

Attributen van de img-tag

alt

Soms kan een afbeelding niet worden weergegeven. Misschien omdat het niet kan worden gedownload, of omdat het apparaat te beperkt is om het weer te geven. In dat geval is het fijn om de gebruiker te laten weten wat op de plek van het plaatje stond met behulp van het alt attribuut (alternative). Let op dat dit attribuut verplicht is om je aan de HTML standaard te houden!

title

De title wordt weergegeven als de gebruiker een seconde met de muis boven het plaatje blijft staan. Door slim gebruik te maken van deze eigenschap kun je bijvoorbeeld ook een toelichting geven op een mogelijke actie die de gebruiker uit kan voeren als hij op het plaatje klikt.