Responsive billeder lader browseren vælge det bedste billede til enheden — sparer båndbredde på telefoner og serverer skarpe billeder på høj-DPI-skærme.
srcset + sizes — samme billede, forskellige opløsninger
html
Responsive billeder lader browseren vælge det bedste billede til enheden — sparer båndbredde på telefoner og serverer skarpe billeder på høj-DPI-skærme.
srcset angiver kandidatbilleder med deres iboende bredder (400w = 400px bredt).sizes fortæller browseren, hvor bredt billedet vil blive vist ved forskellige breakpoints (her: fuld viewport-bredde under 600px, ellers halvdelen).sizes + enhedens pixeltæthed for at vælge det mindste billede, der stadig ser skarpt ud — før download af noget.En telefon kan vælge small.jpg; en Retina-bærbar computer, der viser det ved 50% bredde, kan vælge 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>
Browseren bruger den første <source>, den understøtter/matcher. Brug <picture>, når du har brug for forskellige formater (server AVIF/WebP med en JPEG-fallback) eller et forskelligt beskæring pr. skærmstørrelse (kunstnerisk retning) — ting som srcset alene ikke kan gøre.
srcset + sizes.<picture>.At servere billeder af den rigtige størrelse og moderne format er en af de største performance-gevinster for webben — det skærer mobildataforbrug drastisk ned og forbedrer Largest Contentful Paint.
Disse native værktøjer lader browseren træffe det optimale valg automatisk, med elegante fallbacks for ældre browsere.