Responsive bilder låter webbläsaren välja den bästa bilden för enheten — sparar bandbredd på telefoner och serverar skarpa bilder på skärmar med högt DPI.
srcset + sizes — samma bild, olika upplösningar
html
Responsive bilder låter webbläsaren välja den bästa bilden för enheten — sparar bandbredd på telefoner och serverar skarpa bilder på skärmar med högt DPI.
srcset listar kandidatbilder med deras inre bredd (400w = 400px bred).sizes talar om för webbläsaren hur bred bilden kommer att visas visas vid olika brytpunkter (här: full viewport-bredd under 600px, annars hälften).sizes + enhetens pixeldensitet för att välja den minsta bilden som fortfarande ser skarp ut — innan något laddas ner.En telefon kan välja small.jpg; en Retina-bärbar dator som visar den med 50% bredd kan välja large.jpg.
<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>
Webbläsaren använder den första <source> som den stöder/matchar. Använd <picture> när du behöver olika format (servera AVIF/WebP med ett JPEG-reservval) eller en annan beskärning per skärmstorlek (konstriktiv styrning) — saker som srcset ensamt inte kan göra.
srcset + sizes.<picture>.Att servera rätt storlek och moderna formatbilderr är en av de största prestandavinsterna för webben — det minskar mobil dataanvändningen drastiskt och förbättrar Largest Contentful Paint.
Dessa inbyggda verktyg låter webbläsaren göra det optimala valet automatiskt, med elegant reservlösningar för äldre webbläsare.