# Afbeeldingen

# Afbeeldingen toevoegen

Afbeeldingen kunnen gebruikt worden om een pagina op te fraaien of om visuele informatie aan de gebruiker te verschaffen. Om een afbeelding op te nemen binnen de HTML-code gebruik je het <img> element. Het <img> element is een leeg element en wordt dus niet voorzien van een sluitingstag. Daarnaast is het ook een inline element. De verdere details over het image-element vinden we in de attributen die er aan toegewezen worden.

• src: dit attribuut is het belangrijkste. De waarde is gelijk aan het pad naar de afbeelding. Het gebruikt dezelfde regels voor paden als die voor links.
• alt: geeft de afbeelding een extra, korte beschrijving die wordt getoond wanneer de afbeelding niet kan worden geladen of wanneer de gebruiker een schermlezer gebruikt.
• title: hoewel title een algemeen attribuut is dat op veel elementen kan worden toegepast, past het zeer goed bij afbeeldingen. Het voorziet de gebruiker van een kleine tooltip wanneer de muiscursor over de afbeelding gaat.
• width: de breedte van de afbeelding in pixels. De breedte-hoogte verhoudingen worden gerespecteerd, waardoor de hoogte van de afbeelding automatisch aangepast wordt.
• height: de hoogte van de afbeelding in pixels. De breedte-hoogte verhoudingen worden gerespecteerd, waardoor de breedte van de afbeelding automatisch aangepast wordt.

De breedte en hoogte van een afbeelding kunnen in het algemeen beter bepaald worden in een stijlblad, om de opmaak verder te scheiden van de HTML-code.

Een voorbeeld:

<img src="afbeeldingen/muis.jpg" alt="Afbeelding van een muis" title="Als de kat van huis is...">

# Bestandstypes en formaten

# Afbeeldingstypes

Er bestaan een groot aantal verschillende bestandstypes voor afbeeldingen. Ze hebben elk hun eigen voor- en nadelen, zowel als specifieke karakteristieken waar je best rekening mee houdt.

• .jpg: het meeste gebruikte afbeeldingstype. Perfect gepast voor foto's of afbeeldingen die niet transparent moeten zijn. Er wordt een lichte compressie toegepast die de kwaliteit (in theorie) aantast, maar dit is vaak niet zichtbaar zonder de afbeelding te vergelijken met het origineel.
• .png: de opkomst van het PNG-bestandstype heeft te maken met de transparantie die het toelaat. Bij transparantie wordt een afbeelding op een transparante achtergrond geplaatst, waardoor enkel het onderwerp van de afbeelding zelf getoond wordt. Dit is vaak handig wanneer de achtergrondkleur van een afbeelding niet overeenkomt met de achtergrondkleur van een pagina.
• .gif: een verouderd bestandstype dat vooral werd gebruikt voor kleine afbeeldingen, meestal tekeningen of icoontjes. Bestanden van dit type vertonen een beperkt kleurenpalet, waardoor de kwaliteit (maar ook bestandsgrootte) kleiner is dan de "concurrentie". GIF-bestanden hebben de unieke eigenschap dat ze kunnen geanimeerd worden, waardoor je kleine animaties op een webpagina kan plaatsen. Ook dit gebruik word tegenwoordig afgeraden.
• .svg: een speciaal bestandstype waarbij de afbeelding zelf bestaat uit een reeks vectoren (wiskundige objecten) die de afbeelding beschrijven. De browser berekent dan zelf hoe de afbeelding er moet uitzien. Het grote voordeel van dit soort afbeeldingen is dat ze eindeloos kunnen schalen zonder kwaliteit te verliezen. Het nadeel is dat ze niet echt kunnen gebruikt worden voor foto's of afbeeldingen met zeer veel detail. Ze zijn dus perfect geschikt voor bijvoorbeeld icoontjes, lijnafbeeldingen of logo's.

# Afbeeldingsformaten

In principe is elk formaat van afbeelding toegelaten voor gebruik op het web. Toch is het een goed idee even stil te staan bij de bestandsgrootte van een afbeelding vooraleer je ze toevoegt aan een pagina. Elke pagina moet immers geladen worden door de browser, waarbij afbeeldingen ook eerst moeten gedownload worden. De snelheid van de internetconnectie van de gebruiker zal dus een directe invloed hebben op de laadtijd van je website.

De methodiek voor het omgaan met bestandsgroottes kan als volgt samengevat worden:

• Verander de afmetingen van de bronafbeelding naar de afmetingen die je op je website wil gebruiken.
• Voorzie meerdere versies van dezelfde afbeelding in meerdere formaten en toon ze naargelang de situatie of apparaat.
• Voorzie thumbnails als preview voor grotere afbeelding. Denk hierbij aan een fotogallerij waarbij je eerst een reeks kleinere afbeeldingen ziet, die kunnen vergroot worden.
• Gebruik verdere optimalisatietechnieken op de afbeeldingen die je wil gebruiken. De website tinyjpg.com is een voorbeeld van een website die dit automatisch voor jou doet, maar er bestaan er nog vele andere!

# Bijschriften

Afbeeldingen kunnen ook voorzien worden van een bijschrift. Een bijschrift geeft extra informatie over een afbeelding die zichtbaar is voor de gebruiker. Het gaat eigenlijk gewoon om tekst in combinatie met een afbeelding, maar opgenomen binnen het semantische element <figure>. Het kindelement <figcaption> bevat de beschrijving van de afbeelding. Door afbeelding en tekst te groeperen binnen het <figure> element begrijpen schermlezers en zoekmachines ook de connectie tussen de twee.

<figure>
    <img src="olifant.jpg" alt="Een zwemmende olifant">
    <figcaption>Olifanten kunnen ook zwemmen!</figcaption>
</figure>

De plaats waar het <figcaption> element staat maakt niet uit. Je mag het even goed boven als onder de afbeelding plaatsen, of de positie volledig veranderen via CSS.

# Afbeeldingen en links

Een afbeelding kan ook als link fungeren, door de afbeelding binnen een <a> element op te nemen. Zo kan het logo van de website gebruikt worden als link naar de homepagina of een thumbnail afbeelding linken naar de originele afbeelding.

<a href="index.html"><img src="logo_html.png" alt="Logo HTML" title="Logo HTML"></a>