How to Optimize Images in Next.js for Faster Loading

In Next.js, you optimize images by using the built-in next/image component, which automatically resizes, optimizes, and serves images in modern formats. This component improves loading speed and reduces bandwidth by lazy loading images and serving them in the best size for the user's device.

Syntax

The next/image component requires at least src, width, and height props. It automatically optimizes images by resizing and lazy loading them.

• src: The path or URL of the image.
• width and height: The desired dimensions for the image.
• alt: Describes the image for accessibility.
• layout: Controls how the image fills space (e.g., intrinsic, responsive).

jsx

import Image from 'next/image'

export default function MyImage() {
  return (
    <Image
      src="/example.jpg"
      alt="Example image"
      width={600}
      height={400}
      layout="intrinsic"
    />
  )
}

Output

Renders an optimized image 600px wide and 400px tall with lazy loading and automatic resizing.

Example

This example shows how to use the next/image component to display an optimized image that adjusts to screen size and loads lazily for better performance.

jsx

import Image from 'next/image'

export default function ResponsiveImage() {
  return (
    <div style={{ maxWidth: '800px', margin: 'auto' }}>
      <Image
        src="/landscape.jpg"
        alt="Beautiful landscape"
        width={800}
        height={450}
        layout="responsive"
        priority={true}
      />
    </div>
  )
}

Output

Displays a responsive, optimized image that fills the container width up to 800px and loads with high priority.

Common Pitfalls

• Not specifying width and height can cause layout shifts and warnings.
• Using external images without configuring next.config.js domains will block image loading.
• Forgetting alt text harms accessibility.
• Using layout="fill" requires the parent container to have position: relative and set dimensions.

jsx

/* Wrong: Missing width and height */
import Image from 'next/image'

export default function WrongImage() {
  return <Image src="/photo.jpg" alt="Photo" />
}

/* Right: Specify width and height */
import Image from 'next/image'

export default function RightImage() {
  return <Image src="/photo.jpg" alt="Photo" width={500} height={300} />
}

Output

Wrong example causes layout shift warning; right example renders optimized image correctly.

Quick Reference

Prop	Description	Example
src	Image source path or URL	"/image.png" or "https://site.com/img.jpg"
width	Image width in pixels	600
height	Image height in pixels	400
alt	Accessibility text describing the image	"A scenic view"
layout	How image fills space: intrinsic, responsive, fill	"responsive"
priority	Loads image eagerly if true	true
placeholder	Shows blur while loading if set to 'blur'	"blur"

Key Takeaways

Use the built-in next/image component to automatically optimize images in Next.js.

Always specify width, height, and alt attributes to avoid layout shifts and improve accessibility.

Configure external image domains in next.config.js to load remote images properly.

Use layout='responsive' or 'intrinsic' for flexible image sizing and better user experience.

Leverage lazy loading and priority props to balance performance and user needs.