Afbeeldingen invoegen in HTML

Een website zonder beeldmateriaal is als een tijdschrift zonder foto's: kaal en weinig aantrekkelijk. Als leerling Grafische Technieken weet je als geen ander hoe krachtig beeldtaal is. Of het nu gaat om foto's, png's, illustraties, logo's of iconen: afbeeldingen brengen een webpagina tot leven.

In deze les leer je hoe je met het <img> element afbeeldingen toevoegt aan een webpagina, hoe je met relatieve paden de weg wijst naar je bestanden en waarom het alt-attribuut onmisbaar is voor toegankelijkheid.

1. Het `<img>` element (Syntaxis)

Om een afbeelding op een webpagina te tonen, gebruik je het <img> element (kort voor image).

Het <img> element is een lege tag (void element). Dit betekent dat het element geen sluitingstag (</img>) heeft en ook geen tekstinhoud omsluit. Alle informatie die de browser nodig heeft om de afbeelding te tonen, geef je mee via attributen.

<!-- De basisopbouw van een afbeeldingselement -->
<img src="images/portfolio.jpg" alt="Een overzicht van grafische ontwerpen op een werktafel">

Een correct <img> element bevat altijd minstens twee verplichte attributen:

src (Source): De locatie waar het afbeeldingsbestand staat opgeslagen.
alt (Alternative text): Een beschrijvende tekst voor wanneer de afbeelding niet kan worden geladen of voor schermlezers.

2. Het `src`-attribuut & Relatieve Paden

Het attribuut src vertelt de browser exact waar hij het afbeeldingsbestand kan vinden. Zoals je hebt geleerd in de les over mappenstructuur, bewaren we afbeeldingen vrijwel nooit los in de hoofdmap, maar netjes gesorteerd in een submap zoals images/.

Omdat je website op verschillende computers of webservers moet kunnen draaien, maken we altijd gebruik van relatieve paden. Dit pad wordt berekend vanaf de plek waar het HTML-bestand staat.

Situatie A: De afbeelding staat in een submap

Je index.html staat in de hoofdmap, en je afbeelding staat in de map images/.

<!-- Je vertelt de browser: ga naar de map 'images' en pak daar 'logo.png' -->
<img src="images/logo.png" alt="Bedrijfslogo van Graphix">

Situatie B: Het HTML-bestand staat zelf in een submap

Stel dat je werkt in het bestand pages/contact.html. De afbeelding staat in de map images/ (in de hoofdmap). Je moet nu vanuit de map pages/ eerst één map omhoog om bij de hoofdmap te komen!

Hiervoor gebruik je de combinatie ../ (twee punten en een schuine streep).

<!-- Je vertelt de browser: ga één map omhoog (../), ga dan de map 'images' in en pak 'kaart.jpg' -->
<img src="../images/kaart.jpg" alt="Locatiekaart van ons grafisch bureau">

Opgelet: Webservers zijn heel gevoelig voor hoofdletters, kleine letters en spaties! Schrijf bestandsnamen altijd in kleine letters en gebruik een koppelteken (-) in plaats van spaties (bijv. grafisch-ontwerp.jpg in plaats van Grafisch Ontwerp.jpg).

3. Het `alt`-attribuut: Onmisbaar voor toegankelijkheid

Het alt-attribuut bevat een alternatieve beschrijving in tekstvorm. Hoewel beginners dit attribuut vaak vergeten, is het een verplicht onderdeel van goede en professionele HTML-code.

Waarom is het `alt`-attribuut zo belangrijk?

Toegankelijkheid (Accessibility): Mensen met een visuele beperking gebruiken schermlezers (screen readers) die de pagina voorlezen. De software leest de alt-tekst voor, zodat zij weten wat er op de foto staat.
Fallback bij fouten: Als het bestand niet kan laden (bijvoorbeeld door een tikfout in het pad of een slechte internetverbinding), toont de browser de alt-tekst op de plek van het gebroken beeld.
Zoekmachineoptimalisatie (SEO): Zoekmachines zoals Google kunnen foto's niet "zien", maar ze lezen wel de alt-teksten om te begrijpen waar de afbeelding over gaat.

