Payload Logo

Getting next/image Right Is Harder Than It Looks

Date Published

A hand holds up a Canon DSLR camera with a large zoom lens against a bright sky, sunlight flaring through the lens

The component solves a real problem: serving the right image size for the right device without hand-rolling a dozen srcset variants. But it only solves that problem correctly when it's given the dimensions, the priority, and the sizing hints it actually needs — omit those and it silently falls back to defaults that are often wrong for the layout it's sitting in.

The most common failure isn't a missing feature, it's a missing `sizes` attribute on an image that isn't actually full-width — the browser downloads a size meant for the largest possible viewport and serves it to a thumbnail slot, and nothing in the build warns you.

None of this makes the component a bad idea — it remains the difference between hand-maintaining responsive images and not — but treating it as a drop-in fix rather than a component with real inputs to get right is exactly how a site ends up shipping images three times larger than the layout ever needed.