Hotuwan da suka dace suna ba wa browser damar zabar mafi kyawun hoto don na'ura — suna ciyar da riba akan farin jiya da ba da nuni a ajiyoyin jiya masu girma.
srcset + sizes — hoto daya, duwatsu daban-daban
html
srcset yana jera hotuwan shaida tare da su nisan jiya (400w = 400px fadi).sizes yana gaya wa browser yadda hoto zai zama nuni a wasu wuraren keta (anan: cikakken nisan jiya na viewport kasa da 600px, in ba haka ba rabin).sizes + yadda na'ura ke nuni hoto don zabar littafin hoto da mafi karama da ma duk da akwai kyau — kafin sauke komai.Waya kuma ma zabar small.jpg; kwamfuta Retina da nuni shi a rabin nisan jiya kuma ma zabar 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>
Browser ta yi amfani da na farko <source> wanda ya tanadi/daidaita. Yi amfani da <picture> lokacin da ka buka nau'ikan daban-daban (jiya AVIF/WebP tare da gefe JPEG) ko yankacin daban-daban ga babbar jiya (zartacewa art) — abubuwa da srcset na kaivaye ba zai iya aiwatarwa.
srcset + sizes.<picture>.Ba da hotuwan da dace, nau'ikan zamani waje jiya shine daya daga mafi girma nasarar gida don yanar gida — yana rage amfani da bayar na wayar hannu sosai da inganta Largest Contentful Paint.
Wancan kayan aiki na asali suna ba wa browser damar zabar kyawu kai kasko, tare da kyakkyawan sakaya don tsofaffin browsey.