{LearnSidebar}}

In den beginne was het web alleen tekst en was het echt heel saai. Gelukkig duurde het niet lang totdat de mogelijkheid voor het inbedden van afbeeldingen (en andere soorten inhoud) in webpagina’s werd toegevoegd. Er bestaan ook nog andere soorten multimedia, maar het is logisch om te beginnen met het nederige <img>-element, dat wordt gebruikt om eenvoudige afbeeldingen in een webpagina te plaatsen. In dit artikel bekijken we in detail hoe we dit element gebruiken. We bespreken de basisprincipes, de toevoeging van bijschriften met het <figure>-element, en hoe het zich verhoudt tot CSS-achtergrondafbeeldingen.

Vereisten: Basiscomputervaardigheden, de installatie van basissoftware, basiskennis van het werken met bestanden, vertrouwdheid met HTML-basisprincipes (zoals die worden besproken in Beginnen met HTML).
Doel: U leert hoe u eenvoudige afbeeldingen in HTML kunt inbedden, hoe u hieraan bijschriften kunt toevoegen, en hoe HTML-afbeeldingen zich verhouden tot CSS-achtergrondafbeeldingen.

Hoe plaatsen we een afbeelding op een webpagina?

Om eenvoudige afbeelding op een webpagina te plaatsen, gebruiken we het <img>-element. Dit is een leeg element (wat inhoudt dat het geen tekst of sluittag bevat) en slechts één attribuut nodig heeft om nuttig te zijn: het src-attribuut (soms uitgesproken als het volledige woord, source, ofwel bron in het Nederlands). Het src-attribuut bevat een pad dat naar de afbeelding wijst die u in de pagina wilt inbedden. Dit pad kan een relatieve of een absolute URL zijn, net zoals de waarden van het href-attribuut dat tot het <a>-element behoort.

Noot: voordat u verdergaat, zou u Een snelle uitleg over URL’s en paden moeten lezen om uw geheugen wat betreft relatieve en absolute URL’s op te frissen.

Als uw afbeelding bijvoorbeeld dinosaur.jpg heet en zich in dezelfde map bevindt als uw HTML-pagina, zou u de afbeelding als volgt kunnen inbedden:

<img src="dinosaurus.jpg">

Als de afbeelding zich in een submap afbeeldingen zou bevinden die zich in dezelfde map als de HTML-pagina zou bevinden (een aanbeveling van Google voor SEO/indexeringsdoeleinden), zou u deze op de volgende manier inbedden:

<img src="afbeeldingen/dinosaurus.jpg">

Enzovoort.

Noot: zoekmachines lezen ook bestandsnamen en gebruiken die om hun zoekresultaten te optimaliseren (SEO of Search Engine Optimalisation in het Engels). Geef uw afbeelding daarom een beschrijvende naam. dinosaurus.jpg is beter dan img835.png.

U zou de afbeelding met een absolute URL kunnen inbedden, zoals in dit voorbeeld:

<img src="https://www.example.com/afbeeldingen/dinosaurus.jpg">

Dat is echter zinloos, want de browser moet dan veel meer werk verrichten. Hij moet het IP-adres van de DNS-server helemaal opnieuw opvragen, etc. Vrijwel altijd bewaart u de afbeeldingen voor uw website toch op dezelfde server als uw HTML.

Waarschuwing: de meeste afbeeldingen zijn auteursrechtelijk beschermd. Plaats geen afbeelding op uw webpagina, tenzij:

1) u de eigenaar van de afbeelding bent
2) u expliciete, geschreven toestemming van de eigenaar van de afbeelding hebt, of
3) u voldoende bewijs hebt dat de afbeelding tot het publieke domein behoort.

Schendingen van het auteursrecht zijn illegaal en onethisch. Bovendien mag u uw src-attribuut nooit gebruiken om een koppeling naar een afbeelding te maken die zich op de website van iemand anders bevindt en waarvoor u geen toestemming hebt gekregen om hiernaar te verwijzen. Dit noemen we ‘hotlinking’ (hete verbindingen maken in het Nederlands). Nogmaals, het is illegaal om iemands bandbreedte te stelen. Ook vertraagt het uw pagina en hebt u geen controle over wat de eigenaar ermee doet; deze kan de afbeelding verwijderen of vervangen door iets gênants.

De code hierboven zou het volgende resultaat opleveren:

A basic image of a dinosaur, embedded in a browser, with Images in HTML written above it

Noot: elementen zoals <img> en <video> worden soms vervangen elementen genoemd (‘replaced elements’ in het Engels), omdat de inhoud en grootte van het element worden gedefinieerd door een externe bron (zoals een afbeelding of een videobestand), niet door de inhoud van het element zelf. 

