Image Dither

What is image dithering?

Dithering is a technique for displaying continuous-tone images on a device that can only reproduce a small, fixed number of colours. Instead of simply rounding each pixel to the nearest available shade — which produces harsh banding and lost detail — a dithering algorithm spreads the rounding error across neighbouring pixels. The result is a fine, scattered pattern of light and dark dots that, viewed from a normal distance, the eye blends back into smooth gradients. The classic use case is converting a grayscale photograph into pure black and white for printing in a newspaper, but the same principle works for any small palette.

This tool applies the most popular dithering algorithm, Floyd-Steinberg, entirely inside your browser. You upload an image, choose how many grey levels you want (2, 4, 8 or 16), and the tool reads the raw pixel buffer through the Canvas API, converts the picture to luminance, then walks every pixel in scan order, quantising it to the nearest level and diffusing the difference to its neighbours. Nothing is uploaded, and the result is ready almost instantly.

How the Floyd-Steinberg filter works

Under the hood the tool uses the Canvas 2D API. The source image is drawn onto an offscreen canvas, then getImageData returns the raw pixel buffer. The image is first converted to a grayscale luminance buffer using the standard 0.299·R + 0.587·G + 0.114·B weighting. The algorithm then iterates over the buffer in scanline order. For each pixel it finds the closest allowed level — computed as round(luminance / step) × step, where step = 255 / (levels − 1) — and replaces the pixel with that value.

The crucial step is what happens to the difference between the old and new value, called the quantisation error. Floyd-Steinberg distributes this error to four not-yet-processed neighbours using a fixed kernel: 7/16 to the right, 3/16 to the lower-left, 5/16 directly below, and 1/16 to the lower-right. By carrying the error forward, the algorithm preserves the average brightness of each region, which is why a 2-level image can still look like a smooth photograph rather than a high-contrast stamp. The colour-count selector sets the number of grey levels: 2 gives pure black and white with the strongest retro feel, while 16 keeps enough shades that dithering is barely visible.

Dither vs other quantisation effects

Dithering is related to, but distinct from, several other palette-reducing effects. Posterize also reduces the number of levels, but it simply rounds each pixel independently, producing visible bands where one shade jumps to the next. Dithering breaks up those bands into fine noise that the eye averages out. Halftone uses round dots of varying size on a regular grid to simulate tones, evoking printed ink; dithering instead scatters individual pixels, producing a finer, more digital texture. Threshold converts to a hard black-and-white with no error diffusion, so anything above a fixed cutoff becomes white and anything below becomes black — useful for line art, but it throws away all gradient information.

The signature of Floyd-Steinberg dithering is its scattered noise pattern: dark areas fill with mostly black pixels, light areas with mostly white, and midtones get an even speckle that simulates grey. This makes it the right choice when you want a small palette to retain as much photographic detail as possible.

When to use dithering

Dithering is a versatile effect that spans both technical and stylistic use cases. Common scenarios include:

• Retro and pixel art. A 2-level dithered photo instantly evokes early home computers, Game Boy screens, or 1-bit newspaper print.
• Printing on limited-colour devices. When a printer or plotter can only lay down black ink, dithering lets you reproduce grayscale photographs faithfully.
• E-ink and low-bit-depth displays. Devices like e-readers benefit from dithering to smooth gradients that would otherwise band on a 2- or 4-level screen.
• Stylised graphics. Use 4 or 8 levels for a gritty, comic-noir look that keeps more detail than pure black and white.
• File-size reduction. A dithered 2-level image compresses extremely well as a PNG, making it ideal for icons, masks, or textures that must stay tiny.

Whenever you need a small palette to carry a photographic image, or you want a deliberately retro texture, dithering is the fastest route there.

How to apply dithering to an image

Dithering an image takes only a few seconds and everything happens locally in your browser — no upload, no sign-up, no watermark. Follow these steps:

1. Upload your image. Click the upload area or drag a JPG, PNG, WebP, GIF or BMP file into it. The image is decoded and previewed immediately.
2. Choose a colour count. Pick 2 for pure black and white, 4 or 8 for a stylised look, or 16 for a subtle, near-photographic result.
3. Select an output format. Pick PNG for lossless quality (best for 2-level images), JPG for smaller photo files, or WebP for a balance of size and quality.
4. Click "Apply Dither". The tool processes the image and shows the original and resulting file sizes side by side.
5. Download the result. Click "Download Dithered Image" to save the file. Your original is never modified.

Because every step runs locally through JavaScript, your images are never sent to a server. This makes the tool completely private, fast, and suitable for sensitive material.