Responsive images in HTML

Er zijn verschillende manieren om afbeeldingen op je website te plaatsen. Je kan gebruik maken van de IMG-tag of je kan een afbeelding toevoegen als achtergrondafbeelding aan een element via CSS. Er zijn nog andere, obscure mogelijkheden, maar dit zijn de twee voornaamste. De IMG-tag is de meest gebruikelijke.

Het nadeel van IMG is dat je één afbeelding opgeeft, met één hoogte en breedte, die je overigens wel via CSS (of desnoods Javascript, maar laten we het daar maar niet over hebben) kan wijzigen. Dit was vroeger geen probleem, op je 17”-monitor, waarop alle browsers full screen waren geopend.

Tegenwoordig echter zijn er meer devices en meer formaten om rekening mee te houden. Niet alleen de desktop of de laptop, ook de tablet en de mobiele telefoon en bijvoorbeeld ook steeds meer de televisie. Deze devices willen afbeeldingen op een andere manier tonen, misschien scherper, misschien past bij een ander formaat van je website wel een andere afbeelding. Mobiele telefoons willen wellicht wel een kleinere afbeelding, in verband met data, en niet een afbeelding van 3000 bij 2000 pixels die 7 megabyte groot is, maar daar kan je met de gebruikelijke IMG-tag weinig mee doen.

HTML heeft hier een oplossing voor: PICTURE. De PICTURE-tag geeft aan dat een afbeelding getoond gaat worden, maar afhankelijk van het scherm of het apparaattype wordt bepaald welke afbeelding dat is. Met behulp van de elementen SOURCE en IMG kan je aangeven wat de mogelijkheden zijn. IMG wordt gebruikt als er geen andere geschikte afbeelding is aangegeven.

Een voorbeeld (van MDN):

<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
  <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

En:

<picture>
  <source srcset="mdn-logo.svg" type="image/svg+xml">
  <img src="mdn-logo.png" alt="MDN">
</picture>

Mdn-logo-wide.png wordt gebruikt als de media-query (dezelfde die je in CSS gebruikt!) toepasbaar is. Ander wordt mdn-logo-narrow.png gebruikt. In het tweede voorbeeld wordt mdn-logo.svg gebruikt, míts de browser het type image/svg+xml kan weergeven.

Op deze manier kan je ervoor zorgen dat bepaalde afbeeldingen worden gebruikt op bepaalde devices. De ervaring van het bezoeken van een website wordt zo verbeterd, bijvoorbeeld door een afbeelding te gebruiken die beter bij een tablet past, of door de performance van de site te verhogen, door alleen afbeeldingen met een kleine bestandsgrootte te gebruiken als je de site bezoekt op een mobiel.