Noot: u kunt het voltooide voorbeeld van deze sectie op Github vinden (en bekijk ook de broncode.)

Alternatieve tekst

Het volgende attribuut dat we gaan bekijken heet alt. De waarde ervan moet uit een beschrijving van de afbeelding bestaan die we kunnen gebruiken in situaties waarin de afbeelding niet kan worden gezien of weergegeven. De code hierboven bijvoorbeeld kan op de volgende manier worden gewijzigd:

<img src="afbeeldingen/dinosaurus.jpg"
     alt="Het hoofd en de romp van het skelet van een dinosaurus;
          het heeft een groot hoofd en lange scherpe tanden">

De makkelijkste manier om uw alt-tekst te testen is opzettelijk de bestandsnaam verkeerd spellen. Als bijvoorbeeld voor ons voorbeeld de naam dinosooooorus.jpg werd gebruikt, zou de browser in plaats van de afbeelding de alt-tekst weergeven:

The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place.

Waarom zou u de alt-tekst ooit zien of nodig hebben? Wel, het kan om een aantal goede redenen handig zijn:

  • De gebruiker is visueel beperkt en gebruikt een schermlezer om het web aan hem of haar te laten voorlezen. In feite is de alt-tekst die afbeeldingen kan beschrijven voor de meeste gebruikers nuttig.
  • Zoals hierboven beschreven, hebt u misschien het pad of de bestandsnaam onjuist gespeld.
  • De browser ondersteunt het afbeeldingselement niet. Sommige mensen gebruiken nog steeds browsers die alleen tekst ondersteunen, zoals Lynx, dat als alternatief de alt-tekst van afbeeldingen weergeeft.
  • U kunt tekst opgeven die zoekmachines kunnen gebruiken. Zoekmachines kunnen bijvoorbeeld alt-tekst gebruiken om aan hun zoekopdrachten te koppelen.
  • Er zijn gebruikers die hun afbeeldingen hebben uitgeschakeld om zowel het volume van gegevensoverdracht als afleiding te verminderen. Dat is vooral de gewoonte op mobiele telefoons en in landen waar de bandbreedte beperkt en duur is.

Wat moet er binnen datalt-attribuut worden beschreven? In de eerste plaats hangt het af van de reden waarom de afbeelding er is. Met andere woorden, wat u verliest als de afbeelding niet verschijnt:

  • Decoratie. Als de afbeelding alleen decoratie is en geen deel uitmaakt van de inhoud, voeg dan een lege  alt="" toe. Een schermlezer verspilt bijvoorbeeld geen tijd aan het voorlezen van inhoud die de lezer niet echt nodig heeft. Decoratieve afbeeldingen horen niet echt in uw HTML thuis. CSS background images zouden voor het invoegen van decoratie moeten worden gebruikt, maar als het onvermijdelijk is, gebruik dan alt="" .
  • Inhoud. Als uw afbeelding belangrijke informatie bevat, verschaf dan dezelfde informatie in een korte alt-tekst. Of nog beter, in de gewone tekst op uw webpagina die iedereen kan zien. Schrijf geen overbodige alt-tekst. Hoe vervelend is het niet als u goed kunt zien en alle alinea’s zijn twee keer geschreven? Als de afbeelding voldoende in de tekst van uw webpagina wordt beschreven, kunt u gewoon  alt=""gebruiken.
  • Koppeling. Als u een afbeelding tussen <a>-labels zet om er een koppeling van te maken, moet u toch nog toegankelijke koppelingstekst toevoegen. In zo'n geval kunt u die of in hetzelfde <a>-element schrijven, of in het alt-attribuut van de afbeelding. Kies wat voor u het beste werkt.
  • Tekst. Plaats liever geen tekst in afbeeldingen. Als u bijvoorbeeld uw belangrijkste titel van een slagschaduw wilt voorzien, gebruik er dan CSS voor in plaats van de tekst in een afbeelding te plaatsen. Als u dit echt niet kunt vermijden, zorg dan voor een tekst in het alt-attribuut.

In essentie gaat het erom een gebruiksvriendelijke ervaring te bieden, zelfs als de gebruiker de afbeeldingen niet kan zien. Dit zorgt ervoor dat de volledige inhoud voor alle gebruikers toegankelijk is. Probeer een keer alle afbeeldingen in uw browser te blokkeren en kijk dan hoe de webpagina eruitziet. U zult snel beseffen hoe nutteloos een alt-tekst zoals ‘logo’ of ‘mijn favoriete plek’ is als u de afbeeldingen niet kunt zien.

