Image CDN / on-the-fly transforms

You upload one big original. The image CDN sits in front of it and reads instructions off the request: width, height, crop, quality, format. Ask for '/hero.jpg?w=640&q=70&fm=avif' and it renders that exact derivative once, caches it, and serves the cached copy to everyone else who asks. Cloudinary, imgix, and Cloudflare Images are the dedicated services. Next.js looks like one but is not: 'next/image' emits URLs pointing at an optimizer endpoint, and where those transforms actually execute and how well the results are cached depends on your deployment and on which loader you configured, the built-in one, your host's, or a third-party service.

The payoff shows up when you pair it with responsive markup: generate a 'srcset' of three or four widths, let 'sizes' tell the browser how big the slot actually is, and let the service negotiate format from the 'Accept' header so modern browsers get AVIF and old ones get JPEG. Most services also do smart cropping (face or focal-point aware), so a 16:9 hero and a 1:1 avatar can come from the same upload without a designer redoing crops.

Gotcha: every unique parameter combination is a separate cache entry and, on most pricing plans, a separate billed transform. Leave the params open to the internet and someone will loop through 'w=1' to 'w=4000' and hand you a bill plus a shredded cache hit ratio. Allowlist a fixed set of widths, or sign the URLs. Second trap: transforms do not fix layout shift, so keep explicit width and height (or an aspect ratio) on the element.