Color Quantization and Dithering

A 24-bit image can express 16.7 million colors. Almost nothing that displays or stores that image can afford all of them. The GIF format tops out at 256 colors per frame. PNG-8, indexed BMPs, and many sprite formats do the same. E-paper price tags show a handful. Embedded screens, LED matrices, retro consoles, thermal printers, and a thousand constrained devices all live on tiny palettes. Even when the hardware can show everything, compression and file size reward using fewer colors.

Quantization answers the question "which colors do we keep, and where does each original pixel land?" Done naively, it produces ugly banding - smooth gradients shatter into visible steps. Dithering is the countermeasure: by mixing the available colors in a fine pattern, it fools the eye into seeing intermediate shades that the palette can't actually produce. Together they are one of the oldest and most useful tricks in computer graphics.

Before you can map pixels, you need a palette - the small set of colors you are allowed to use. A bad palette dooms the result no matter how good the dithering; a palette tuned to the image can look almost lossless. There are two families: fixed palettes (chosen ahead of time) and adaptive ones (computed from the image's actual colors).

The demos below use a simple uniform palette (N levels per channel) so the quantization is easy to see and reason about - but everything about dithering applies equally to an adaptive median-cut or k-means palette. The palette decides which colors; dithering decides how you arrange them.

The simplest quantization is posterization: round every channel to the nearest of N evenly spaced levels. With 2 levels per channel you get 8 colors; with 4, you get 64. The problem shows up wherever the original is smooth - a sky, a soft shadow, a gradient. Continuous tone collapses into flat plateaus separated by hard edges: banding, also called contouring. Drop the levels and watch the bands appear.

The first cure for banding is ordered dithering. Instead of rounding every pixel the same way, you nudge each one up or down by a small amount read from a fixed threshold matrix that tiles across the image. The classic is the Bayer matrix, a recursively-built grid that spreads its thresholds as evenly as possible. The result is a regular cross-hatch that, from a distance, reads as the in-between shades the palette can't store. Compare the plain and dithered halves.

The other great family is error diffusion, and its most famous member is Floyd–Steinberg (1976). The idea is beautifully simple: quantize a pixel to the nearest palette color, measure the error you just introduced, and push that error onto the neighboring pixels that haven't been processed yet - 7/16 to the right, then 3/16, 5/16, 1/16 across the row below. Each pixel pays for the rounding of the ones before it, so the errors cancel out over an area instead of piling up into a band. Toggle it on the gradient below.

Put it together on a full-color image. Reducing a rich, multi-hue picture to a small palette is where quantization and dithering really earn their keep: the right palette size plus dithering can make an 8- or 27-color version look startlingly close to the original. Switch the palette size and flip dithering on and off to feel the trade.

Quantization is full of small decisions that quietly make or break the result. A few habits keep reduced-color output looking deliberate rather than damaged.

Six questions on quantization, banding, palettes, ordered dithering, and error diffusion. Instant feedback, no scores recorded - a wrong answer comes with a short explanation.

Quantization sits between how color is stored, how it's mapped into a gamut, and how print turns tone into dots - here's where to go next.