Welke HTML-tag helpt bij het laden van verschillende afbeeldingen voor verschillende schermresoluties?

Om verschillende afbeeldingen te laden afhankelijk van de schermresolutie in HTML, wordt de <picture>-tag gebruikt. Hierbinnen kunnen meerdere <source>-elementen worden gespecificeerd met het media-attribuut dat de voorwaarden voor de afbeeldingskeuze bepaalt, en de <img>-tag met een reserveafbeelding.

Voorbeeld:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Voorbeeldafbeelding">
</picture>

In dit voorbeeld kiest de browser large.jpg als de schermbreedte 800px of meer is, medium.jpg bij een breedte tussen 400px en 799px, en small.jpg voor kleinere schermen.

Ook voor eenvoudige gevallen kan het srcset-attribuut op de <img>-tag worden gebruikt, waarbij verschillende afbeeldingen met hun afmetingen worden gespecificeerd.