Picha inayoadhani inaruhusu kivinjari kuchagua picha bora zaidi kwa kifaa — kuokoa bandwidth kwenye simu na kuweka picha zenye umbo lenye juu kwenye skrini na DPI ya juu.
srcset + sizes — picha ile ile, miti tofauti
html
Picha inayoadhani inaruhusu kivinjari kuchagua picha bora zaidi kwa kifaa — kuokoa bandwidth kwenye simu na kuweka picha zenye umbo lenye juu kwenye skrini na DPI ya juu.
srcset inaorodhesha picha za mjumbe zilizojumuishwa na upana wa ndani (400w = 400px pana).sizes inakamatia kivinjari jinsi picha itakavyoonyeshwa iliyoonyeshwa kwa alama tofauti (hapa: upana kamili wa viewport chini ya 600px, vinginevyo nusu).sizes + msongamano wa pikseli wa kifaa ili kuchagua picha ndogo zaidi ambayo bado inaonekana kali — kabla ya kupakua kitu chochote.Simu inaweza kuchagua small.jpg; kompyuta kibao ya Retina inayoonyesha kwa upana wa 50% inaweza kuchagua 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>
Kivinjari kinatumia ya kwanza <source> inayoungana naye. Tumia <picture> wakati unahitaji muundo tofauti (kuweka AVIF/WebP kwa njia ya kubadiliana JPEG) au kukatia tofauti kwa kila ukubwa wa skrini (mwelekeo wa sanaa) — mambo ambayo srcset peke yake hayawezi kufanya.
srcset + sizes.<picture>.Kuweka picha za ukubwa sahihi na muundo wa sasa ni mojawapo ya juma kubwa la utendaji kwa wavu — inakufa matumizi ya data ya simu kwa njia muhimu na kuboresha Largest Contentful Paint.
Adabu hizi za ndani huruhusu kivinjari kufanya chaguo sahihi kiotomatiki, kwa njia zenye adabu kwa kivinjari zaidi.