How to Use sizes Prop in Next.js Image Component

In Next.js, use the sizes prop in the next/image component to specify the image display widths for different viewport sizes. This helps the browser pick the best image size from the srcSet generated by Next.js, improving loading speed and responsiveness.

Syntax

The sizes prop is a string that describes the image display width for different viewport widths using CSS media queries. It works with the width and height props or layout settings to help the browser select the best image size.

Format example: '(max-width: 600px) 100vw, 50vw' means use 100% viewport width if viewport is 600px or less, otherwise 50% viewport width.

jsx

import Image from 'next/image';

<Image
  src="/example.jpg"
  alt="Example"
  width={800}
  height={600}
  sizes="(max-width: 600px) 100vw, 50vw"
/>

Output

An image that loads at full viewport width on small screens (600px or less) and half viewport width on larger screens.

Example

This example shows how to use the sizes prop to make an image responsive. The image will take full width on small screens and half width on larger screens, letting Next.js serve the best image size automatically.

jsx

import Image from 'next/image';

export default function ResponsiveImage() {
  return (
    <div style={{ maxWidth: '800px', margin: 'auto' }}>
      <Image
        src="/landscape.jpg"
        alt="Landscape"
        width={800}
        height={600}
        sizes="(max-width: 600px) 100vw, 50vw"
        style={{ width: '100%', height: 'auto' }}
      />
    </div>
  );
}

Output

The image displays full width on screens 600px or smaller and half width on larger screens, loading optimized image sizes accordingly.

Common Pitfalls

• Not using sizes with responsive layouts can cause the browser to load unnecessarily large images.
• Incorrect media queries in sizes can lead to wrong image sizes being loaded.
• For fixed layout images, sizes is usually not needed.
• Always pair sizes with proper width and height or layout props.

jsx

/* Wrong usage: sizes does not match layout */
<Image
  src="/photo.jpg"
  alt="Photo"
  width={400}
  height={300}
  sizes="100vw"
/>

/* Correct usage with responsive layout */
<Image
  src="/photo.jpg"
  alt="Photo"
  width={400}
  height={300}
  sizes="(max-width: 500px) 100vw, 400px"
  style={{ width: '100%', height: 'auto' }}
/>

Quick Reference

Prop	Description	Example
sizes	Defines image display width for different viewport sizes using CSS media queries	"(max-width: 600px) 100vw, 50vw"
width	Intrinsic width of the image in pixels	800
height	Intrinsic height of the image in pixels	600
style	CSS styles to make image responsive (e.g., width: 100%, height: auto)	{ width: '100%', height: 'auto' }

Key Takeaways

Use the sizes prop to tell the browser how wide the image will display at different screen widths.

Pair sizes with width and height props or responsive styles for best results.

Correct sizes help Next.js serve optimized images, improving load speed and user experience.

Avoid incorrect media queries in sizes to prevent loading wrong image sizes.

For fixed-size images, sizes is usually unnecessary.