Next.js › Image & Font Optimization

How does the Image component handle responsive images that need to look good on different screen sizes?

Intermediate

Answer

You use the sizes prop along with fill or a responsive width and height, telling the browser roughly how large the image will be displayed at different screen widths, allowing Next.js to generate and serve the most appropriately sized version of the image for each device.

<Image
  src="/hero.jpg"
  alt="Hero banner"
  fill
  sizes="(max-width: 768px) 100vw, 50vw"
  style={{ objectFit: 'cover' }}
/>

Real-world example A news website serves a smaller version of its hero image to mobile phone visitors and a larger version to desktop visitors, all automatically handled by the Image component based on the sizes prop.

Common follow-ups: What is the difference between using the fill prop and specifying explicit width and height?;How do you handle images that come from an external domain?

Web Vitals & Performance Monitoring;Third-Party Script Optimization