Back to Study Notes

next/image Optimization

In Next.js, the next/image component provides built-in image optimization to enhance performance and user experience by serving images in the best format and size.

🧠 Features of next/image:

  • Automatic Optimization: Resizes and serves images based on the user's device, screen size, and resolution.
  • Modern Formats: Supports formats like WebP and AVIF for better compression and quality.
  • Lazy Loading: Loads images only when they enter the viewport, reducing initial page load time.

Example of using next/image:

javascript
1import Image from 'next/image';
2
3export default function MyPage() {
4  return (
5    <Image 
6      src='/path/to/image.jpg' 
7      alt='An example image' 
8      width={500} 
9      height={300} 
10    />
11  );
12}

In short:

  • The next/image component automatically handles image optimization, resizing, and format conversion.
  • It improves performance, SEO, and loading speeds with minimal setup.