Responsive images in HTML

Geschreven door: op maandag 31 december 2018

Leestijd:

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.

 

 


Andere blogartikelen

  • Waarom developers het zo leuk vinden bij ons

    Geschreven door: op woensdag 13 november 2019

    Bij ons op kantoor werkt een team van betrokken specialisten, waaronder 4 backend developers en 4 UX developers. Zij zorgen voor een belangrijk fundament binnen dit bedrijf. Een goede reden om te zorg ...

    Bekijk het artikel »
  • Beachvolleyballen voor het goede doel!

    Geschreven door: op vrijdag 25 oktober 2019

    Afgelopen vrijdag 11 oktober  hebben diverse betrokken specialisten uit ons team de handen ineen geslagen met een van onze opdrachtgevers. Samen met De Monchy International B.V. hebben we meegeda ...

    Bekijk het artikel »
  • Het gebruik van een Photoslider

    Geschreven door: op maandag 7 oktober 2019

    Ze zijn er in alle soorten en maten en staan meestal bovenaan een websitepagina. Dan heb ik het natuurlijk over photosliders. Zo bent u vast bekend met de traditionele foto die langzaam vervaagd en wa ...

    Bekijk het artikel »
Bel 072 5345 888
Onze Middelen en Technologieën
microsoft silver partner
Adobe partner
fd-gazellen-2018.jpg
Google analytics
partners-logo.jpg
Op de hoogte blijven?

Meld u aan voor de gratis nieuwsbrief om op de hoogte te blijven van onze activiteiten