Image dither tool
Choose a picture, pick a dithering method and a small palette such as black and white, four greys, CGA, Game Boy or EGA, and see the result at once. A pixel size slider gives chunky retro pixels. The PNG is made in your browser, and nothing is uploaded.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Choose or drop a picture.
- Pick a Method and a Palette.
- Raise Pixel size for chunkier dots, then press Download dithered PNG.
How it works
With error diffusion, each pixel is replaced by the nearest palette colour and the difference is added to the neighbours that are not done yet: 7/16 to the right, 3/16 below left, 5/16 below and 1/16 below right. Ordered dithering adds a threshold from a Bayer matrix to the pixel first and then picks the nearest colour. Pictures with a side over 2400 px are reduced to that size before processing.
Example
Take a row of two mid-grey pixels (128 out of 255) and dither it to black and white with Floyd–Steinberg. The first pixel is closer to white, so it becomes white and leaves an error of −127. The second becomes 128 − 127 × 7/16 ≈ 72, which is black. Together the pair averages out to the grey you started with.
Tips
- Small palettes need contrast: raise the contrast of a flat photo first with the image filters.
- Do not resize a dithered PNG afterwards: scaling blends the dots and ruins the pattern. Set the pixel size here instead.
Frequently asked questions
What is dithering?
It is a way to show many shades with few colours. Pixels of the available colours are arranged so that, seen from a distance, they blend into the missing shade. A 50% grey becomes a fine pattern of black and white dots.
Floyd–Steinberg or Bayer: which one?
Floyd–Steinberg pushes each pixel's rounding error onto its neighbours, giving a natural, grainy look with good detail. Bayer ordered dithering uses a fixed pattern of thresholds, which gives the regular crosshatch look of old computers and is stable between frames. Larger matrices have more steps and less visible tiles.
What does the pixel size do?
The picture is reduced by that factor, dithered and enlarged again with sharp pixels. A size of 3 makes each dithered dot 3 × 3 pixels, which suits a retro look and keeps the pattern visible when the picture is scaled down on a page.
How are the grey palettes handled?
For black and white and the grey palettes the picture is first turned to grey using weights of 0.299 red, 0.587 green and 0.114 blue. The colour palettes pick the nearest colour by distance in red, green and blue.