next/image <img> ట్యాగ్ కోసం Next.js యొక్క ఆప్టిమైజ్ చేసిన ప్రత్యామ్నాయం. ఇది చేతితో అమలు చేయవలసిన ఇమేజ్ పనితీరు సరైన పద్ధతుల స్టాక్ను స్వయంచాలకంగా వర్తింపజేస్తుంది.
tsx
;
() {
(
);
}
next/image <img> ట్యాగ్ కోసం Next.js యొక్క ఆప్టిమైజ్ చేసిన ప్రత్యామ్నాయం. ఇది చేతితో అమలు చేయవలసిన ఇమేజ్ పనితీరు సరైన పద్ధతుల స్టాక్ను స్వయంచాలకంగా వర్తింపజేస్తుంది.
;
() {
(
);
}
srcset — బహుళ పరిమాణాలను ఉత్పత్తి చేస్తుంది, తద్వారా ప్రతిটి పరికరం సరిபడిన దానిని డౌన్లోడ్ చేస్తుంది.priority తో అధిగమించండి).width/height (లేదా fill) స్థలాన్ని సংరక్షిస్తుంది, తద్వారా చిత్రం లోడ్ అయినప్పుడు పేజీ జంప్ చేయదు.placeholder="blur" లోడ్ చేసేటప్పుడు చిన్న అస్పష్ట ప్రివ్యూను చూపుతుంది.<div style={{ position: "relative", height: 300 }}>
<Image src="/hero.jpg" alt="" fill style={{ objectFit: "cover" }} />
</div>
చిత్రం దాని స్థితీకరించిన పేరెంట్ను నింపాలిన్నప్పుడు fill ఉపయోగించండి (స్థిర వెడల్పు/ఎత్తుకు బదులుగా) — హీరో/కవర్ చిత్రాలకు సాధారణం.
// next.config.js — allowlist remote hosts for security
module.exports = { images: { remotePatterns: [{ hostname: "cdn.example.com" }] } };
చిత్రాలు సాధారణంగా పేజీపై భారీ సম్పదలు మరియు చెత్త కోర్ వెబ్ వైటల్లు (LCP, CLS) యొక్క ప్రధాన కారణం. next/image పరిమాణం మార్పు, ఆధునిక ఫార్మాట్లు, ప్రతిస్పందించే srcset, సోమరి లోడ్ చేయడం మరియు లేআউట్-షిఫ్ట్ నిరోధం — ఒక పెద్ద పనితీరు పనిని ఒక ఏకీకృత భాగంగా మారుస్తుంది, ఇక్కడ LCP చిత్రం కోసం priority మీరు గుర్తుపెట్టుకోవలసిన ఏకైక నాబ్.