Noot: meer informatie vindt u in onze gids voor Tekstalternatieven.

Breedte en hoogte

U kunt de attributen width (breedte) en height (hoogte) gebruiken om de breedte en de hoogte van uw afbeelding te bepalen. Er zijn meerdere manieren om erachter te komen wat de breedte en de hoogte van uw afbeelding zijn. Op een Mac bijvoorbeeld kunt u Cmd + I gebruiken om de informatie over het afbeeldingsbestand weer te geven. Met ons voorbeeld kunnen we dit doen:

<img src="afbeeldingen/dinosaurus.jpg"
     alt="Het hoofd en de romp van een dinosaursskelet;
          het heeft een groot hoofd met lange scherpe tanden"
     width="400"
     height="341">

Onder normale omstandigheden zal dit de weergave van de afbeelding niet veel beïnvloeden, maar als de afbeelding niet wordt weergegeven, verandert dat. Als de gebruiker bijvoorbeeld net naar de pagina is gegaan en de afbeelding nog niet is geladen, zult u merken dat de browser ruimte vrijlaat waarin de afbeelding kan verschijnen:

The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings

Dit is een goede praktijk; de pagina laadt sneller en soepeler.

U kunt de grootte van uw afbeeldingen echter beter niet met HTML-attributen aanpassen. Als u de afbeeldingsgrootte te groot instelt, leidt dit tot afbeeldingen die er korrelig, wazig of te klein uitzien, en verspilt u bandbreedte aan het laden van een afbeelding die niet aan de behoeften van de gebruiker voldoet. De afbeelding kan er ook vervormd uitzien als u de juiste hoogte-breedteverhouding niet respecteert. Het beste kunt u een afbeeldingseditor gebruiken om uw afbeelding de juiste grootte te geven voordat u deze op een webpagina plaatst.

Noot: als het niet nodig is om de grootte van een afbeelding aan te passen, kunt u beter CSS gebruiken.

Afbeeldingstitels

Net zoals bij koppelingen kunt u title-attributen aan uw afbeeldingen toevoegen om wanneer nodig extra informatie te verschaffen. In ons voorbeeld zouden we dit kunnen doen:

<img src="afbeeldingen/dinosaur.jpg"
     alt="Het hoofd en de romp van een dinosaurusskelet;
          het heeft een groot hoofd met lange scherpe tanden"
     width="400"
     height="341"
     title="Een T-Rex die is tentoongesteld in het Manchester University Museum">

Dit geeft ons een tooltip, net zoals bij koppelingstitels:

The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum

Afbeeldingstitels zijn niet onontbeerlijk. Het is vaak beter om dit soort informatie aan de hoofdtekst van het artikel toe te voegen dan deze vast te maken aan de afbeelding. Er zijn echter omstandigheden waarin ze toch nuttig zijn; in een afbeeldingengalerij bijvoorbeeld hebt u geen plaats voor bijschrijften.

Actief leren: een afbeelding inbedden

Nu is het aan u! In deze sectie voor actief leren gaat u aan de slag met een eenvoudige oefening. U begint met een eenvoudig <img>-label. We willen dat u de afbeelding inbedt die zich op de volgende URL bevindt:

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

Eerder in de tekst werd gezegd dat u nooit naar afbeeldingen op andere servers mag hotlinken, maar dit is gewoon voor leerdoeleinden, dus voor deze ene keer is het oké.

We willen ook dat u:

  • Een alt-tekst toevoegt. Controleer ook dat hij werkt door de URL van de afbeelding onjuist te spellen.
  • Stel de juiste width en height  van de afbeelding in (hint, deze is 200px breed en 171px hoog) en experimenteer met andere waarden om te zien wat het effect is.
  • Geef de afbeelding ook een title.

Als u een fout maakt, kunt u die altijd ongedaan maken via de knop Terugzetten. Als u echt vastloopt, klik dan op Oplossing tonen om een antwoord te zien:

Bijschriften aan afbeeldingen toevoegen met figures en figure captions

Er bestaat een aantal manieren om een bijschrift aan uw afbeelding toe te voegen. Er is bijvoorbeeld niets dat u tegenhoudt om het volgende te doen:

<div class="figure">: 
  <img src="afbeeldingen/dinosaurus.jpg"
       alt="Het hoofd en de romp van een dinosaurusskelet;
            het heeft een groot hoofd met lange scherpe tanden"
       width="400"
       height="341">

  <p>Een T-Rex die wordt tentoongesteld in het Manchester University Museum.</p>
</div>

