Look closely at a newspaper photo and it falls apart into black dots of different sizes. Look at a screenshot of the first Macintosh and a gray sky turns out to be a scatter of black and white pixels. Look at a Game Boy sprite and four shades of green somehow draw a face. None of those displays or presses could show a smooth gradient, and all of them fake one the same way: by arranging a few available colors into patterns the eye averages back into tone.
That technique is dithering. This guide explains why it exists, how the main algorithms differ in the arithmetic they use, what the settings in a dither tool change, and how to get clean output for screen or print. The worked examples use the Toolz image dither tool, and the numbers come from the same formulas it runs.
TL;DR: Dithering reproduces a continuous-tone image with a small palette, often just two colors, by placing dots in patterns that the eye blends into intermediate tones. Ordered dithering (Bayer) compares each pixel to a fixed threshold matrix and gives a regular crosshatch. Error diffusion (Floyd-Steinberg, Atkinson) pushes each pixel's rounding error onto its neighbors for a more organic grain. Halftone varies dot size along a rotated screen, like print. The Image Dither tool offers six modes, retro palettes, PNG export up to 8x and true vector SVG, all client-side, free, no signup.
What is image dithering?
Image dithering is a way of showing tones that a palette cannot represent directly, by mixing the colors it can represent in small patterns. A black-and-white printer cannot print 50% gray, but it can print a checkerboard of black and white dots that looks gray from a normal viewing distance.
The problem it solves is called quantization. Every pixel has to be rounded to the nearest color in the available palette. Without dithering, a photograph reduced to black and white keeps only a hard silhouette: everything lighter than middle gray turns white and everything darker turns black. The gradient is gone. With dithering, the rounding still happens pixel by pixel, but the error is spread out or offset by a pattern, so the density of dark dots in each area tracks how dark that area was in the original.
Different algorithms spread that error in different ways, and the pattern each one leaves behind is its visual signature. That is why "dithered" can mean the neat crosshatch of an old PC game, the grainy texture of MacPaint, or the round dots of a screen-printed poster.
How are the dither algorithms different?
There are two families. Ordered dithering decides each pixel independently by comparing it with a position in a fixed threshold pattern. Error diffusion decides pixels in sequence and carries each rounding error forward to pixels not yet processed. Halftoning is a print-derived relative that changes dot size rather than dot placement.
| Mode in the tool | Family | How it decides | Look | Good for |
|---|---|---|---|---|
| Bayer 4x4 | Ordered | Compare tone with a 4x4 threshold matrix | Regular crosshatch, visible pattern | Retro game and early PC style, posters |
| Atkinson | Error diffusion | Push 3/4 of the error to six neighbors | High contrast, blown-out highlights | The 1984 Macintosh look, portraits with punch |
| Floyd-Steinberg | Error diffusion | Push all of the error to four neighbors | Fine organic grain, most faithful tone | Photographs where detail matters |
| Halftone | Amplitude-modulated screen | Dot radius grows with darkness, on a rotated grid | Round dots at an angle | Print-style posters, comic and pop art |
| Cyber Glitch | Palette snap plus displacement | Nearest palette color per block, shifted scanlines | Colorful blocks with horizontal tears | Stylized multi-color art |
| Hard 1-Bit | Threshold | Dark if tone is below 128 | No dithering, pure silhouette | Logos, line art, stencils |
The next sections walk through the arithmetic with real numbers, starting with the tone value every mode shares.
How is a pixel's tone calculated before dithering?
Before any pattern is applied, each pixel is converted to a single brightness value from 0 (black) to 255 (white). The tool uses the luma weights from ITU-R Recommendation BT.601, which weight green most because human vision is most sensitive to it:
luma = 0.299 R + 0.587 G + 0.114 B + brightness
curved = ((luma / 255 - 0.5) x contrast + 0.5) x 255 clamped to 0..255
The Brightness slider shifts every pixel by -100 to +100. The Contrast curve slider, 0.5 to 3 with a default of 1.4, stretches tones away from middle gray.
Worked example: a medium gray pixel RGB(100, 100, 100) at the default settings.
luma = 0.299(100) + 0.587(100) + 0.114(100) + 0 = 100
curved = ((100 / 255 - 0.5) x 1.4 + 0.5) x 255
= ((0.39216 - 0.5) x 1.4 + 0.5) x 255
= (-0.15098 + 0.5) x 255
= 89.0
So the default contrast pushes this gray darker, from 100 to about 89. A pixel exactly at 128 barely moves, and a pixel at 180 moves lighter. Raising contrast widens that spread, which means fewer mid-tones and bolder dot patterns.
How does Bayer ordered dithering work?
Bayer dithering tiles a small matrix of thresholds across the image and marks a pixel dark when its tone falls below the threshold at its position. The matrix is arranged so that thresholds are spread as evenly as possible across the tile, the arrangement published by Bryce Bayer in 1973. The tool uses the 4x4 version, scaled to 0-255:
0 128 32 160
192 64 224 96
48 176 16 144
240 112 208 80
Take a flat area where every pixel has the curved tone of 89 from the example above. A cell is dark when 89 is below its threshold. The thresholds above 89 are 96, 112, 128, 144, 160, 176, 192, 208, 224 and 240: ten of the sixteen. So 10 of every 16 cells get ink, which is 62.5% coverage, close to the tone's darkness of 1 - 89/255 = 65%.
Every area with the same tone gets exactly the same pattern, and that repetition is the Bayer look. It never produces random grain, it tiles cleanly, and it compresses well as PNG. Its weakness is banding: a slow gradient steps through at most 17 distinct patterns.
How does Floyd-Steinberg error diffusion work?
Floyd-Steinberg processes the image left to right, top to bottom. Each pixel is rounded to black or white, and the difference between its tone and the value it was rounded to is split among four neighbors that have not been processed yet, using weights that add to 16/16. Robert Floyd and Louis Steinberg published it in 1976.
current 7/16
3/16 5/16 1/16
Worked example with the tone of 89. It is below the 128 cutoff, so the pixel becomes black (0). The error is 89 - 0 = 89, which is handed on:
| Neighbor | Share | Added to its tone |
|---|---|---|
| Right | 7/16 | 38.9 |
| Below left | 3/16 | 16.7 |
| Below | 5/16 | 27.8 |
| Below right | 1/16 | 5.6 |
| Total | 16/16 | 89.0 |
The pixel to the right now has 89 + 38.9 = 127.9, just under the cutoff, so it probably turns black too and passes on its own smaller error. A little further on, the accumulated error tips a pixel over 128 and it turns white. Over an area, the proportion of black and white pixels matches the original tone, and because the choice depends on neighbors, the grain looks irregular rather than tiled.
Because the full error is kept, Floyd-Steinberg preserves overall tone best, which is why it is the pick for photographic faithfulness.
Why does Atkinson dithering look so contrasty?
Atkinson dithering, written by Bill Atkinson for the original Apple Macintosh, spreads the error wider but deliberately loses some of it. Each of six neighbors receives 1/8 of the error, so only 6/8 (three quarters) is passed on:
current 1/8 1/8
1/8 1/8 1/8
1/8
With the same tone of 89 and an error of 89, each neighbor gets 11.125, for a total of 66.75 passed on, and 22.25 is simply dropped. Dropping error pushes near-white areas to pure white and near-black areas to pure black, so highlights blow out, shadows block up, and mid-tones keep a crisp, open texture. It is less accurate than Floyd-Steinberg and often more attractive, especially on faces and small screens.
How does the halftone mode work?
Halftoning varies the size of dots rather than their placement. The tool lays a grid of sample points rotated to the screen angle, reads the tone at each point, and draws a circle whose radius grows as the tone darkens:
radius = (1 - tone / 255) x (pixel scale / 2) x 1.3 capped at pixel scale / 2
dots with a radius of 0.4px or less are not drawn
With the default 4px pixel scale:
| Tone | Radius | Result |
|---|---|---|
| 0 (black) | 2.6, capped to 2.0 px | Touching dots, solid dark |
| 89 | (0.651) x 2 x 1.3 = 1.69 px | Medium dot |
| 200 | (0.216) x 2 x 1.3 = 0.56 px | Small dot |
| 230 | (0.098) x 2 x 1.3 = 0.25 px | Skipped, reads as paper |
The default angle is 45 degrees, the convention for a single-color screen because a diagonal grid is less noticeable to the eye than rows aligned with the page edges. Angles near 0 or 90 produce visible horizontal or vertical lines. The angle slider only affects this mode.
What do the pixel scale, palettes and invert settings change?
Pixel scale (2 to 32px, default 4) sets the size of each block or dot cell. The tool samples one pixel per cell rather than averaging the cell, so very fine detail smaller than a cell can disappear or produce moire patterns on fabrics and grilles. Larger cells give a chunkier, more graphic poster; smaller cells hold more detail and produce larger SVG files.
Palettes set the colors. Five presets are included: Brutal Paper (papyrus, hazard yellow, charcoal), Mac OS 1984 (white, gray, black), Gameboy Classic (four greens), Cyberpunk Neon and Synthwave 80s, plus Custom Colors with your own background and foreground. Five of the six modes are two-tone and use only the first and last palette color. That is why Gameboy Classic shows only its lightest and darkest greens in Bayer or Floyd-Steinberg. Cyber Glitch is the one mode that maps to every color in the palette.
Invert swaps background and foreground, for light dots on a dark field.
What size can you export, and when should you use SVG?
The photo is first cover-fitted onto a fixed stage, so a 6000px camera file renders as fast as a small one. Drag inside the canvas to reposition the crop.
| Aspect ratio | Stage (1x) | 2x (default) | 4x | 8x |
|---|---|---|---|---|
| Original | 840 px wide | 1680 wide | 3360 wide | 6720 wide |
| 1:1 square | 840 x 840 | 1680 x 1680 | 3360 x 3360 | 6720 x 6720 |
| 16:9 landscape | 1120 x 630 | 2240 x 1260 | 4480 x 2520 | 8960 x 5040 |
| 9:16 vertical | 630 x 1120 | 1260 x 2240 | 2520 x 4480 | 5040 x 8960 |
| 4:3 classic | 1040 x 780 | 2080 x 1560 | 4160 x 3120 | 8320 x 6240 |
A PNG export does not enlarge the preview. It redraws the source at the target size and runs the dither again with the pixel scale multiplied by the export scale, so at 4x a 4px dot becomes a crisp 16px dot rather than a blurry enlargement. Rendering is done with the HTML canvas API, which holds large bitmaps in memory; if an 8x export fails with "Export failed. Try a smaller export scale.", do that.
SVG export writes every dot as a real <rect> or <circle> element, following the W3C SVG specification, so the poster scales to any print size without resampling and opens in a vector editor. The poster card text stays as editable text. The trade-off is file size. A 4px scale on an 840 x 1120 stage has 210 x 280 = 58,800 cells, and a dark rect-mode image can write most of them as separate elements of about 55 characters each, which approaches 3 MB. Doubling the pixel scale to 8 cuts the cell count to a quarter. Use SVG for print and editing, PNG for the web.
The CRT scanline effect never reaches an export; it is a preview overlay only. The poster card overlay, on the other hand, is part of the export and is on by default with the placeholder header "DITHERED // 2026"; untick "Show poster card overlay" if you want the image alone.
Are my images uploaded?
No. The file is opened as a local object URL, drawn onto a canvas and dithered in the same browser tab. No request carries image data, so unreleased photos or client assets stay on your device, and the tool keeps working with the network off once loaded. Paste from the clipboard with Ctrl+V or Cmd+V works too.
The built-in samples (Earthrise, Blue Marble and a lunar bootprint) are NASA photographs. Works of the US federal government are not subject to copyright under 17 U.S.C. 105, which is why they can ship as samples. For your own uploads, the tool adds no watermark and claims no rights; the usual limits are whatever rights you hold in the source image.
What errors can you run into?
| Message or symptom | Cause | Fix |
|---|---|---|
| "That file is not an image." | The file's type is not an image | Convert it first, for example with an image format converter |
| "That image could not be decoded." | The browser cannot read that format, such as HEIC outside Safari | Convert to JPG or PNG |
| "Export failed. Try a smaller export scale." | The browser could not allocate the large canvas | Choose 4x or 2x |
| "Clipboard read was blocked..." | The browser denied clipboard access to the button | Press Ctrl+V or Cmd+V on the page instead |
| Palette shows only two colors | Two-tone modes use the first and last colors | Switch to Cyber Glitch or set custom colors |
| Moire or shimmering patterns | Fine regular detail smaller than the pixel scale | Raise the pixel scale or blur the source slightly first |
| SVG much larger than PNG | One element per dot | Raise the pixel scale or export PNG |
Transparent areas in a PNG are placed on white before dithering, so they read as paper.
Alternatives for dithering an image
| Tool | How | Notes |
|---|---|---|
| GIMP | Image, Mode, Indexed, with Floyd-Steinberg dithering | Palette-based, no halftone screen angle |
| Photoshop | Grayscale, then Bitmap mode with Halftone Screen or Diffusion Dither | Print-oriented, paid |
| ImageMagick | magick in.jpg -colorspace Gray -ordered-dither o4x4 out.png |
Scriptable, many threshold maps |
| ImageMagick | magick in.jpg -dither FloydSteinberg -monochrome out.png |
Error diffusion to black and white |
| Toolz Image Dither | Six modes, palettes, vector SVG | Client-side, preview as you drag |
Command-line tools win for batches. An interactive tool wins when the look depends on nudging contrast and dot size while watching the result.
If the dithered PNG is heading to a website, the image compression guide covers how to shrink it further; images with only two colors compress extremely well as PNG. For turning the output into another format, the image format converter guide explains when PNG, WebP or GIF fits. The full set lives on the image tools hub, and you can try the dithering tool with one of the NASA samples before loading your own photo.
