Imazhet përgjigjesuese i lejojnë shfletuesit të zgjedhë imazhin më të mirë për pajisjen — duke kursyer gjerësinë e brezit në telefonat dhe duke shërbyer imazhe të mprehtë në ekranet me DPI të lartë.
srcset liston imazhet kandidat me gjerësitë e tyre të brendshme (400w = 400px e gjerë).sizes i tregon shfletuesit se sa e gjerë do të jetë imazhi i shfaqur në pika të ndryshme thyerjeje (këtu: gjerësia e plotë e viewport më poshtë 600px, përndryshe gjysma).sizes + densitetin e pikselëve të pajisjes për të zgjedhur imazhin më të vogël që ende duket i mprehta — para se të shkarkojë ndonjë gjë.Një telefon mund të zgjedhë small.jpg; një laptop Retina që e shfaq atë në 50% gjerësi mund të zgjedhë 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>
Shfletuesi përdor të parën <source> që përkrah/përputhet. Përdorni <picture> kur keni nevojë për formate të ndryshëm (shërbime AVIF/WebP me fallback JPEG) ose një prerje të ndryshme për secilin madhësi ekrani (drejtimi artizanal) — gjërat që srcset vetëm nuk mund të bëjë.
srcset + sizes.<picture>.Shërbimi i imazheve të madhësisë së duhur dhe formateve moderne është një nga fitaket më të mëdha të performances për uebin — ajo redukton kërcimin e të dhënave mobile në mënyrë drastike dhe përmirëson Largest Contentful Paint.
Këto vegla të brendshme i lejojnë shfletuesit të bëjë zgjedhjen optimale automatikisht, me fallbacks të këndshme për shfletuesit më të vjetër.