next/image srcSet for a Fixed Width
Medium · Images
<Image src="/me.png" width={64} height={64} alt="" /> does not load /me.png directly. It asks the image optimizer (/_next/image) for resized copies and lets the browser choose with srcSet. For a fixed width and no sizes prop, Next.js builds two candidates, 1x and 2x (for high-density screens):
1. All allowed widths are deviceSizes + imageSizes, sorted. The Next.js 16 defaults give [32, 48, 64, 96, 128, 256, 384, 640, 750, 828, 1080, 1200, 1920, 2048, 3840].
2. For width and 2 * width, pick the smallest allowed width that is >= it (or the largest one, 3840, if none is). Remove duplicates: if both pick the same width there is only a 1x candidate.
3. Quality: the quality prop (default 75) is rounded to the closest value in images.qualities. **In Next.js 16 the default qualities is [75]**, so any other value becomes 75 unless you configure more. Sort qualities first; on a tie the smaller value wins.
4. Each URL is /_next/image?url=<encodeURIComponent(src)>&w=<width>&q=<quality>.
Write imageSrcSet(src, width, quality?, qualities?) (qualities defaults to [75]) that returns { src, srcSet }:
- srcSet: the candidates as "<url> 1x, <url> 2x" (joined with ", ").
- src: the URL of the **last** candidate (the largest).
(Simplified: the real loader may also add a &dpl= deployment id, and a sizes prop switches to w descriptors.)