Responsive images in HTML

Geschreven door: op maandag 31 december 2018

Leestijd: 2 minuten

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

  • Overeenkomsten tussen Growth Hacking en UX design

    Geschreven door: op zondag 13 september 2020

    Laten we beginnen met wat Growth hacking is, Growth hacking zijn experimenten voor oplossingen die groeiproblemen moeten oplossen. Dit is een nieuwe marketing aanpak die met name wordt gedreven door d ...

    Bekijk het artikel »
  • B2B SEO en Geoptimaliseerde Afbeeldingen

    Geschreven door: op woensdag 12 augustus 2020

    In een tijd waarin 27% van het koopproces van B2B kopers met eigen online research wordt doorgebracht is het essentieel om een goed vindbare website te hebben. Afbeeldingen kunnen, indien geoptimalise ...

    Bekijk het artikel »
  • Prospects zoeken B2B

    Geschreven door: op woensdag 12 augustus 2020

    Het zoeken van B2B prospects is een uitdaging voor elk bedrijf. Met name kwalitatieve B2B prospects.Door vooraf onderzoek te doen naar bedrijven die voldoen aan je criteria en je marketing hierop aan ...

    Bekijk het artikel »
Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
Allrig is de alles in een leverancier binnen de energie-industrie
AOC is een toonaangevend wereldwijd bedrijf actief in de verkoop van kwaliteitsharsen
ERIKS is een toonaangevende en innovatieve leverancier aan de procesindustrie en aan machinebouwers, die zowel de rol van specialist als die van brede MRO-leverancier vervult
Industrieel dienstverlener Heinen & Hopman Engineering uit Bunschoten is dé wereldwijde specialist op het gebied van klimaatbeheersing
Handicare is een internationale organisatie die ouderen helpt om hun dagelijks leven gemakkelijker te maken door het produceren van hoogwaardige trapliften
Op de hoogte blijven?

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