Ga naar hoofdinhoud

Afbeeldingen

Wat ga je leren?​

Een afbeelding op je pagina zetten met de <img>-tag, en waarom de alt-tekst er niet voor de sier staat.

Theorie​

Met de <img> tag voeg je een afbeelding toe. Dit is een zelfsluitende tag — hij heeft geen sluitingstag:

<img src="https://..." alt="Beschrijving" width="300">

De belangrijkste attributen:

AttribuutWat het doet
srcHet adres (URL) van de afbeelding
altAlternatieve tekst als de afbeelding niet laadt, en voor slechtzienden
widthBreedte in pixels
heightHoogte in pixels
tip

Als je alleen width instelt, past de hoogte automatisch mee zodat de afbeelding niet scheef staat.

Het adres van een afbeelding vinden​

De src moet naar het plaatje zelf wijzen, niet naar de pagina waar het op staat. Zo kom je aan dat adres:

  1. Zoek een afbeelding op een website.
  2. Klik er met de rechtermuisknop op en kies Afbeeldingsadres kopiëren. Elke browser noemt het net iets anders: afbeeldingslink, afbeeldingslocatie, maar er staat altijd "afbeelding" in.
  3. Plak het adres tussen de aanhalingstekens van src.

Twijfel je of je het goede adres hebt? Plak het in de adresbalk van een nieuw tabblad. Zie je alleen het plaatje, zonder website eromheen, dan klopt het. Aan het adres zelf zie je het niet: het hoeft niet op .jpg of .png te eindigen, de adressen van picsum.photos in deze les doen dat ook niet.

Let op: bij Google Afbeeldingen zie je eerst een verkleind plaatje. Dat heeft wel een eigen adres, en het slaagt ook voor de controle hierboven, maar het is wazig en werkt vaak maar even. Klik het plaatje aan en ga naar de website waar het vandaan komt; daar klik je met de rechtermuisknop op het grote plaatje.

Predict​

Wat denk je dat er te zien is als je een verkeerde src invult?

Klik hier voor het antwoord

De browser kan de afbeelding niet laden en toont in plaats daarvan de alt tekst en een gebroken-afbeelding-icoontje. Dat is precies waarvoor alt bedoeld is.

Probeer het zelf.​

Editor laden...

Investigate​

Experimenteer met de code:

  • Wat gebeurt er als je width="300" verandert in width="100"?
  • Wat zie je als je de src leeg maakt (src="")?
  • Vervang width="300" door height="200" — wat valt je op aan de breedte?

Modify​

Opdracht: Verander de afbeelding naar een kat. Gebruik deze URL en pas de alt tekst aan.

https://picsum.photos/id/40/300/200
Editor laden...
Tip

Vervang de waarde van het src attribuut door de nieuwe URL. Vergeet niet de alt tekst ook aan te passen: daar staat nu nog "Een hond".

Antwoord
<img
  src="https://picsum.photos/id/40/300/200"
  alt="Een kat"
  width="300"
>

Make​

Opdracht: Bouw een kleine galerij met minstens 3 verschillende afbeeldingen. Geef ze allemaal een logische alt tekst en dezelfde width zodat ze mooi op een rij staan.

Editor laden...
Tip

Zoek plaatjes op internet en kopieer het adres zoals hierboven staat, of gebruik picsum.photos met een ander getal achter /id/. Zorg dat je 3 verschillende <img> tags onder elkaar plaatst in je HTML.

Antwoord
<h1>Mijn Galerij</h1>
<img src="https://picsum.photos/id/10/200/200" alt="Bos" width="200">
<img src="https://picsum.photos/id/20/200/200" alt="Bureau" width="200">
<img src="https://picsum.photos/id/30/200/200" alt="Mok" width="200">

Er gaat iets mis​

De afbeelding laadt niet

Je ziet de alt tekst en een gebroken icoontje, terwijl het adres er goed uitziet. Drie oorzaken, in deze volgorde:

  1. Het adres wijst naar een webpagina, niet naar het plaatje. Plak het in een nieuw tabblad: zie je een hele website, dan heb je het verkeerde adres. Ga terug en klik met de rechtermuisknop op het plaatje zelf.
  2. Het adres begint met http:// in plaats van https://. Op een beveiligde pagina probeert de browser dan zelf https://, en lukt dat niet, dan laat hij het plaatje weg. Zoek een ander plaatje of een andere bron.
  3. De website staat niet toe dat anderen haar plaatjes gebruiken. Dat zie je niet aan het adres; het plaatje blijft leeg. Kies dan een andere bron. Wikimedia Commons en picsum.photos staan het altijd toe.

alt weglaten

<img src="kat.jpg">

De alt tekst is niet verplicht in HTML, maar wel belangrijk:

  • Slechtzienden die een schermlezer gebruiken horen de alt tekst voorgelezen
  • Als de afbeelding niet laadt, zie je de alt tekst in plaats van een leeg vak
  • Zoekmachines gebruiken alt om te begrijpen wat er op de afbeelding staat

Schrijf altijd een zinvolle alt tekst.