What's the difference between ordered and Floyd-Steinberg dithering?

Ordered dithering applies a fixed repeating 4x4 threshold pattern (a Bayer matrix), producing a regular, grid-like dot texture that's cheap to compute. Floyd-Steinberg instead diffuses each pixel's rounding error into its neighbors as it scans, producing a less regular, often smoother-looking texture at a small performance cost.

Why dither at all if the GIF is already going to be quantized on encode?

Without dithering, quantizing down to a limited palette produces visible flat color bands in gradients. Dithering scatters the rounding error as a textured dot pattern instead, which the eye blends back into something closer to the original smooth gradient.

Does this change the GIF's actual color count?

No, both methods quantize each channel to the same 6 levels this category's shared palette already uses; dithering changes how the banding looks, not how many colors are used.

Will alpha/transparency be dithered too?

No, only the RGB channels are dithered; each pixel's original alpha value passes through unchanged.

GIF Ditherer - Ordered or Floyd-Steinberg Dithering Online

Overview

Introduction

This tool dithers every frame of an animated GIF toward this category's shared 216-color palette, entirely in your browser, using either an ordered Bayer pattern or Floyd-Steinberg error diffusion.

It exists specifically to counteract the flat color banding that any fixed-palette GIF encoder introduces on smooth gradients.

What Is GIF Ditherer?

A client-side dithering tool that quantizes each pixel's RGB channels down to the same 6-levels-per-channel cube this category's shared encoder already uses, but does so with an intentional textured pattern instead of plain rounding.

Ordered mode uses a fixed 4x4 Bayer threshold matrix; Floyd-Steinberg mode instead diffuses each pixel's quantization error into its right, bottom-left, bottom, and bottom-right neighbors as it scans.

How GIF Ditherer Works

Every frame is decoded into an RGBA pixel buffer, then processed independently: ordered mode adds a small per-pixel offset (from the Bayer matrix, based on the pixel's x/y position modulo 4) before rounding each channel to the nearest of 6 evenly-spaced levels.

Floyd-Steinberg mode instead rounds each pixel in scan order and pushes the resulting rounding error forward into not-yet-processed neighboring pixels, using the classic 7/16, 3/16, 5/16, 1/16 weighting, before all frames are re-encoded.

When To Use GIF Ditherer

Use it before downloading a GIF that has smooth gradients or soft shading, to avoid visible flat color bands in the final re-encoded file.

It's also useful purely as a stylistic effect, giving an animation a textured, retro dithered look.

Often used alongside GIF Dither Remover, GIF Quantizer and GIF Color Reducer.

Features

Advantages

Directly targets the exact palette this category's shared encoder uses, so the dithering actually matches what encoding will do.
Offers two genuinely different dithering algorithms rather than a single fixed style.
Preserves alpha and animation timing exactly.

Limitations

Dithering can't add back detail that was never there; it only redistributes existing color information as a pattern.
Floyd-Steinberg's error diffusion runs sequentially per frame, so very large or very long GIFs take a little longer to process than the fixed-pattern ordered mode.

Examples

Dithering a soft gradient banner

Input

An animated banner GIF with a smooth color gradient background, Floyd-Steinberg method

Output

The same banner with a fine dot pattern replacing what would otherwise be visible color bands

Error diffusion spreads each pixel's rounding error forward, breaking up flat bands into a textured gradient approximation.

Best Practices & Notes

Best Practices

Reach for Floyd-Steinberg when the source has soft, photographic-style gradients; use ordered mode for a more deliberately retro, grid-patterned look.
Run this before downloading from a tool that reduces colors further, like GIF Color Reducer, if banding is a concern.
If you later want to soften a dithered look back down, GIF Dither Remover offers a best-effort smoothing pass.

Developer Notes

Both dithering methods quantize to a fixed step size of 255/5 (matching the shared codec's LEVELS = 6 cube exactly) rather than an arbitrary user-chosen level count, so the dithering always targets what `encodeGif` will actually produce; the Floyd-Steinberg kernel is copied verbatim from this codebase's PNG dithering-adder tool for consistency, applied per decoded frame.

GIF Ditherer Use Cases

Reducing visible color banding in an animated GIF with smooth gradients before final export
Giving a GIF a deliberately retro, textured dithered look for a stylistic effect
Preparing an animation for a context where the shared 216-color re-encoding palette would otherwise band noticeably

Common Mistakes

Expecting dithering to increase the actual color count; it only changes how the existing quantization looks.
Using ordered dithering on photographic content and being surprised by its visible grid pattern; Floyd-Steinberg usually reads more naturally there.

Tips

Zoom into the preview to compare the two methods' dot patterns before choosing one.
Combine with GIF Color Reducer for a deliberately retro, heavily-dithered low-color look.

GIF Ditherer