The Image Component

next/image

<Image> from next/image replaces <img> and gives you, for free:

Right size: generates several widths and the browser picks one (srcset).
Modern formats: WebP or AVIF when the browser supports them.
Lazy loading: images below the fold load when scrolled near.
No layout shift: width and height reserve space before the image arrives.

import Image from 'next/image';
import banner from '@/public/banners/diwali.webp'; // static import: width/height known

export default function Hero() {
  return (
    <>
      <Image src={banner} alt="Diwali sale: up to 70% off" priority placeholder="blur" />
      <Image src="/logo.svg" alt="ShopEase" width={120} height={32} />
    </>
  );
}

Important Props

Prop	Meaning
`alt`	Required. Describe the image for screen readers and SEO.
`width` / `height`	Required for string `src` (not needed for static imports or `fill`).
`fill`	Fill the parent element (parent needs `position: relative`).
`sizes`	How wide the image is at each screen size; helps choose the smallest file.
`priority`	Load immediately (use for the main banner / LCP image). Newer versions also offer `preload`.
`quality`	1–100, default 75.

Which File Does the Browser Get

Example

Next.js has a list of device widths. With sizes="50vw" on a 412px phone at 2x pixel density, it needs about 412 physical pixels. This code picks the file like the browser does:

const deviceSizes = [640, 750, 828, 1080, 1200, 1920, 2048, 3840];

function pick(viewportCssPx: number, vwPercent: number, dpr: number): number {
  const needed = viewportCssPx * (vwPercent / 100) * dpr;
  return deviceSizes.find((w) => w >= needed) ?? deviceSizes[deviceSizes.length - 1];
}

console.log('phone, 50vw, 2x  ->', pick(412, 50, 2) + 'w');
console.log('phone, 100vw, 3x ->', pick(412, 100, 3) + 'w');
console.log('laptop, 25vw, 1x ->', pick(1440, 25, 1) + 'w');
console.log('no sizes (100vw) laptop 2x ->', pick(1440, 100, 2) + 'w');

Output

phone, 50vw, 2x  -> 640w
phone, 100vw, 3x -> 1920w
laptop, 25vw, 1x -> 640w
no sizes (100vw) laptop 2x -> 3840w