Om een afbeelding toe te voegen aan je HTML-document hoef je alleen maar een regel tussen te voegen met de tag <img>. Hiermee worden de beelden vastgelegd in HTML. Om een afbeelding op een pagina weer te geven, moet je het attribuut src gebruiken. Src staat voor "source". De waarde van het attribuut src is de URL van de afbeelding die je wilt weergeven.
<img src="url" alt="naam_afbeelding">
De url verwijst naar de locatie waar het beeld is opgeslagen. Een afbeelding met de naam "flowers", gelegen in de map "img" op "www.site.nl" heeft de URL: www.site.nl/img/flowers.jpg.
<img src="www.site.nl/img/flowers.jpg" alt="bloemen">
Merk op hoe de img element wordt geopend en gesloten met dezelfde tag. Het img element bestaat uit attributen zonder inhoud, daarom is een beëindiging niet nodig.
![]() |
De naam van de afbeelding hebben we "flowers" gegeven. ".jpg" vertelt de browser dat het te maken heeft met een afbeelding. Er zijn 3 verschillende soorten afbeelding bestandstypen die je kunt invoegen in je pagina:
GIF (Graphics Interchange Format) |
![]() |
GIF-afbeeldingen zijn meestal het beste voor graphics en tekeningen, terwijl de JPEG-beelden meestal beter zijn voor foto's. |
Dit is om twee redenen: Ten eerste GIF-afbeeldingen alleen bestaan uit max 256 kleuren, terwijl de JPEG beelden bestaan uit miljoenen kleuren. Ten tweede het GIF-formaat is beter in het comprimeren van eenvoudige beelden dan de JPEG indeling, die is geoptimaliseerd voor meer complexe beelden. Hoe beter de compressie, hoe kleiner de grootte van het beeldbestand, hoe sneller je pagina's kunnen laden. Zoals je waarschijnlijk weet kunnen onnodig 'zware' pagina's zeer vervelend zijn voor de gebruiker.
De GIF en JPEG formaten zijn de meest voorkomende afbeelding bestandstypen, maar de laatste tijd, is het PNG formaat meer en meer populairder geworden (vooral ten koste van het GIF-formaat). Het PNG-formaat bevat in vele opzichten het beste van zowel de JPEG en GIF formaat: miljoenen kleuren en is effectief te comprimeren.
<img src="html.jpg" alt="HTML leren">
Sommige browsers laten de tekst van het alt attribuut verschijnen in een kleine pop-up box wanneer de gebruiker zijn cursor plaatst op de afbeelding. Houd er rekening mee dat bij gebruik ven het alt attribuut, het doel is om een alternatieve beschrijving van het beeld te geven.
<img src="html.jpg" alt="HTML leren" title="Leer HTML op Codecenter.nl">
![]() |
Als je, zonder te klikken, de cursor op de afbeelding hiernaast plaatst dan zie je de tekst: "HTML Leren" verschijnen in een kleine pop-up box. |
<img src="flowers.jpg" alt="bloemen" width="240" height="180">
Je kunt ook het style attribuut gebruiken om de breedte en hoogte van een afbeelding in te stellen.
De waarden worden opgegeven in pixels (gebruik px achter de waarde):
<img src="flowers.jpg" alt="bloemen" style="width:240px; height:180px;">
Het is goed om te weten dat de werkelijke grootte in kb of mb van het beeldbestand gelijk blijft ook al wordt de afbeelding op het scherm kleiner weergegeven. Probeer daarom je afbeelding zo min mogelijk te verkleinen met behulp van de "width" en "height" waarden. Probeer in plaats daarvan altijd het formaat van je afbeeldingen in een grafisch programma aan te passen. Op deze manier worden je pagina's sneller.
<img src="images/flowers.jpg" title="Normaal" width="240" height="180">
<br />
<img src="images/flowers.jpg" title="Vergroot" width="310" height="250">
<p>
<img src="images/penguin.jpg" style="float:left; width:61px; height:46px;">
De afbeelding is toegevoegd aan een paragraaf. De afbeelding wordt links uitgelijnt
zodat de tekst rechts van de afbeelding wordt geplaatst.
</p>
![]() |
Ad blocker gedetecteerd! |
Ons website heeft gedetecteerd dat u een Ad blocker gebruikt. Codecenter.nl is gratis, wij blijven overeind door het weergeven van advertenties en u kunt ons daarbij helpen. Het wordt aanbevolen om uw Ad blocker uit te schakelen zodat u verder gebruik kunt maken van codecenter.nl, alvast bedankt. |