Overview
Introduction
This tool adds a retro, ordered-dithering texture to a PNG using the classic 4x4 Bayer matrix, entirely in your browser.
It's the same crosshatched-dot look found in early computer graphics and low-color-depth displays.
What Is PNG Bayer Filter Adder?
A client-side filter that quantizes each RGB channel down to a chosen number of levels, using a repeating 4x4 Bayer threshold matrix to decide, pixel by pixel, whether to round up or down.
The result is a structured, patterned dither rather than flat color banding or noisy error-diffusion grain.
How PNG Bayer Filter Adder Works
For each pixel, the tool looks up a threshold value from a fixed 4x4 Bayer matrix based on the pixel's x and y position modulo 4, scales that threshold to the current quantization step size, adds it to the pixel's red, green, and blue values, and then rounds the result to the nearest of the chosen number of levels.
Because the matrix repeats every 4 pixels in both directions, the same crosshatched threshold pattern tiles across the whole image, producing the recognizable dot-matrix ordered-dither look.
When To Use PNG Bayer Filter Adder
Use it to give a photo or graphic a deliberate retro, 8-bit or 16-bit console aesthetic.
It's also useful for previewing how an image would look on a limited-color-palette display before actually reducing its color count.
Often used alongside PNG Dithering Remover, PNG Bit Depth Converter and PNG Enhancer.
Features
Advantages
- Runs entirely client-side; nothing you upload is sent anywhere.
- Produces a structured, repeatable dither pattern rather than random noise.
- Levels are adjustable from 2 to 32 for anything from stark retro dithering to a subtle gradient smoothing effect.
Limitations
- The visible dot pattern can be distracting on images with large smooth gradients or fine detail.
- Alpha transparency is left untouched, so the dithering effect only shows on the visible color channels.
Examples
Best Practices & Notes
Best Practices
- Use low levels (2-6) for a bold retro look, or higher levels (16-32) to smooth banding while keeping a hint of texture.
- Preview on images with gradients (skies, skin tones) where the dithering effect is most visible.
Developer Notes
The lib function operates on a plain Uint8ClampedArray PixelBuffer with no DOM dependency: it looks up BAYER_MATRIX_4X4[y % 4][x % 4], normalizes it to a -0.5..0.5 range, scales it by the quantization step (255 / (levels - 1)), adds that offset to each RGB channel before rounding to the nearest step, and leaves the alpha channel untouched.
PNG Bayer Filter Adder Use Cases
- Giving a photo a retro 8-bit console look
- Previewing a low-color-palette version of an image before actual color reduction
- Creating textured pixel-art-style backgrounds
Common Mistakes
- Setting levels too low (2-3) on a photo with lots of detail, which can make it hard to recognize the original subject.
- Expecting the dithering to affect transparency — only RGB channels are quantized.
Tips
- Pair with the bit depth converter to see how ordered dithering compares to plain quantization at the same level count.
- Try levels = 2 for a stark black-and-white-per-channel poster effect.