Photo2PatternFree dithering comparison
Floyd–Steinberg dithering, beside the alternatives
One picture, one grid, one palette, four passes: no dithering, Floyd–Steinberg, Atkinson and ordered Bayer, drawn at the same time so the difference between them is something you look at rather than something you remember. Each pass reports how many palette entries it reached, how far its cells sit from their true colors in Oklab, and how much of the grid it moved. The kernel diagrams are generated from the code that runs the diffusion and the strength is adjustable from 0 to 100%. Free, no account, and all four passes are computed on your own machine.
- 100% free
- No signup
- 4 passes at once
- Kernels shown as weights
- Up to 200 cells across
Press Ctrl+V anywhere on the page to drop in the gradient you want the kernels tested on — no need to click the field first.
Four evenly spaced levels, 85 apart. Wide enough that undithered gradients band visibly and narrow enough that the kernel has somewhere to put the error.
24 to 200. The texture is a property of the grid, not of the photograph: the same kernel on the same picture is coarse gravel at 32 cells and a fine mist at 200.
Scales every kernel weight, and the Bayer amplitude with them. At 0% all four panels are the same picture, which is the honest way to see how much of the result is the diffusion and how much was always there.
What the three kernels are, as arithmetic
Read out of the module the page runs, so the diagram and the result cannot disagree. The shaded square is the cell being decided; every other square is a neighbor that has not been decided yet and receives a share of this cell’s rounding error.
| — | here | 7/16 |
| 3/16 | 5/16 | 1/16 |
| — | here | 1/8 | 1/8 |
| 1/8 | 1/8 | 1/8 | — |
| — | 1/8 | — | — |
| 0 | 8 | 2 | 10 |
| 12 | 4 | 14 | 6 |
| 3 | 11 | 1 | 9 |
| 15 | 7 | 13 | 5 |
How to compare three dithering kernels on one picture
The comparison is the tool. Everything else is choosing what to compare against.
Choose the palette before the kernel, because the palette decides whether there is anything to compare
Six sets are offered, from two entries to Perler's 117. Dithering is the management of rounding error, so its effect scales with how big the rounding is: at two entries every cell is wrong by a large amount and the three kernels produce three visibly different pictures, while at 117 the nearest bead is usually close enough that all four panels look the same. Start at 4 grays if you want to see what the algorithms actually do, and switch to a material palette when you want to know what they will cost you.
Read the three numbers under each panel, not just the picture
Each pass reports how many palette entries it reached, the mean Oklab distance between a cell's own averaged color and the entry it was handed, and the share of cells that ended up somewhere other than plain matching would have put them. That last figure is the size of the intervention. A kernel that moved 4% of the grid has barely touched the picture whatever the texture suggests, and one that moved 70% has rewritten it.
Pick one pass and take its key, not its picture
Clicking a panel opens it underneath with the full color key: swatch, printable mark, exact cell count and share for every entry in use. Turn on the marks to rule the grid and put a symbol in each cell, which is the form you work from on paper, then take the PNG or the CSV. The CSV carries the same counts as the table, so it can be sorted, priced or ticked off as you go.
Technical specifications
| The three methods, as arithmetic | Floyd–Steinberg spreads all of the error over 4 neighbors — 7/16 right, 3/16 down-left, 5/16 down, 1/16 down-right. Atkinson spreads 6/8 over 6 neighbors at 1/8 each and discards the remaining 2/8. Ordered Bayer spreads nothing: a 4×4 matrix of 16 fixed thresholds nudges each cell before it is matched |
|---|---|
| Where the error is carried | Linear light. sRGB bytes are not proportional to light, so diffusing them pushes visibly too much error into shadows; the working buffer decodes to linear, diffuses, and re-encodes per cell. Ordered Bayer is the exception and offsets the sRGB byte directly, because a threshold matrix is a comparison rather than an accumulation |
| Scan order | One pass, left to right, top to bottom. No serpentine — direction is not reversed on alternate rows, so error travels only right and down and never back into a cell already decided |
| Adjustable strength | 0 to 100% in steps of 5, applied to every kernel weight and to the Bayer amplitude. That amplitude is 32 sRGB bytes at full strength, so a cell is nudged between −16 and +14 before the palette sees it |
| Palettes available for the comparison | 6 fixed sets — black and white, 4 grays, 16 grays, PICO-8's 16, the IBM CGA 16 and Perler's 117 beads. The set is held constant across all four passes, which is what makes the comparison a comparison |
| Grid | 24 to 200 cells across, rows following the proportions of your file. Texture is a property of cell size, so the same kernel is coarse at 32 and nearly invisible at 200 |
| Reported per pass | Palette entries reached, mean Oklab distance between each cell's own color and the entry it received, and the count of cells that ended somewhere other than plain matching would have placed them |
| Sent anywhere | Nothing. Four passes, five canvases and every measurement above are computed in this tab |
Frequently asked questions
Which of the three kernels should I actually use?
Floyd–Steinberg for the closest color, Atkinson for faces, ordered Bayer for anything that has to tile or repeat. Floyd–Steinberg passes on all of the error, so it wins the mean-distance column on nearly every picture and pays for it in speckle. Atkinson throws a quarter of the error away, which keeps true blacks black and true whites white instead of peppering them, and that is why portraits usually read better through it. Bayer carries no error at all, so its pattern is identical everywhere and never accumulates — the property you want if the result is a repeating background, an animation frame or a print screen, and the one that makes it look mechanical anywhere else.
Why does Atkinson wash out the middle of my picture?
Because it deliberately loses two eighths of the error and never gets them back. The six neighbors each take one eighth, which totals six eighths, and the remaining quarter is simply dropped rather than being carried to the next cell. In the extremes that is a feature: a nearly-black region has its small error discarded and stays solid rather than picking up scattered light cells. In the midtones the same discarding removes exactly the contrast that was being encoded, so a gray ramp comes out shorter than it went in. The mean-distance figure under the panel makes this measurable — Atkinson is normally the worst of the three on that number and often the best to look at.
Why does the bottom right of the result look different from the top left?
Because error diffusion is a single pass that runs left to right and top to bottom, and error only ever travels into cells that have not been decided yet. Floyd–Steinberg pushes 7/16 to the cell on its right and the remaining 9/16 onto the row below, so nothing is ever pushed back up or back left. On a long flat gradient that one-way flow can produce a faint diagonal drift, which is what serpentine scanning — reversing direction on alternate rows — exists to cancel. This engine does not do serpentine, so if you see that drift it is real and not your monitor.
Does dithering add colors that were not in my palette?
No, and this is the single most common misunderstanding of the operation. Every cell still lands on an entry that already existed in the set — what changes is how many of those entries the picture reaches for. The mixing happens in your eye, not in the file: two entries alternating at a small enough size read as a third color that is in neither of them, which is why a dithered 16-color conversion can look like it holds many more than 16. The panel headers count entries reached rather than colors created, and that count going up is the whole mechanism.
Should I dither a cross stitch chart or a bead pattern?
Almost never, and the page will price the decision for you. Choose the Perler palette and compare the plain pass with Floyd–Steinberg: the note under the chart states how many extra entries the kernel reached, and on a hand-worked piece each of those is another bag or skein bought, another color kept sorted on the table and another chance to place the wrong one. The texture it buys is invisible from a meter away, which is the distance the finished piece will be looked at from. Dithering earns its keep on a screen, on a print, and on Minecraft or LEGO builds where the units are already there — not on anything you place one at a time.
What is the difference between dithering and reducing the number of colors?
Dithering keeps the palette and hides the rounding error; reducing colors changes the palette so there is less error to hide. They are separate operations and they compose: you can pick sixteen colors out of a photograph and then dither against those sixteen, and most good results do both. This page holds the palette fixed on purpose so that the only variable is the kernel. If it is the palette you want to change, that is what the color reduction page does, and if you want the tones flattened to a fixed ladder instead of clustered, that is posterizing.
All four panels look identical on my picture. Is something broken?
Three things produce that, and all of them are the tool being honest. Strength at 0% disables every kernel, so all four passes are the plain nearest-color result — check the slider first. A large palette does the same thing for a different reason: against 117 beads the nearest entry is already so close that there is almost no error to spread. And flat artwork — a logo, a vector illustration, a screenshot of solid fills — genuinely has no gradient in it, so there is nothing for a kernel to work on. Drop in a photograph with a sky or a lit cheek in it and the four panels separate immediately.
About error diffusion, and why the three kernels disagree
Dithering solves a problem that has nothing to do with picture quality and everything to do with bookkeeping. When a cell whose true color is a mid-gray is forced onto a palette that holds only black and white, the match is wrong by a large amount, and a converter that simply rounds throws that amount away — every cell, independently, thousands of times. Robert Floyd and Louis Steinberg’s 1976 paper proposed keeping it instead: round the cell, measure how far the rounding was off, and add that difference to the neighbors that have not been decided yet. The error is not removed, it is redistributed, and at a small enough cell size the eye integrates the alternation back into the tone that was originally there. The 7/16 that goes to the cell on the right and the 9/16 that goes to the row below are the whole algorithm, and the fact that error travels only rightward and downward is why the pass is single and why the texture has a direction.
The three methods here differ in exactly one decision: what fraction of the error to pass on. Floyd–Steinberg passes all of it, which is why it wins the mean-distance figure on almost every photograph and why its result is the noisiest. Atkinson — named for Bill Atkinson, who wrote the graphics code for the first Macintosh — passes six eighths and discards the rest, a choice that keeps solid blacks and solid whites from being peppered with stray cells and visibly shortens the midtone range in exchange. Ordered dithering, from Bryce Bayer’s 1973 paper, passes nothing at all: a fixed 4×4 matrix of thresholds is tiled across the grid and each cell is nudged up or down before it is matched, so the pattern is identical in every region and cannot accumulate. That stability is also what made it the only practical option on hardware with no room to spare, and why the 8-bit converter opens with it selected: a threshold matrix is sixteen constants held once, while carrying error forward means keeping a second working copy of the picture alongside the first.
What most pages about this operation leave out is that dithering is not free, and on this site it is billed in objects. Every entry a kernel reaches for is a bead to buy, a skein to keep sorted or a brick to sort into a tray, and the texture bought with them is invisible at the distance the finished piece is looked at from. So the panel that matters on a material palette is not the prettiest one, it is the count of extra entries printed underneath, and the honest answer for anything placed by hand is usually the plain pass. Dithering is worth its cost where the units already exist: a screen, a print, a set of glyphs where character density is doing the shading and the characters cost nothing. If the palette itself is what you want to change rather than the way its error is hidden, start from clustering the colors your picture already has or from a palette pulled out of the artwork, and come back here once the set is fixed.
Product and company names shown here are the trademarks of their respective owners. Photo2Pattern is an independent tool and is not affiliated with, sponsored by or endorsed by any of them.
Where the four passes are computed
Your picture is opened by JavaScript running in the tab you are reading this in. It is never uploaded, never sent to a server and never stored anywhere — there is no upload step to undo, because there is no upload. Close the tab and nothing of it remains.
Comparing four kernels means running the conversion four times, and all four run on your own processor. That is also why the grid stops at 200 cells across: past that the fourth pass is being paid for by your battery rather than by a server somewhere.