Next.js Image Pipelines That Designers Trust

Our design team once taped a screenshot above my monitor with "why is this hero still blurry?" in red marker. The culprit was a half-configured Next.js image pipeline.

Next.js ships with great defaults but only if the remote patterns, loader settings, and cache headers are dialed in together.

• Serve editorial imagery from a predictable subdomain so the optimizer never falls back to the unoptimized <img> tag.

• Lock popular breakpoints into the sizes prop to prevent layout shifts on slower devices.

1export default {
2  images: {
3    formats: ["image/avif", "image/webp"],
4    remotePatterns: [
5      {
6        protocol: "https",
7        hostname: "media.example.com",
8        pathname: "/**"
9      }
10    ],
11    minimumCacheTTL: 60 * 60 * 24
12  }
13};
Copy

We pair that config with a tiny lint rule that bans raw <img> usage in the app directory. The rule has caught countless regressions.

Once a week I spot-check the media CDN logs and compare them with the Next.js image cache to confirm hit rates. Designers notice the difference immediately, and Core Web Vitals agree.