ప్రతిస్పందించే చిత్రాలు బ్రౌజర్ను పరికరానికి సరైన చిత్రాన్ని ఎంచుకోవడానికి అనుమతిస్తాయి — ఫోన్లలో బ్యాండ్విడ్త్ను సేవ చేస్తుంది మరియు అధిక-DPI స్క్రీన్లలో స్పష్టమైన చిత్రాలను అందిస్తుంది.
srcset + sizes — ఒకే చిత్రం, విభిన్న రిజల్యూషన్లు
html
ప్రతిస్పందించే చిత్రాలు బ్రౌజర్ను పరికరానికి సరైన చిత్రాన్ని ఎంచుకోవడానికి అనుమతిస్తాయి — ఫోన్లలో బ్యాండ్విడ్త్ను సేవ చేస్తుంది మరియు అధిక-DPI స్క్రీన్లలో స్పష్టమైన చిత్రాలను అందిస్తుంది.
srcset వారి అంతర్గత వెడల్పు కలిగిన అభ్యర్థి చిత్రాలను జాబితా చేస్తుంది (400w = 400px వెడల్పు).sizes చిత్రం వివిధ బ్రేక్పాయింట్ల వద్ద ప్రదర్శించబడే విధానం గురించి బ్రౌజర్కు చెబుతుంది (ఇక్కడ: 600px కంటే తక్కువ పూర్ణ viewport వెడల్పు, లేకపోతే సగం).sizes + పరికరం యొక్క పిక్సెల్ సాంద్రతను సంయోজించి, ఇప్పటికీ విస్పష్టంగా కనిపించే చిన్నటి చిత్రాన్ని ఎంచుకుంటుంది — ఏదైనా డౌన్లోడ్ చేయడానికి ముందు.ఒక ఫోన్ small.jpg ఎంచుకోవచ్చు; 50% వెడల్పులో దీన్ని ప్రదర్శించే Retina ల్యాప్టాప్ 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>
బ్రౌజర్ సమర్థిస్తుంది / సరిపోయే మొదటి <source> ను ఉపయోగిస్తుంది. విభిన్న ఫార్మాట్లు (JPEG ఫాల్బ్యాక్తో AVIF/WebP సరఫరా) లేదా స్క్రీన్ పరిమాణానికి భిన్న పంచుకోవటం (కళ దిశ) అవసరమైనప్పుడు <picture> ఉపయోగించండి — srcset మాత్రమే చేయలేని విషయాలు.
srcset + sizes.<picture>.సరైన-పరిమాణ, ఆధునిక-ఫార్మాట్ చిత్రాలను అందించడం వెబ్కు చేసిన బిగ్ పারఫారమెన్స్ విజయాలలో ఒకటి — ఇది మొబైల్ డేటా వాడకాన్ని నాటకీయంగా తగ్గిస్తుంది మరియు Largest Contentful Paint ను మెరుగుపరుస్తుంది.
ఈ స్థానిక సాధనాలు బ్రౌజర్ను స్వయంచాలకంగా సరైన ఎంపికను చేయడానికి అనుమతిస్తాయి, పాతి బ్రౌజర్ల కోసం చేతులు విడిచిపెట్టిన ఫాల్బ్యాక్లతో.