Ligtear do íomhánna athnuachaithe don bhrabhsálaí an íomhá is fearr a roghnú don ghléas — ag sábháil bandaleithead ar fóin agus íomhánna geal ar scáileáin ard-DPI a sheirbhíonn.
srcset + sizes — an íomhá chéanna, taifeadh éagsúil
html
Ligtear do íomhánna athnuachaithe don bhrabhsálaí an íomhá is fearr a roghnú don ghléas — ag sábháil bandaleithead ar fóin agus íomhánna geal ar scáileáin ard-DPI a sheirbhíonn.
srcset ligeann íomhánna iarrthach le a leithead intreach (400w = 400px ar leithead).sizes a insint don bhrabhsálaí cén fhad ar a bheidh an íomhá taispeáinte ag pointí briseadh éagsúla (anseo: leithead iomlán an viewport faoi 600px, a shíniú dá bharr).sizes + dlús picteilín an ghléis le chéile chun an íomhá is lú a roghnú atá i bhfeidhm go soiléir — roimh aon rud a íoslódáil.D'fhéadfadh guthán small.jpg a roghnú; d'fhéadfadh ríomhaire gréine Retina ag taispeáint ag 50% leithead large.jpg a roghnú.
<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>
Úsáideann an brabhsálaí an chéad <source> a thacaíonn sé/a bhíonn i gcomhfhreagras. Úsáid <picture> nuair a bhíonn formáidí éagsúla de dhíth ort (AVIF/WebP a sheirbhíonn le fallback JPEG) nó barr difriúil in aghaidh an méid scáileáin (treo ealaíne) — rud nach féidir le srcset a dhéanamh.
srcset + sizes.<picture>.A bheith ina fheidhmíonn íomhánna ar an méid ceart, formáid nua-aimseartha a sheirbhíonn ar cheann de na bhuaiscinn fheidhmíochta is mó don ghréine — laghdaíonn sé an úsáid sonraí fón go geal agus feabhas a dhéanamh ar Largest Contentful Paint.
Ligeann na huirlisí dúchais seo don bhrabhsálaí an rogha is fearr a dhéanamh go huathoibríoch, le fallbacks béasach do bhearrálaithe níos sine.