Dit is in orde. Het bevat de inhoud die u nodig hebt en u kunt het mooi stijlen met CSS. Maar er een probleem: er is niets dat de afbeelding semantisch met het bijschrift verbindt, wat problemen voor schermlezers kan veroorzaken. Als u bijvoorbeeld 50 afbeeldingen en bijschriften hebt, welk bijschrift hoort dan bij welke afbeelding?

Er is een betere oplossing: u kunt de HTML5-elementen <figure> en <figcaption> gebruiken. Deze zijn voor dit specifieke doel gemaakt: om een semantische container voor figuren te verschaffen en de figuur duidelijk met het bijschrift te verbinden. Ons voorbeeld hierboven kan op de volgende wijze worden herschreven:

<figure>
  <img src="afbeeldingen/dinosaurus.jpg"
       alt="Het hoofd en de romp van een dinosaurusskelet;
            het heeft een groot hoofd met lange scherpe tanden"
       width="400"
       height="341">

  <figcaption>Een T-Rex die wordt tentoongesteld in het Manchester University Museum.</figcaption>
</figure>

Het <figcaption>-element vertelt browsers en ondersteunende technologie dat het bijschrift de andere inhoud van het <figure>-element beschrijft.

Noot: vanuit het oogpunt van toegankelijkheid hebben bijschriften en alt-tekst verschillende rollen. Bijschriften zijn ook nuttig voor mensen die de afbeelding kunnen zien, terwijl alt-tekst dezelfde functionaliteit biedt als een ontbrekende afbeelding. Daarom zouden bijschriften en alt tekst niet hetzelfde moeten zeggen, omdat ze allebei verschijnen als de afbeelding afwezig is. Probeer de afbeeldingen in uw browser uit te schakelen en kijk hoe alles eruitziet.

Een figuur hoeft geen afbeelding te zijn. Het kan een onafhankelijke inhoud zijn die:

  • Uw betekenis op een compacte makkelijk te begrijpen manier uitdrukt
  • Op verschillende plaatsen in de lineaire stroming van de pagina kan worden geplaatst
  • Essentiële informatie verschaft die de hoofdinhoud ondersteunt

Een figuur kan uit verschillende afbeeldingen bestaan, een codfragment, audio, video, vergelijkingen, een tabel, of iets anders.

Actief leren: een figuur maken

In deze sectie voor actief leren willen we dat u de voltooide code van de vorige oefening neemt en die in een figuur verandert:

  • Neem het op in een <figure>-element.
  • Kopieer de tekst uit het title-attribuut, verwijder het title-attribuut en plaats de tekst in een <figcaption>-element onder de afbeelding.

Als u een fout maakt, kunt u die altijd ongedaan maken via de knop Terugzetten. Als u echt vastloopt, klik dan op Oplossing tonen om een antwoord te zien:

CSS-achtergrondafbeeldingen

U kunt ook CSS gebruiken om afeeldingen in webpagina’s in te bedden (en JavaScript, maar dat is een heel ander verhaal). De CSS-eigenschap background-image en de andere background-*-eigenschappen worden gebruikt om het plaatsen van achtergrondafbeeldingen te beheren. Om bijvoorbeeld een achtergrondafbeelding in alle alinea’s in een pagina te plaatsen, zou u dit kunnen doen:

p {
  background-image: url("afbeeldingen/dinosaurus.jpg");
},

Het resultaat is een ingebedde afbeelding die makkelijker kan worden gepositioneerd en beheerd dan HTML-afbeeldingen. Dus waarom HTML-afbeeldingen gebruiken? Zoals hierboven al aangegeven, zijn CSS-achtergrondafbeeldingen er alleen voor decoratie. Als u gewoon iets wilt toevoegen dat mooi is om het visuele aspect van uw pagina te versterken, is dat prima. Bedenk wel dat zulke afbeeldingen geen enkele semantische betekenis hebben. Ze kunnen geen tekstequivalent bevatten, zijn onzichtbaar voor schermlezers, etc. Daarin blinken HTML-afbeeldingen dan weer uit!

Samengevat: als een afbeelding betekenisvol is voor de inhoud van uw pagina, moet u een HTML-pagina gebruiken. Als een afbeelding niet meer dan decoratie is, gebruik dan CSS-achtergrondafbeeldingen.

Noot: u leert nog veel meer over CSS-achtergrondafbeeldingen in onze sectie CSS.

Voorlopig is dit alles. We hebben afbeeldingen en bijschriften in detail besproken. In het volgende artikel gaan we een tandje bijsteken en bespreken we hoe we HTML kunnen gebruiken om video en audio in pagina’s in te bedden.

Documentlabels en -medewerkers

 Aan deze pagina hebben bijgedragen: Tonnes, mientje
 Laatst bijgewerkt door: Tonnes,