Quantization and Dithering: Simulating Palette Reductions
How pixel banding and Floyd-Steinberg dithering algorithms work under client-side canvas.
SJ
Sarah Jenkins
Contributing Author · Squoosh Next BlogWhen reducing a full-color image to a limited palette, abrupt color transitions produce visible banding artifacts where smooth gradients become staircase blocks. Dithering algorithms solve this by distributing quantization error across neighboring pixels. Floyd-Steinberg error diffusion is the most widely used method: after quantizing a pixel, the difference between the intended and actual color is spread to four neighboring pixels using the weights 7/16, 3/16, 5/16, and 1/16.
The result is a pattern that tricks the human visual system into perceiving smooth gradients even with a 256-color palette. Ordered (Bayer matrix) dithering places a fixed threshold pattern across the image, producing a distinctive retro halftone look useful for pixel art aesthetics. Both are implemented in Squoosh Next's dithering archetype using pure Canvas ImageData operations.
Key Takeaways
When reducing a full-color image to a limited palette, abrupt color transitions produce visible banding artifacts where smooth gradients become staircase blocks.
Dithering algorithms solve this by distributing quantization error across neighboring pixels.
Floyd-Steinberg error diffusion is the most widely used method: after quantizing a pixel, the difference between the intended and actual color is spread to four neighboring pixels using the weights 7/16, 3/16, 5/16, and 1/16.
The result is a pattern that tricks the human visual system into perceiving smooth gradients even with a 256-color palette.
Try It in the Workspace
Everything discussed in this article can be tested directly in Squoosh Next — no sign-up, no upload, 100% client-side.