Guide
What is dithering?
When you cut an image down to a handful of colours, most pixels no longer have an exact match in the palette. Rounding each one to the nearest available colour throws that difference away, and smooth gradients collapse into flat, ugly bands.
Dithering keeps the difference instead of discarding it. Some methods push the leftover error onto neighbouring pixels that haven't been decided yet; others compare every pixel against a repeating threshold pattern. Either way you get a deliberate speckle that your eye blends back into the original tone — which is how an image with only black and white can still appear to have shading.
It is the trick behind Macintosh screenshots, Game Boy sprites, newspaper photographs and Teletext graphics, and it has had a strong revival in modern pixel art, album covers and risograph-style print.
Which algorithm should I use?
- Floyd–Steinberg
- The default, and what most people mean by "dithering". It spreads each pixel's error over four neighbours, giving a fine, even grain that holds detail well. Start here.
- Atkinson
- Written by Bill Atkinson for the original Macintosh. It passes on only three quarters of the error, so highlights blow out and shadows crush. You lose some detail and gain a crisp, high-contrast look that reads instantly as classic Mac.
- Jarvis–Judice–Ninke
- Spreads error across twelve neighbours instead of four. Slower and softer, with less of the worm-like patterning Floyd–Steinberg can show in flat areas. Good for large, smooth gradients such as skies.
- Bayer 8×8 — ordered
- No error diffusion at all: each pixel is compared against a fixed 8×8 threshold matrix. That produces the regular crosshatch familiar from DOS games and old console hardware. Because every pixel is decided independently of its neighbours, the pattern stays stable across frames, which is why it suits animation and tiling textures.
- Threshold
- Every pixel simply snaps to the nearest palette colour, with no dithering whatsoever. Use it for hard, graphic, poster-like results, and drive it with the brightness slider to decide exactly where the cut falls.
- Noise
- Threshold with random jitter added before each decision. Gives a grainy, film-like texture rather than a structured pattern, and never tiles visibly.
- Halftone
- Not a per-pixel method at all. It draws dots of varying size on a fixed grid, the way a newspaper press or a screen-printed poster does. The dot grid slider sets the screen frequency: small values give a fine print screen, large ones a bold pop-art look.
Palettes and tone
Ten palettes ship with the tool, and the custom one takes as many colours as you care to add. They are not all handled the same way, because they don't all mean the same thing.
Palettes whose colours sit on a single tonal ramp — the grays, sepia, the sixteen browns, the Game Boy greens — are dithered in luminance space rather than per RGB channel. Diffusing error separately through red, green and blue on a ramp like that introduces colour speckle that has nothing to do with the original image; working in luminance keeps the tone clean.
The Game Boy palette gets one extra step. Its four greens only span roughly 44 to 169 on the luminance scale, so matching them to real brightness would collapse every highlight onto the lightest green and leave the picture muddy. Instead the full 0–255 range is remapped across the four steps, which is what the hardware actually did.
Full-colour palettes — CGA, EGA 16, the eight-colour RGB set and any custom palette that isn't pure gray — are matched in RGB with a weighted distance that approximates how the eye judges colour difference, and the error is diffused per channel.
Getting a good result
- Pixel size
- Dithers a smaller copy and scales it back up with hard edges. Raise it for a chunky, obviously low-resolution look; leave it at 1 or 2 when you want the texture to stay fine.
- Brightness / threshold
- The single most useful control at low colour counts. One bit of colour has no room for error, so nudging the tonal balance before quantising is often the difference between a readable image and a black smear.
- Invert tones
- Flips the image before it is quantised, so the dark areas end up light and the light areas dark. Which way a dithered picture reads — dark dots on a light ground or the reverse — otherwise depends entirely on how bright the source is, and this lets you choose instead.
- Strength
- How much of the quantisation error is actually passed on. Full strength gives the cleanest tonal reproduction; pulling it down leaves some banding in place, which can look pleasantly cheap and period-correct.
- Work at the size you will publish
- Dither texture is measured in pixels, not in percent. A pattern that looks perfect at full size turns to mush when the image is scaled down afterwards, so export at the dimensions you actually intend to use.
Frequently asked questions
- Are my images uploaded anywhere?
-
No. Images are decoded, dithered and exported locally in a
<canvas>inside your browser. Nothing is sent to a server, there is no account, and no analytics or tracking scripts are loaded. - Which image formats can I use?
- Anything your browser can decode, which in practice means PNG, JPEG, WebP, GIF, AVIF and SVG. Exports are always PNG, so the dithered pixels stay exact — a JPEG would smear them immediately.
- Does it work on a phone?
- Yes. The layout stacks on small screens, and the compare slider, pinch to zoom and drag to pan all work with touch.
- Is there a size limit?
- No hard limit. The live preview is capped at 1400 pixels on the long edge so it stays responsive while you drag sliders, but exports are always rendered at the full resolution of the original.
- Does it work offline?
-
Yes. The page is a handful of static files with no dependencies and no external
requests, so once it has loaded it keeps working without a connection. You can also
clone the repository and open
index.htmlstraight from disk. - Can I use the dithered images commercially?
- The tool is MIT licensed and claims no rights over what you make with it. Whatever rights you had in the image you started from are the ones that apply to the result.