The `next/image` component automatically optimizes images with lazy loading, responsive sizing, modern formats (WebP/AVIF), and prevents Cumulative Layout Shift (CLS), improving both performance and Core Web Vitals.
Benefits of next/image:
Automatic Optimization
Lazy Loading
Prevents Layout Shift
Responsive Images
sizes prop for responsive behaviorBlur Placeholder
Required Props:
src - Image source (local or remote)alt - Accessibility textwidth & height - Required for remote images (or use fill)import Image from 'next/image';
// Local image (auto width/height detection)
import profilePic from '../public/profile.jpg';
export default function Profile() {
return (
<div>
{/* Local image - width/height inferred */}
<Image
src={profilePic}
alt="Profile picture"
placeholder="blur" // Built-in blur for local images
/>
{/* Remote image - must specify dimensions */}
<Image
src="https://example.com/photo.jpg"
alt="Remote photo"
width={500}
height={300}
/>
</div>
);
}