Image Optimization
<Image> component, (next/image se) AUTOMATIC, IMAGE, OPTIMIZATION, deta hai — LAZY, LOADING, (DEFAULT, mein), RESPONSIVE, SIZING, aur, MODERN, FORMAT, CONVERSION, (WebP/AVIF) BUILT-IN, HAIN.
width, aur, height, PROPS, DENA, ZAROORI, hai (LOCAL, images, ke, liye) — YE, Cumulative, Layout, Shift, (CLS) ko, PREVENT, karta hai, kyunki, BROWSER, ko, PEHLE, se, PATA, hota hai, ki, IMAGE, KITNI, SPACE, LEGI.
import Image from "next/image";
export default function Profile() {
return (
<Image
src="/profile.jpg"
width={200}
height={200}
alt="Profile picture"
priority // above-the-fold images, ke, liye — eager, load, hoti, hai
/>
);
}- next/image = automatic, optimization (resize, compress, format, conversion)
- Lazy loading, DEFAULT, mein, ON, hai — priority, prop, se, OVERRIDE, ho, sakta, hai
- width/height, props, Cumulative, Layout, Shift, (CLS) PREVENT, karte, hain
fill prop, se, EK, image, USKE, PARENT, container, ko, POORI, TARAH, FILL, karta hai (width/height, ki, JAGAH) — PARENT, ko, position: relative, honi, CHAHIYE. UNKNOWN, DIMENSIONS, waali, RESPONSIVE, IMAGES, ke, liye, useful, hai.
<div style={{ position: "relative", width: "100%", height: "300px" }}>
<Image src="/banner.jpg" alt="Banner" fill style={{ objectFit: "cover" }} />
</div>External, domains, se, images, USE, karne, ke, liye, next.config.js, mein, images.remotePatterns, CONFIGURE, karna, ZAROORI, hai — SECURITY, ke, liye, Next.js, DEFAULT, mein, sirf, LOCAL, images, allow, karta hai.