Skip to content

Performance · Next.js (App Router)

How to use srcset for responsive images in Next.js (App Router)

Without a `srcset`, a phone downloads the same file a desktop does — often several times the pixels it can display. It is wasted bandwidth on exactly the connections least able to spare it.

The fix for Next.js (App Router)

13x detects your framework from the response and hands you this version rather than the generic one — below 50% confidence it hedges and gives you the generic one instead.

next/image generates the srcset for you and serves AVIF or WebP based on what the browser accepts:

tsx code
import Image from "next/image";

export default function Hero() {
  return (
    <Image
      src="/hero.jpg"
      width={1600}
      height={900}
      // Same meaning as the raw attribute: how wide it renders, not how big it is.
      sizes="(max-width: 700px) 100vw, 800px"
      // Only on the image above the fold; on the rest it wastes bandwidth.
      priority
      alt="Describe the image"
    />
  );
}

Two things worth knowing:

- Without sizes, a fill or responsive image defaults to 100vw and Next generates candidates up to the largest configured width. - For an external image host, add it to images.remotePatterns in next.config.ts — otherwise Next refuses to optimise it and you silently get a plain <img> back.

On a different stack? The general version of this fix explains what 13x checks and why it matters, without assuming a framework.

Check your Next.js (App Router) site

113 deterministic checks against your live URL, in about 30 seconds. Framework detected from the response, so every fix comes back in the form your stack actually uses.

No signup. Results in 30 seconds.

The same fix, other stacks