Responsive slike omogućuju pregledniku da odabere najbolju sliku za uređaj — štedi propusnost na telefonima i koristi oštre slike na high-DPI zaslonima.
srcset + sizes — ista slika, različite rezolucije
html
Responsive slike omogućuju pregledniku da odabere najbolju sliku za uređaj — štedi propusnost na telefonima i koristi oštre slike na high-DPI zaslonima.
srcset navodi kandidatne slike s njihovim unutarnjim širinama (400w = 400px široka).sizes govori pregledniku koliko će se slika prikazati na različitim točkama prekida (ovdje: puna širina prikaznog okvira ispod 600px, inače polovica).sizes + gustoću piksela uređaja kako bi odabrao najmanju sliku koja je i dalje ostra — prije preuzimanja čega god.Telefon bi mogao odabrati small.jpg; prijenosno računalo sa Retina zaslonom koje ju prikazuje s 50% širine moglo bi odabrati 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>
Preglednik koristi prvi <source> koji podržava/podudara. Koristite <picture> kada trebate različite formate (poslužite AVIF/WebP s JPEG povratkom) ili drugačiji usjeck po veličini zaslona (usmjeravanje sadržaja) — stvari koje srcset sam ne može učiniti.
srcset + sizes.<picture>.Posluženje slika prave veličine u suvremenoj formati je jedna od najvećih dobitaka u performansama za web — dramatično smanjuje upotrebu mobilnih podataka i poboljšava Largest Contentful Paint.
Ovi izvorni alati omogućuju pregledniku da automatski napravi optimalnu izbor, s gracioznim povratnim verzijama za starije pregletnike.