← Back to index

5.1 Next.js Image + Sanity CDN (Two-Stage Optimisation)

Heydays · Sanity CDN crop/resize + Next.js <Image> (pattern demo)

Production URLs chain Sanity image transforms (rect crop, w/h) with Next.js image optimisation (/_next/image?url=…). Below: example URL shapes and a local image with explicit width/height to reserve space (no CLS).

Stage 1 — Sanity CDN

https://cdn.sanity.io/images/ydtnjczu/production/{hash}-3000x2000.jpg ?rect=0,63,3000,1875&w=1600&h=1000

Stage 2 — Next.js Image

/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2F…&w=3840&q=75

Sample project still life
Static stand-in: width="1200" height="750" matches intrinsic ratio · sizes="(max-width: 768px) 100vw, 80vw" in Next.js chooses srcset widths.

Throttle the network in DevTools to see decoding; the layout does not jump because dimensions are fixed.