HTML afbeeldingen, het <img> element

Het HTML <img> element wordt gebruikt om een afbeelding in een webpagina in te voegen. In plaats van de afbeelding zelf, wordt er een link naar de afbeelding in de pagina opgenomen. Het <img> element is een leeg element, wat betekent dat het alleen attributen bevat en geen sluitingstag heeft.

Er zijn twee verplichte attributen voor het <img> element:

• src: src (van het Engels source of bron) bevat het pad naar de afbeelding die de browser moet tonen op de plaats waar het img-element verschijnt. Dit pad kan een relatief pad zijn (verwijzend naar een locatie op de lokale harde schijf) of een absoluut pad (meestal een URL naar een locatie op een externe server).
• alt: alt (van het Engels alternative) biedt een tekstalternatief voor de afbeelding, voor het geval deze niet kan worden geladen of wanneer de gebruiker een schermlezer gebruikt.

Voorbeeld van een img-element met de verplichte attributen:

<img src="flower.png" alt="Een prachtige bloem">

Andere belangrijke attributen zijn:

• width en height: Definiëren de breedte en hoogte van de afbeelding.
• title: Geeft aanvullende informatie over de afbeelding, zichtbaar als tooltip bij mouseover.

Lazy Loading van afbeeldingen

Lazy loading is een optimalisatietechniek waarbij het laden van afbeeldingen wordt uitgesteld tot ze bijna in de viewport komen. Dit verbetert de laadsnelheid van de webpagina, vooral bij pagina's met veel afbeeldingen.

Voorbeeld van lazy loading:

<img src="flower.jpg" alt="Een prachtige bloem" loading="lazy">

Door het attribuut loading="lazy" toe te voegen, instrueer je de browser om de afbeelding pas te laden wanneer deze bijna in het zicht van de gebruiker komt. Dit kan de laadtijd van de pagina aanzienlijk verkorten.

Tip: Voeg "loading='lazy'" alleen toe aan afbeeldingen die below the fold zijn gepositioneerd.

Afbeeldingsformaten

Het kiezen van het juiste afbeeldingsformaat is cruciaal voor zowel de prestaties als de kwaliteit van de afbeelding. Verschillende formaten hebben unieke kenmerken en zijn geschikt voor specifieke toepassingen:

• WebP - Een modern formaat dat efficiënt is in termen van bestandsgrootte.
• JPEG - Uitstekend voor foto's en afbeeldingen met veel details en kleuren.
• PNG - Ideaal voor afbeeldingen die transparantie nodig hebben.
• GIF - Geschikt voor eenvoudige animaties en afbeeldingen met beperkte kleuren.
• SVG - Perfect voor vectorafbeeldingen zoals iconen en logo's.

Voor een gedetailleerd overzicht van de verschillende afbeeldingsformaten en hun toepassingen kun je hier terecht.

Het Gebruik van <figcaption> voor bijschriften bij afbeeldingen

Het HTML <figcaption> element wordt gebruikt in combinatie met het <figure> element om een bijschrift te geven aan een afbeelding. Dit verbetert de context en verduidelijking voor de kijker. Het <figure> element omkadert de afbeelding (<img>) en het bijbehorende bijschrift (<figcaption>).

Voorbeeld van het <figcaption> element:

<figure>
    <img src="flower.png" alt="Een prachtige bloem">
    <figcaption>Een voorbeeld van een prachtige bloem</figcaption>
</figure>
    

In dit voorbeeld wordt een afbeelding van een bloem weergegeven met een bijschrift eronder. Dit biedt extra context en draagt bij aan een betere gebruikerservaring.

Responsieve afbeeldingen met max-width: 100%

Om ervoor te zorgen dat afbeeldingen goed worden weergegeven op verschillende schermgroottes, is het essentieel om ze responsief te maken. Een veelgebruikte techniek is het instellen van max-width: 100% op afbeeldingen. Dit zorgt ervoor dat de afbeelding zich automatisch aanpast aan de breedte van zijn container zonder de originele verhoudingen te verliezen.

Voorbeeld van responsieve afbeeldingen:

img {
    max-width: 100%;
    height: auto;
}
    

In dit voorbeeld wordt een CSS-stijl toegepast op alle <img> elementen, waarbij de maximale breedte van de afbeelding beperkt is tot 100% van de breedte van zijn container. De 'height: auto;' zorgt ervoor dat de hoogte van de afbeelding zich aanpast om de aspectratio te behouden.

Terug naar boven