Responsive afbeeldingen en srcset

Responsive afbeeldingen zijn afbeeldingen die per apparaat de passende grootte laden. Een telefoon met een klein scherm hoeft geen beeld van 2400 pixels breed te downloaden, terwijl een groot scherm daar juist baat bij heeft. Met de HTML-attributen srcset en sizes geef je de browser de informatie om zelf de juiste keuze te maken.

Je kiest dus niet zelf voor elk apparaat. Je levert meerdere versies van dezelfde afbeelding aan, en de browser kiest de beste op basis van schermbreedte en pixeldichtheid. Hoe je de bestanden zelf kleiner maakt, lees je bij afbeeldingen optimaliseren.

Het attribuut srcset bevat een lijst met beschikbare versies van een afbeelding, met per versie de breedte in pixels. Een voorbeeld: een kleine versie van 480 pixels breed en een grote versie van 1200 pixels breed. De browser weegt die lijst af tegen het scherm van de bezoeker.

Bij een scherm met een hoge pixeldichtheid kan de browser een scherpere versie kiezen, zonder dat de hele site zwaarder wordt. Houd de beeldverhouding gelijk over alle versies, zodat de afbeelding overal even groot en passend getoond wordt. Met een nieuw formaat als WebP wordt elk bestand nog kleiner, maar de keuze van de juiste breedte blijft belangrijk.

Het attribuut sizes vertelt de browser hoe breed de afbeelding op de pagina gaat worden, afhankelijk van de schermbreedte. Zonder sizes gaat de browser ervan uit dat de afbeelding de volledige breedte van het scherm vult. Dat is bij een kolom in een tweekoloms layout vaak niet waar, en dan laadt de browser een te grote versie.

Een voorbeeld: op een smal scherm is de afbeelding de volle breedte, en op een breder scherm nemen de helft van de pagina in. Die twee situaties beschrijf je met sizes, zodat de browser per schermbreedte de juiste versie uit srcset kiest.

Naast srcset en sizes zijn de attributen width en height belangrijk. Ze geven de browser de verhouding van de afbeelding voordat het bestand is gedownload. Daardoor kan de browser al de juiste ruimte reserveren, en verspringt de tekst niet wanneer de afbeelding er uiteindelijk is. Dat draagt bij aan een lagere CLS-score.

In de praktijk combineer je width en height met CSS die de afbeelding schaalbaar maakt, bijvoorbeeld zodat hij nooit breder wordt dan zijn container. Zo blijft de verhouding behouden en past de afbeelding zich aan het scherm aan.