Why JPEG Images Show Color Banding in Gradients

Smooth color gradients often degrade into visible, stair-stepped stripes in JPEG images due to a digital artifact known as color banding. This visual flaw occurs because of a combination of limited color depth, lossy compression algorithms, and human visual perception. When continuous, subtle shifts in tone are compressed into standard 8-bit files, the fine mathematical steps between colors are rounded off, merging thousands of imperceptible shades into a handful of distinct, visible blocks.

8-Bit Color Depth Limitations

Standard JPEG files are constrained to an 8-bit color depth per channel (Red, Green, and Blue). An 8-bit channel allows for only 256 discrete brightness levels per color, yielding roughly 16.7 million total color combinations. While this seems vast, a gradient stretched across a large area—such as an open blue sky or a soft shadow—often spans only a narrow slice of that color spectrum.

If a gradient transitions between two very close shades of blue over a span of 1,000 pixels, there may only be 20 to 30 mathematically available values to represent that entire span. Because the format lacks the intermediate values necessary to draw a smooth transition, multiple adjacent pixels are forced to share the exact same color value before jumping abruptly to the next, creating visible steps.

Discrete Cosine Transform and Quantization

The core of JPEG compression relies on the Discrete Cosine Transform (DCT) and a process called quantization. The encoder breaks an image into 8x8 pixel blocks and converts spatial pixel data into frequency components. High-frequency components represent sharp edges and fine textures, while low-frequency components represent broad areas of color and smooth transitions.

Quantization intentionally discards subtle color variations by dividing these frequency values by preset coefficients and rounding them to the nearest integer. In smooth gradients, the subtle differences in brightness between adjacent 8x8 blocks are treated as negligible data and rounded to identical values. This lossy reduction flattens nuanced tonal variations into uniform patches, severely exaggerating the stepped look.

Chroma Subsampling

JPEG encoders routinely apply chroma subsampling (most commonly 4:2:0) to save file space. This technique exploits the human eye’s lower sensitivity to color detail compared to brightness detail by reducing the resolution of color (chrominance) data by half both horizontally and vertically. While effective for busy, textured scenes, chroma subsampling drastically cuts the color data available to render smooth gradients, compounding the banding effect in colorful areas like sunsets.

The Mach Band Effect

The visibility of color banding is worsened by the human visual system through an optical illusion known as the Mach band effect. The human eye exaggerates the contrast at the borders between slightly different shades of luminance. When a continuous gradient is broken into discrete steps, the visual cortex naturally enhances the boundary line where one step meets the next, making the harsh transitions stand out far more than the raw pixel data would suggest.

How Banding Is Mitigated

To prevent banding in gradients, creators typically introduce "dithering"—a technique that adds a microscopic layer of digital noise to the gradient before export. This noise breaks up the uniform edges of each color step, tricking the human eye into perceiving a seamless transition even within the rigid confines of an 8-bit JPEG.