Four Commits, One Flag: When the Image Optimizer Is the Bug
Flat-color artwork turned muddy by the default WebP quality-75 pipeline: a single unoptimized flag served the original file untouched.
TL;DR
The Next.js Image component's default lossy WebP pipeline at quality 75 wrecked flat-color mascot artwork, adding fat edges and banding the pristine PNG never had. Instead of touching global config, the fix was one unoptimized prop on that single hero slot; the 170 KB file is small enough that skipping optimization costs little. Photos stay optimized.
It was 01:07 when the first of four consecutive commits landed on a corporate website, and 01:14 by the last. Swap the hero mascot to new artwork, revert the manual edits and ship the original file as-is, then add one small property to the component: unoptimized. All of it traces back to one problem: the flat-color illustration turned muddy once it went through the default image pipeline.
The symptom is distinctive. In the original file, the mascot outline is crisp and its color fields are dead flat. Served through the image component, edges got fat and slightly jagged, and faint gradients appeared in areas that should be one uniform color. My first guess was wrong in the most predictable way: I blamed the designer's export. Then I opened the source file. Pristine. The damage was happening downstream, in the pipeline.
What the Default Pipeline Actually Does
The Next.js <Image> component optimizes automatically, and its default formats list serves WebP at quality 75 [6]. That conversion is lossy. WebP supports two modes: lossless, which stores pixels exactly, and lossy, built on VP8 intra-frame encoding [9]. At quality 75, photos survive fine; natural gradients and sensor noise hide the artifacts. Flat artwork has nowhere to hide. It lives on crisp transitions between solid fields, and precise reproduction is exactly the job PNG is chosen for [10]. When a lossy encoder discards data, what disappears first is the sharpness of those transitions: fat edges, banding, texture in areas that should be binary.
A detail from the middle commits deserves its own line. Before reaching the flag, two commits actually removed editing: the first mascot version got manually cropped and flood-filled, then minutes later the decision flipped and the original file shipped as-is, untouched, with the content-module dimensions synced to match. The safest handling for an asset that is already good is to not touch it at all, whether the tool is an image editor or the build pipeline.
Why not switch formats instead? The target was never the format but the compression character. Lossless WebP can shrink flat artwork without touching a single pixel, and the format has supported both modes since its spec. But the lossless path is not what the default Next.js pipeline takes, and changing global config for the sake of one slot trades a small problem for a big one. One property on one slot is the smallest patch that lands exactly where the damage was.
The Decision and the Trade-off
The fix is one property on the hero image: unoptimized tells Next.js to serve the original file untouched [6]. The mascot PNG is about 170 KB, nowhere near a multi-megabyte photo hero, so the performance cost is small and deliberate. Every other slot, photos and thumbnails, stays on the default pipeline where optimization genuinely earns its keep.
I also skipped two tempting detours. Flipping the global image config to lossless for one asset swaps a small problem for a big one. And raising quality toward 100 reduces artifacts but rarely eliminates them, while the file size creeps toward the already-optimized original anyway.
The check is repeatable in your own project. Open the network tab, grab the served file, put it next to the original in an image viewer, and zoom 200 to 300 percent into flat regions. Faint speckles, stepped gradients, or edges that lost their snap mean the compressor is fighting the asset. That is the moment to reach for the flag.
The optimizer is a tool, not a doctrine. Know what lives in each slot: photos go through the pipeline; flat artwork, line art, and brand assets deserve lossless handling or untouched delivery. Sometimes the best optimization is knowing when to step back and let a good file stay exactly as it is.