Gambar responsif ngamot browser kanggo milih gambar paling apik kanggo piranti — ngluwari bandwidth ing ponsel lan nyayakake gambar cetha ing layar DPI dhuwur.
srcset + sizes — gambar padha, resolusi beda
html
srcset nandheske gambar kandidat karo lebar intrinsik (400w = 400px jembar).sizes ajak browser ngerti apa gambar bakal ditampilake jembar pira ing breakpoint beda (kene: jembar viewport penuh ngisor 600px, yen ora ya setengahe).sizes + kapadhetane pixel pirante kanggo milih gambar paling cilik sing tetep cetha — sadurunge ngunduh apa-apa.Ponsel bisa milih small.jpg; laptop Retina sing nampilake 50% jembar bisa milih 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>
Browser nggunakake pisanan <source> sing didukung/cocog. Gunakake <picture> yen perlu format beda (nyayakake AVIF/WebP karo fallback JPEG) utawa potongan beda per ukuran layar (art direction) — perkara sing srcset dhewe ora bisa gawe.
srcset + sizes.<picture>.Nyayakake gambar ukuran pas lan format modern minangka salah sawijining menang performa paling besar kanggo web — murang panguji data mobile banget lan nambah Largest Contentful Paint.
Tool native iki ngamot browser gawe pilihan optimal otomatis, karo fallback manis kanggo browser lawas.