A reszponzív képek lehetővé teszik a böngészőnek, hogy kiválassza az eszközre legjobb képet — kimegtakarítja a sávszélességet telefonokon és éles képeket szolgál ki nagy DPI-s képernyőkön.
srcset + sizes — ugyanaz a kép, különböző felbontások
html
A reszponzív képek lehetővé teszik a böngészőnek, hogy kiválassza az eszközre legjobb képet — kimegtakarítja a sávszélességet telefonokon és éles képeket szolgál ki nagy DPI-s képernyőkön.
srcset felsorolja a jelölt képeket azok belső szélességével (400w = 400px széles).sizes megmondja a böngészőnek, hogy a kép milyen széles lesz megjelenítve különböző töréspontokon (itt: teljes viewport szélesség 600px alatt, különben fele).sizes + az eszköz pixelsűrűségét, hogy kiválassza a legkisebb képet, amely továbbra is éles — bármit le kell töltenie.Egy telefon választhatna small.jpg; egy Retina laptop, amely 50% szélességben mutatja, választhatna 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>
A böngésző az első <source> felhasználja, amelyet támogat/egyezik. Használja a <picture> elemet, ha különböző formátumokra van szüksége (AVIF/WebP szolgáltatás JPEG tartalékkal) vagy más vágásra képernyőméreten (művészi irányítás) — olyan dolgok, amelyeket a srcset egyedül nem tud megtenni.
srcset + sizes.<picture>.A megfelelő méretű, modern formátumú képek kiszolgálása a web egyik legnagyobb teljesítménybeli győzelme — drasztikusan csökkenti a mobiladatok felhasználását és javítja a Largest Contentful Paint-t.
Ezek a natív eszközök lehetővé teszik a böngészőnek, hogy automatikusan meghozza az optimális választást, a régebbi böngészőkhöz való elegáns fallbackekkel.