Dithering

In black-and-white mode, the result above contains exactly two colors. Not a single gray pixel. Yet you see soft shadows and gradients. So where do the shades come from?

The obvious way: round

The simplest idea is to round every pixel. Brighter than half becomes white; darker becomes black. That is the Threshold method, and it fails in a very recognizable way: the whole gradient collapses into flat blobs. Every pixel between “a bit dark” and “almost half” turns the same black.

Add randomness

The Random method adds noise before rounding, so the cut-off is different at every pixel. A pixel that is 30% bright now turns white about 30% of the time. The shades come back, but the picture is full of grain: clumps of white here, holes there, because nothing stops neighbors from making the same choice.

Bayer 8 × 8 replaces the random noise with a fixed 8 × 8 pattern of cut-offs, tiled across the whole image. Shades come out evenly, but every gray turns into the same regular cross-hatch texture, the look of early computer graphics.

Floyd–Steinberg: don’t throw the error away

In 1976, Robert Floyd and Louis Steinberg had a better idea: don’t throw the rounding error away.

Take one pixel with brightness 0.6. It becomes white, which is 1, so we just put 0.4 too much light into the picture. Instead of forgetting that, we take the 0.4 back from neighbors we haven’t drawn yet: seven sixteenths from the pixel to the right, and the rest from the row below (three sixteenths below-left, five sixteenths directly below, one sixteenth below-right).

Those neighbors are now a bit darker than they were, so they are more likely to round to black. Row by row, every bit of error gets paid back. Over any small area, the amount of light comes out right, even though each pixel is only black or white.

This is called error diffusion. In the reel, all four methods were blurred and compared with the original; passing the error on came out closest.

It’s not perfect. In large flat gray areas, the errors can line up into visible seams and little “worm” patterns. That is a known artifact of Floyd–Steinberg, and you may spot it in a clear sky.

The trick only works because of you. Your eye does the blurring. The algorithm just keeps track of what it owes.

Four colors picked from your photo

Switch the palette to 4 colors from your photo, and the same idea works in color.

First, the computer builds a palette from the photo itself with k-means clustering: it looks for four colors that sit at the centers of the photo’s main groups of colors. No colors are added by hand.

Then every pixel has to become one of those four. If you simply choose the nearest palette color for each pixel, smooth areas break into hard stripes. In the reel’s balloon photo, the blue sky turned into thick bands.

With error diffusion, each pixel still takes one of the same four colors, but its color error (red, green and blue separately) is passed to its neighbors. The stripes break into tiny dots, and from a step back those dots blend into smoother shading. No extra blues: just a different arrangement of the same four colors.

The reel also squeezed the palette: 256 colors, 16, 8, 4, and finally 2, where the balloon became a silhouette. The palette is small. The placement makes the difference.

What the controls change

• Method picks the rule for each pixel: Threshold (round), Random (round after noise), Bayer (round against a fixed pattern) or Floyd–Steinberg (round and pass the error on).
• Bayer size appears only for the Bayer method. It sets the size of the repeating pattern: 2 × 2, 4 × 4 or 8 × 8. A bigger pattern can express more in-between shades; a smaller one gives a coarser, bolder cross-hatch.
• Palette chooses between black and white and colors picked from your photo by k-means clustering.
• Photo colors appears only with the photo palette. It sets how many colors k-means picks, from 2 to 16. The reel’s balloon used 4. At 2, most photos turn into a silhouette, just like the end of the reel; at 16, the dots get hard to see.
• Pixel size makes the pixels bigger before dithering: the photo is averaged into blocks of 1 to 8 pixels, dithered at that size, and scaled back up without smoothing. Larger values look chunky and retro.
• Contrast stretches (above 1) or flattens (below 1) the photo’s tones before the palette is chosen and before dithering. More contrast pushes areas toward pure black and white, so less of the picture needs dots.

Try this

• Use a photo with a big smooth gradient, like a sunset or a blue sky. Threshold turns it into a few bands; Floyd–Steinberg keeps the gradient.
• Use the split view. Drag the divider across the sky to see stripes on one side and dots on the other.
• Look from far away. Hold your phone at arm’s length: the dots disappear and the shades come back. That is your eye doing the blurring.

Your photo is processed on your own device. Nothing is uploaded.