Responsive images met srcset

Easy-peasy…

<img src="img/afbeelding.jpg"
     srcset="
             img/afbeelding-klein.jpg 480w,
             img/afbeelding-medium.jpg 640w,
             img/afbeelding.jpg 1280w,
             img/afbeelding-enorm.jpg 1920w
     ">

Op video na zijn afbeeldingen zijn de grootste data-trekkers op je website. Wat is er nou mooier dan een atribuut waarin je ‘gewoon’ een lijstje van verschillende formaten meegeeft? Nee. Niets.
Je blijft src normaal gebruiken en gebruikt srcset voor de browsers die weten wat dit attribuut is. De browser beslist dan zelf welk van de afbeeldingen hij laat zien.

Als afbeelding-klein.jpg perfect is voor apparaten van 480px breed, plak je daar dus 480w achter.

Leave a Reply

Your email address will not be published. Required fields are marked *