<!-- ❌ Slecht: Geen alt-tekst of vage beschrijving -->
<img src="images/foto1.jpg" alt="foto">

<!-- ❌ Slecht: Bestandsnaam of trefwoordenlijst -->
<img src="images/foto1.jpg" alt="foto1.jpg ontwerp grafisch illustratie">

<!-- ✅ Goed: Duidelijke, beschrijvende tekst -->
<img src="images/poster-ontwerp.jpg" alt="Kleurrijke A2-poster met geometrische vormen voor een muziekfestival">

Tip: Vraag jezelf bij het schrijven van een alt-tekst af: "Wat zou ik zeggen als ik deze afbeelding telefonisch moet beschrijven aan iemand die het niet kan zien?"

4. Afmetingen meegeven (`width` en `height`)

Je kunt in HTML met de attributen width (breedte) en height (hoogte) aangeven hoe groot de afbeelding getoond moet worden in pixels.

<img src="images/banner.webp" alt="Sfeerbeeld van de Drukkerij" width="800" height="400">

Vul alleen getallen in (geen px toevoegen in HTML-attributen).
Als je slechts één van de twee attributen opgeeft, schaalt de browser de andere zijde automatisch mee in de juiste aspect ratio (beeldverhouding).

Let op: Hoewel je in HTML de afmetingen kunt instellen, doen we de uiteindelijke visuele vormgeving en responsiviteit (voor mobiel en tablet) bij voorkeur via CSS.

5. Welk afbeeldingsformaat kies je?

Als grafisch vormgever is het belangrijk dat je de juiste bestandstypes kiest voor het web, om te voorkomen dat je pagina erg traag wordt door te grote bestanden:

Formaat	Ideaal voor	Kenmerken
`.jpg` / `.jpeg`	Foto's en complexe afbeeldingen.	Goede compressie, geen transparantie mogelijk.
`.png`	Logo's, iconen, illustraties.	Ondersteunt transparantie (doorschijnende achtergrond).
`.svg`	Vectorafbeeldingen (logo's, iconen).	Schaalbaar zonder kwaliteitsverlies, extreem klein qua bestandsgrootte.
`.webp`	Moderne webfoto's en afbeeldingen.	Zeer sterke compressie met behoud van hoge kwaliteit (de nieuwe webstandaard).

6. Een compleet praktijkvoorbeeld

Hier zie je hoe je afbeeldingen correct toepast binnen een logische HTML-structuur:

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <title>Mijn Grafisch Portfolio</title>
</head>
<body>

    <header>
        <!-- Vector-logo met transparante/schaalbare eigenschappen -->
        <img src="images/logo-studio.svg" alt="Logo Studio Drukwerk" width="150">
    </header>

    <main>
        <article>
            <h1>Eindproject: Typografische Poster</h1>
            <p>Voor het vak Grafische Technieken ontwierpen we een poster gebaseerd op een klassiek lettertype.</p>
            
            <!-- Foto van het project met een duidelijke relatieve verwijzing -->
            <img src="images/projecten/poster-bodoni.jpg" alt="Geprinte A2-poster van het lettertype Bodoni in zwart-wit">
        </article>
    </main>

</body>
</html>

Samenvatting

Gebruik het <img> element om afbeeldingen in te laden. Het is een lege tag zonder sluitingstag.
Het src attribuut wijst met een relatief pad naar de locatie van de afbeelding (bijv. images/foto.jpg of ../images/foto.jpg).
Het alt attribuut is verplicht voor toegankelijkheid, zoekmachines en als de afbeelding niet kan laden.
Kies het juiste bestandstype for the job: .jpg voor foto's, .png voor transparantie, .svg voor schaalbare vectorlogo's en .webp voor optimale websnelheid.

Afbeeldingen invoegen in HTML

1. Het <img> element (Syntaxis)

2. Het src-attribuut & Relatieve Paden