🖼️ Image Component in Next.js

Next.js provides a built-in next/image component for automatic image optimization, including lazy loading, resizing, and caching. It improves performance and SEO by delivering the right image size for different devices.

📌 1. Basic Usage of next/image

Import the Image component from next/image and use it in your component:

javascript
<Image <Image src={sampleImage} alt="Blur Image" width={500} height={300} placeholder="blur" />

✅ Enhances user experience on slow networks

📌 6. Image Optimization Benefits in Next.js

✔️ Automatic lazy loading → Loads images only when visible
✔️ Responsive images → Serves different sizes based on screen size
✔️ Improved performance & SEO → Faster page loads
✔️ Better caching & delivery → Optimized images from CDN