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" }] } };
इमेजेस सामान्यतः पृष्ठावरील सर्वात जड मालमत्ता असतात आणि खराब Core Web Vitals (LCP, CLS) चे मुख्य कारण असतात. next/image आकार बदलणे, आधुनिक स्वरूप, प्रतिक्रियाशील srcset, आळस लोड करणे आणि लेआउट-शिफ्ट प्रतिबंध आपोआप करते — एक मुख्य परफॉर्मन्स काम एका एकल घटकामध्ये रूपांतरित करते, LCP इमेजसाठी priority सह आपल्याला लक्षात ठेवावे लागणारी एकमेव गाठ आहे.