Hoe zorg je ervoor dat de afbeelding in verkleinde grootte wordt geladen op mobiele apparaten?

Om afbeeldingen in een verkleinde formaat op mobiele apparaten te laden, worden adaptieve afbeeldingen gebruikt met HTML en CSS:

1. Gebruik het <img>-element met de attributen srcset en sizes, zodat de browser het juiste afbeeldingsformaat kiest op basis van de schermgrootte:

<img src="image-large.jpg"
     srcset="image-small.jpg 480w, image-medium.jpg 800w, image-large.jpg 1200w"
     sizes="(max-width: 600px) 480px, (max-width: 900px) 800px, 1200px"
     alt="Omschrijving van de afbeelding">

2. Gebruik CSS om de maximale breedte van de afbeelding te beperken:

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

3. Moderne afbeeldingsformaten (WebP, AVIF) kunnen ook worden toegepast om de bestandsgrootte te verkleinen.

Op deze manier downloadt de browser op een mobiel apparaat het optimale formaat bestand, wat de prestaties verbetert en het dataverkeer vermindert.