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.
Pustaka pitakon wawancara IT kanthi jawaban rinci — saka Junior nganti Senior.
Nyumbang