Responsivne slike omogočijo brskalniku izbiro best slike za napravo — prihrani pasovno širino na telefonih in prikazuje ostre slike na zaslonov z visoko DPI.
srcset + sizes — ista slika, različne ločljivosti
html
Responsivne slike omogočijo brskalniku izbiro best slike za napravo — prihrani pasovno širino na telefonih in prikazuje ostre slike na zaslonov z visoko DPI.
srcset navaja kandidatne slike z njihovimi lastnimi širinama (400w = 400px široka).sizes brskalniku pove, kako široka bo slika prikazana pri različnih mejnih točkah (tukaj: polna širina viewport spodaj 600px, drugače polovica).sizes + piksno gostoto naprave, da izbere najmanjšo sliko, ki še vedno izgleda ostro — preden kaj prenese.Telefon lahko izbere small.jpg; Retina prenosnik, ki jo prikazuje pri 50% širine, pa lahko izbere 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>
Brskalnik uporabi prvo <source>, ki jo podpira/ujema. Uporabite <picture>, kadar potrebujete različne formate (posredovanje AVIF/WebP s JPEG fallbackom) ali drugačen izrez na zaslonu (umetnostna usmeritev) — stvari, ki jih srcset sam ne more narediti.
srcset + sizes.<picture>.Posredovanje slik v pravi velikosti in sodobnih formatih je ena od največjih zmag pri zmogljivosti spleta — drastično zmanjša porabo podatkov na mobilnih napravah in izboljša Largest Contentful Paint.
Ta domača orodja omogočijo brskalniku, da avtomatično izbere optimalno izbiro s graceful fallbacki za starejše brskalnike.