Immaġini li jirrispondu jippermettu lill-browser jagħżel l-aħjar immaġini għall-apparat — jisparulaw il-bandwidth fuq telefons u jisservuhu immaġini ċari fuq skermi DPI għolja.
srcset + sizes — nefsa l-immaġini, risoluzzjonijiet differenti
html
Immaġini li jirrispondu jippermettu lill-browser jagħżel l-aħjar immaġini għall-apparat — jisparulaw il-bandwidth fuq telefons u jisservuhu immaġini ċari fuq skermi DPI għolja.
srcset telista immaġini kandidati bil-wisa' intrinsiku tagħhom (400w = 400px wisa').sizes jgħid lill-browser kemm wisa' se tkun l-immaġini murija fuq breakpoints differenti (hawn: wisa' viewport sħiħ taħt 600px, mod ieħor nofs).sizes + id-densità tal-pixels tal-apparat biex jagħżel l-aħjar immaġini li għad tidher ċara — qabel jniżżel xi ħaġa.Telefon jista' jagħżel small.jpg; laptop Retina li jmuriha f'50% wisa' jista' jagħżel 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>
Il-browser juża l-l-ewwel <source> li jappoggiaw/jaqblu. Uża <picture> meta għandek bżonn formati differenti (agħti AVIF/WebP b'fallback JPEG) jew qatgħa differenti għal kull daqs tal-iskrin (dritta tal-arti) — ħaġat li srcset waħdu ma jistax jagħmel.
srcset + sizes.<picture>.Servir immaġini b'daqsa sewwa u format modern hija waħda mill-akbar rebħat tal-prestazzjoni għall-web — tnaqqas l-użu tad-data tal-mobile drammatikament u ttejjeb il-Largest Contentful Paint.
Dawn l-għodod nattivi jippermettu lill-browser tagħmel l-għażla ottimali awtomatikament, b'fallbacks piacevoli għal browsers eħdem.