Atsakingieji vaizdai leidžia naršyklei pasirinkti geriausią vaizdą įrenginiui — sutaupo pralaidumą mobiliuosiuose įrenginiuose ir teikia ryškius vaizdus aukštos DPI ekranuose.
srcset + sizes — tas pats vaizdas, skirtingos skiriamosios gebos
html
Atsakingieji vaizdai leidžia naršyklei pasirinkti geriausią vaizdą įrenginiui — sutaupo pralaidumą mobiliuosiuose įrenginiuose ir teikia ryškius vaizdus aukštos DPI ekranuose.
srcset nurodo kandidatų vaizdus su jų vidiniais plotiais (400w = 400px platus).sizes pasakoja naršyklei, koks latus bus vaizdas rodomas skirtingose perlaužose (čia: visas peržiūros plotis žemiau 600px, kitaip pusė).sizes + įrenginio pikselių tankį, kad pasirinktų mažiausią vaizdą, kuris vis dar atrodo ryškus — prieš ką nors parsiunčiant.Mobilus įrenginys gali pasirinkti small.jpg; Retina nešiojamasis kompiuteris, kuriame jis rodomas 50% pločio, gali pasirinkti 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>
Naršyklė naudoja pirmą <source>, kurią palaiko/atitinka. Naudokite <picture>, kai jums reikalingi skirtingi failų formatai (tiekite AVIF/WebP su JPEG atsarginę kopiją) arba skirtingas apjungimas pagal ekrano dydį (meninė kryptis) — tai, ką srcset vienas negali padaryti.
srcset + sizes.<picture>.Teikimas tinkamo dydžio, modernaus formato vaizdų yra vienas iš didžiausių interneto produktyvumo pasikeitimų — jis dramatiškai sumažina mobiliųjų duomenų naudojimą ir pagerina didžiausią turinio dažnį.
Šie neatimami įrankiai leidžia naršyklei automatiškai priimti optimalų sprendimą, naudojant gražius senesniųjų naršyklių atsarginius variantus.