Responsieve afbeeldingen stellen de browser in staat om de beste afbeelding voor het apparaat te kiezen — bandwidth besparen op telefoons en scherpe afbeeldingen op high-DPI-schermen.
srcset + sizes — dezelfde afbeelding, verschillende resoluties
srcset geeft kandidaatafbeeldingen weer met hun intrinsieke breedten (400w = 400px breed).sizes vertelt de browser hoe breed de afbeelding op verschillende breakpoints weergegeven zal worden (hier: volledige viewportbreedte onder 600px, anders de helft).sizes + de pixeldichtheid van het apparaat om de kleinste afbeelding te kiezen die nog steeds scherp oogt — voordat er iets wordt gedownload.Een telefoon kan small.jpg kiezen; een Retina-laptop die deze op 50% breedte toont, kan large.jpg kiezen.
<picture>
<source srcset="hero.avif" type="image/avif" /> <!-- modern format -->
<source srcset="hero.webp" type="image/webp" />
<source media="(max-width: 600px)" srcset="hero-cropped.jpg" /> <!-- different crop on mobile -->
<img src="hero.jpg" alt="Hero" /> <!-- required fallback -->
</picture>
De browser gebruikt de eerste <source> die deze ondersteunt/overeenkomt. Gebruik <picture> wanneer u verschillende formaten nodig hebt (AVIF/WebP met een JPEG-fallback serveren) of een ander uitsnijding per schermgrootte (kunstrichtingsbepaling) — dingen die srcset alleen niet kan doen.
srcset + sizes.<picture>.Het serveren van afbeeldingen met de juiste grootte en in modern formaat is een van de grootste prestatieverwinsten voor het web — het reduceert het mobiele gegevensgebruik dramatisch en verbetert Largest Contentful Paint.
Deze native tools stellen de browser in staat om automatisch de optimale keuze te maken, met gracieuze fallbacks voor oudere browsers.