Optimizing Images

Use the next/image component for automatic optimization, lazy loading, and responsive images.

18 min

3 sections

images

optimization

performance

01. Using next/image

Section 1 of 3

The Image component optimizes images automatically with WebP conversion, lazy loading, and responsive sizing.

typescript

import Image from 'next/image';

export default function Avatar() {
  return (
    <Image
      src="/avatar.jpg"
      alt="User avatar"
      width={500}
      height={500}
      priority // For above-the-fold images
    />
  );
}

Exercise

Add an Optimized Hero Image

Practice

Add an optimized image to your homepage hero section using next/image.

Proxy and Request Boundaries

Testing

Back to Course