Computing1 bit per pixel

Every pixel in the picture below is either pure black or pure white. There is no grey anywhere in it. And yet you will see a shaded ball, a soft shadow and a sky that fades from light to dark. Drag across the picture to move the light, then switch between the four methods and watch how differently a computer can solve the same problem.

drag to move the light
2.0×
–black dots
–real average grey
–brightness kept
Drag or tap the picture to move the light. “Brightness kept” compares the average brightness of the black-and-white version with the true grey image. Make the dots bigger to see the patterns each method draws.

Your eye is a blur filter

Hold a newspaper photo close and you see dots. Hold it at arm’s length and the dots melt into smooth tones. Your eye can’t resolve detail finer than a certain size, so it averages whatever lands in each tiny patch. A patch that is one quarter black reads as light grey. A patch that is three quarters black reads as dark grey.

That gives a computer with only two colours a way out. It can’t make grey pixels, but it can choose how many black pixels to put in each small area. This trick is called dithering. The hard part is choosing which pixels, because the pattern you pick decides whether the result looks smooth, grainy or full of strange textures.

The obvious way fails

The simplest rule is: if a pixel is darker than 50%, make it black, otherwise white. Tap Cut at 50% above. The ball turns into a flat blob with a hard edge, and the gentle sky becomes one sharp line. Every tone between 0% and 50% collapses to white and everything else collapses to black. All the shading is gone, because each pixel is rounded on its own and the rounding mistakes pile up in the same direction.

Add noise on purpose

A fix that sounds backwards: add randomness. Instead of comparing each pixel with 50%, compare it with a random number. A pixel that is 30% dark now turns black about 30% of the time, so across a patch roughly 30% of the dots come out black. Tap Random noise. The shading is back, and the average brightness is close to right. But it looks like a grainy old photo, because random dots clump together and leave gaps by chance.

A tile of thresholds

In 1973 Bryce Bayer, an engineer at Kodak, presented a tidier approach. Rather than random thresholds, use a small tile of thresholds arranged so that dots spread out as evenly as possible, and repeat that tile across the whole image. The classic 4×4 version holds the numbers 0 to 15 in this order:

0
8
2
10
12
4
14
6
3
11
1
9
15
7
13
5

A pixel at a given spot in the tile turns black if its darkness beats that spot’s number (out of 16). As the grey gets darker, dots switch on in the order 0, 1, 2, 3… and each new dot lands as far as possible from the ones already on. Tap Bayer tile and push the dot size up: you’ll see a neat cross-hatch texture. It is very fast, since every pixel is handled on its own with one comparison, and the pattern stays locked to the screen, so it doesn’t shimmer when things move. Microsoft Windows used ordered dithering like this in its 16-colour graphics modes.

Pass the mistake on

In 1976 Robert Floyd and Louis Steinberg published a different idea called error diffusion. Go through the image one pixel at a time. Round the pixel to black or white, then measure how wrong you were, and hand that error to the neighbours you haven’t visited yet:

now
7/16
3/16
5/16
1/16

If a 40%-dark pixel gets rounded to white, the 40% it “owed” is pushed onto the pixels to the right and below, making them more likely to go black. Nothing is thrown away, so the average brightness of every region stays almost exactly right. Floyd and Steinberg found those four weights by trial and error, aiming for a 50% grey to come out as a perfect checkerboard. Tap Floyd–Steinberg and compare the “brightness kept” number with Cut at 50%.

Error diffusion keeps fine detail and edges better than a fixed tile, which is why it became a default in image software. It is often what happens when a full-colour photo is squeezed into a GIF, a format limited to 256 colours. Its weakness is that it depends on the order pixels are visited, so in animation the dots can crawl from frame to frame.

Why dots are back in fashion

Screens today can show millions of colours, yet dithering never left. Printers still build tones from ink dots. Graphics programs still dither when they reduce colours. And some artists pick it on purpose: Lucas Pope’s 2018 game Return of the Obra Dinn draws an entire 3D ship in just two colours, a style inspired by games on early Macintosh computers. Keeping those dots steady while the camera moved turned out to be one of the hardest parts of making it.

So the next time you see a grainy black-and-white image, look closer. Somewhere, a program decided, one dot at a time, where to hide the grey.