Image Optimization
The Next.js Image component provides optimization features such as responsive sizing, lazy loading behavior, and controlled image delivery.
Images are frequently among the largest assets on a webpage. Correct dimensions and formats can significantly affect performance.
For remote images, configure trusted image sources rather than accepting arbitrary remote URLs.
Optimized Image
import Image from 'next/image';
export default function Profile() {
return (
<Image
src='/profile.jpg'
alt='Developer profile'
width={400}
height={400}
priority
/>
);
}💡 The Image component receives dimensions and meaningful alternative text so Next.js can optimize delivery.
Key Takeaways
- Always provide meaningful alt text for informative images.
- Avoid shipping unnecessarily large images.
- Configure remote image domains intentionally.