Wat is image source set <img srcset>?
Image sourceset <img srcset> is een code die bedoeld is om de afbeeldingen op je website mobiel-vriendelijk te maken.
Andere manieren om je afbeeldingen mobiel-vriendelijk te maken zijn:
- Het gebruik van css. Dat kan dan weer op twee manieren:
- Schalen: het vergroten en / of verkleinen van je afbeeldingen afhankelijk van de grootte van het scherm.
- Het vertonen van andere afbeeldingen bij andere afmetingen van het scherm
- Door het gebruik van de <picture>-code.
Waarom zou je gebruik maken van <img srcset>?
Mobielvriendelijkheid van je website is zeer belangrijk voor de positie die je site kan innemen in de zoekmachines. Als je website niet mobiel-vriendelijk is, dan wordt het lastig (-er) om hoog te komen staan wanneer iemand zoekt met een mobiel apparaat. Een lagere positie leidt weer tot minder bezoekers en dat heeft dan ook weer zijn effect op de zoekresultaten wanneer iemand met een desktop zoekt.
Dus je website moet mobiel-vriendelijk zijn en daarmee moeten ook je afbeeldingen mobiel-vriendelijk zijn.
Om je plaatjes mobiel-vriendelijk te maken kun je ze ook schaalbaar maken, zodat ze groter en kleiner kunnen worden gemaakt.
De nadelen van schaalbare afbeeldingen zijn gelijk de redenen waarom je kunt kiezen voor de img scrset en / of picture code:
- Het laden van plaatjes kost tijd. Tijd is één van de belangrijkste factoren waarom iemand je site voortijdig verlaat. Door nu voor verschillende scherm-afmetingen verschillende plaatjes aan te leveren, kun je kleinere plaatjes vertonen op kleinere schermen (dus mobiele apparaten). Je pagina wordt daardoor weer sneller.
- Het verkleinen van een afbeelding kan ervoor zorgen dat het plaatje te klein wordt om te tonen wat je wilt laten zien. Met de picture code of css heb je dan zelf in de hand wat vertoond wordt.
Wanneer kies je voor <picture> of css in plaats van voor <img srcset>?
Bij de image-source set code maak je verschillende afmetingen van dezelfde afbeelding. De browser bepaalt uiteindelijk welk plaatje vertoond wordt, maar net als bij Google’s snippets kun je hier ook sterke suggesties meegeven.
Wil je liever andere afbeeldingen laten zien op een ander formaat scherm (bijv. een uitsnede van het plaatje), dan kun je dat beter doen via de <picture>-code, of het inrichten via css (@media screen etc). Op die manier heb je meer kans dat het plaatje dat jij vertoond wilt hebben op een bepaalde schermafmeting, ook dan daadwerkelijk vertoond wordt.
Vooral met mobiele apparaten zie je dat een image-source-set wel eens anders reageert dan je zou willen.
Hoe maak je een <img srcset>?
Heb je een website gemaakt met WordPress, dan kun je hiervoor een plugin gebruiken die het gelijk regelt voor je.
Let wel even op of de maten die worden aangehouden door die plug-in overeenkomen met de maten die jij wilt hebben en als dat niet het geval is of je die erbij kunt maken. Zo’n plugin maakt gelijk de plaatjes aan voor je source set en afhankelijk van je plugin, zet die plugin de plaatjes ook als <img srcset> op je webpagina. En soms moet je dat alsnog handmatig doen. Dus dat volgt hieronder.
Wil / moet je je afbeeldingen zelf als <img srcset> inregelen, dan kun je dat zo doen:
- Maak verschillende plaatjes voor de verschillende afmetingen.
- Upload deze naar je pagina.
- Gebruik de volgende code op je pagina:
- Plaatje: <img
- geef aan dat je gebruik maakt van meer afbeeldingen in plaats één afbeelding: srcset=”
- Geef de locatie op van de afbeeldingen met achter elke afbeelding de maximale breedte die voor de afbeelding geldt dmv aantal pixels + w:
- plaatje-s.jpg 300w,
- plaatje-m.jpg 600w,
- plaatje-l.jpg 1200w,
- plaatje-xl.jpg 2000w,”
- Op welk breekpunt qua breedte er moet worden overgegaan naar een ander plaatje, voorbeeld:
- sizes=”(max-width: 300px) 250px,
- (max-width: 600px) 550px,
- 900px”
- Als browser geen image source set ondersteunt laat dan dit plaatje zien: src=”basis-plaatje.jpg”>
