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.
IT pokalbių klausimų biblioteka su išsamiais atsakymais — nuo Junior iki Senior.
Paaukoti