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, आलसी लोडिंग और लेआउट-शिफ्ट रोकथाम को स्वचालित करता है — एक प्रमुख प्रदर्शन कार्य को एक एकल घटक में बदल देता है, priority LCP इमेज के साथ एकमात्र नियंत्रण होता है जिसे आपको याद रखना चाहिए।