Responsive bilder lar nettleseren velge det beste bildet for enheten — spar båndbredde på telefoner og server skarpe bilder på high-DPI-skjermer.
srcset + sizes — samme bilde, ulike oppløsninger
html
srcset lister kandidatbilder med deres iboende bredder (400w = 400px bredt).sizes forteller nettleseren hvor bredt bildet vil være displayet på ulike bruddpunkter (her: full viewportbredde under 600px, ellers halvparten).sizes + enhetens pikseltetthhet for å velge det minste bildet som fortsatt ser skarpt ut — før den laster ned noe som helst.En telefon kan velge small.jpg; en Retina-bærbar som viser den ved 50 % bredde kan velge 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>
Nettleseren bruker den første <source> den støtter/samsvarer med. Bruk <picture> når du trenger ulike formater (server AVIF/WebP med JPEG-fallback) eller et annet utsnitt per skjermstørrelse (kunstnerisk retning) — ting som srcset alene ikke kan gjøre.
srcset + sizes.<picture>.Å servere riktig dimensjonerte, moderne-format bilder er en av de største ytelsesvinstene for nettet — det kuttes mobil dataudnyttelse dramatisk og forbedrer Largest Contentful Paint.
Disse innebygde verktøyene lar nettleseren gjøre det optimale valget automatisk, med deilig fallbacks for eldre nettlesere.