Q7: How does the next/image Component optimize images?
The <Image /> component optimizes images automatically by:
- Format conversion: Serves WebP/AVIF images dynamically.
- Resizing: Generates responsive image srcsets based on device sizes.
- CLS prevention: Enforces explicit dimensions or aspect ratios to eliminate layout shifts.
- Lazy loading: Defers loading off-screen images until scrolled near viewport.
next/image Usage
import Image from 'next/image';
import profilePic from './profile.jpg';
export default function Avatar() {
return (
<Image
src={profilePic}
alt="User Avatar"
width={200}
height={200}
placeholder="blur"
priority // Loads immediately above the fold
/>
);
}💡 Setting priority disables lazy loading for above-the-fold hero assets to optimize LCP.
Key Takeaways
- Prevents Cumulative Layout Shift (CLS) by reserving display dimensions.
- Converts images on-demand to AVIF/WebP, resizing images to device viewport width.
Knowledge Check
Which prop should be added to a next/image component if the image is an above-the-fold Hero banner image?