next/image Next.js کا <img> ٹیگ کے لیے ایک بہتر متبادل ہے۔ یہ خودکار طور پر تصویر کی کارکردگی کے بہترین طریقوں کا ایک مکمل سیٹ لاگو کرتا ہے جو آپ بصورت دیگر ہاتھ سے لاگو کریں۔
tsx
;
() {
(
);
}
next/image Next.js کا <img> ٹیگ کے لیے ایک بہتر متبادل ہے۔ یہ خودکار طور پر تصویر کی کارکردگی کے بہترین طریقوں کا ایک مکمل سیٹ لاگو کرتا ہے جو آپ بصورت دیگر ہاتھ سے لاگو کریں۔
;
() {
(
);
}
srcset — متعدد سائزز بناتا ہے تاکہ ہر ڈیوائس صحیح سائز ڈاؤن لوڈ کرے۔priority سے override کریں)۔width/height (یا fill) جگہ محفوظ رکھتا ہے تاکہ صفحہ تصویر لوڈ ہونے پر نہ کودے۔placeholder="blur" لوڈنگ کے دوران ایک چھوٹی دھندلی پیش نظارہ دکھاتا ہے۔<div style={{ position: "relative", height: 300 }}>
<Image src="/hero.jpg" alt="" fill style={{ objectFit: "cover" }} />
</div>
جب تصویر اپنے positioned والد کو بھرے تو fill استعمال کریں (fixed width/height کی بجائے) — عام طور پر hero/cover تصاویر کے لیے۔
// next.config.js — allowlist remote hosts for security
module.exports = { images: { remotePatterns: [{ hostname: "cdn.example.com" }] } };
تصاویر عام طور پر صفحے پر سب سے بھاری assets ہوتی ہیں اور Core Web Vitals (LCP, CLS) میں کمزوری کی اہم وجہ ہیں۔ next/image خودکار طور پر سائز تبدیل کرنا، جدید فارمیٹس، responsive srcset، lazy loading، اور layout-shift سے بچاؤ کو خودکار کرتا ہے — ایک بڑے performance کے کام کو ایک واحد کمپوننٹ میں بدل دیتا ہے، priority کے ساتھ LCP تصویر کے لیے جو ایک چیز یاد رکھنی ہے۔