What is Floyd-Steinberg dithering?

A classic error-diffusion algorithm: when a pixel's color is rounded down to a limited palette, the rounding error is distributed into neighboring pixels (7/16 to the right, 3/16 below-left, 5/16 below, 1/16 below-right), so the eye blends the resulting dot pattern back into something closer to the original gradient.

How is this different from posterizing?

Posterizing just rounds each pixel independently, producing flat color bands. Dithering also rounds each pixel, but diffuses the rounding error into nearby pixels first, replacing flat bands with a textured pattern that reads as a smoother gradient from a normal viewing distance.

What does the levels setting control?

Levels (2-32) sets how many evenly-spaced values each RGB channel can take after dithering; 2 gives a stark black/white-per-channel look, higher values give a subtler, closer-to-original result.

Does dithering affect transparency?

No. Only the RGB channels are dithered and diffused; the alpha channel is copied through from the source unchanged.

PNG Dithering Adder - Add Floyd-Steinberg Dithering Online

Overview

Introduction

This tool adds classic Floyd-Steinberg error-diffusion dithering to a PNG, entirely in your browser.

It works on a plain pixel buffer, so nothing you upload is sent to a server.

What Is PNG Dithering Adder?

A dithering tool that quantizes each RGB channel down to a limited number of levels while diffusing the rounding error from each pixel into its right, bottom-left, bottom, and bottom-right neighbors using the standard Floyd-Steinberg weights.

The result is the classic textured, halftone-like look associated with early computer graphics and limited-palette displays.

How PNG Dithering Adder Works

The tool processes pixels left-to-right, top-to-bottom, working on a float-precision copy of the pixel data so accumulated error doesn't get lost to premature rounding.

At each pixel, each channel is rounded to the nearest of the requested levels; the difference between the original and rounded value is then added into the corresponding channel of the four neighboring pixels using the 7/16, 3/16, 5/16, 1/16 Floyd-Steinberg weights.

When To Use PNG Dithering Adder

Use it to give an image a retro, limited-palette look, or to prepare an image for a genuinely low-color-depth display where dithering meaningfully improves perceived gradient smoothness.

It's also a good creative effect for stylized graphics referencing early computer or print halftone aesthetics.

Often used alongside PNG Posterizer, PNG Quantizer and PNG Artifacts Adder.

Features

Advantages

Runs entirely client-side; nothing you upload leaves your device.
Produces noticeably smoother-looking gradients than plain posterization at the same color-level count.
Uses the same, well-documented algorithm found in classic image processing software.

Limitations

At very low level counts, the characteristic dither texture is quite visible and won't suit every use case.
Processing works on a float buffer internally, so very large images take proportionally longer than simpler per-pixel filters.

Examples

Retro 2-level dither

Input

A grayscale gradient PNG, levels 2

Output

A black-and-white dot pattern that reads as a gradient from a distance

At only 2 levels per channel, the diffused error creates a stippled pattern approximating the original gradient.

Subtle 8-level dither

Input

A color photo PNG, levels 8

Output

A slightly textured version of the photo, close to the original but with a fine dither pattern

More levels leave less rounding error to diffuse, producing a much subtler dithering texture.

Best Practices & Notes

Best Practices

Use very few levels (2-4) for a deliberate retro/halftone effect, and more levels (8-16) if you just want to reduce banding from posterization.
View the result at 100% zoom, since the dither pattern can look different when scaled down by a browser.

Developer Notes

The pure dithering math lives in a lib function that copies the pixel buffer into a Float32Array to accumulate diffused error without premature clamping, then writes clamped, quantized byte values back into a fresh Uint8ClampedArray output buffer, keeping the algorithm fully testable under Node without a canvas.

PNG Dithering Adder Use Cases

Giving a modern image a retro, limited-palette computer graphics look
Reducing visible color banding compared to plain posterization at the same level count
Creating stylized halftone-like art from a photo

Common Mistakes

Expecting dithering to look identical to posterizing — the diffused error pattern is the whole point of the effect.
Using a very low level count and being surprised by how strong the dither texture looks; try more levels for a subtler effect.

Tips

Compare a few different level counts side by side to find the balance between texture and fidelity you want.
Combine with the grayscale-focused tools first if you want a classic black-and-white dithered look.

PNG Dithering Adder