~~~ Makes images safe to display on the web using advanced quantization and dithering methods. ~~~
NEW: Added True, Blue, and Parker Noise dither modes!
Number of unique colors: 0
Process time: 0ms
File Size: 0KB
~~~ About ~~~ • All data is stored and processed locally in your browser. • You can even save this page and run it offline! • Hover over each control for more info. • Last updated: March 1, 2026 • ~~~ Instructions and Theory ~~~ 1. Select a color pallet. "Web-safe (216)" is defined by six equally spaced shades of the red, green, and blue channels that are intended to display accurately and constantly across all 256 color display modes. Web-safest (22), Grayscale (6), and B/W (2) are subsets of this pallet. Other non-web-safe color pallets can be selected to mimic different display modes of early operating systems. A custom pallet can also be defined; the text box for which will sanitize any arbitrary string with HTML color codes in it (the default example emulates the GameBoy pallet). 2. Select a dithering mode. Pick either an Error Diffusion-based (Floyd-Steinberg, Atkinson, Sierra, etc), Bayer Pattern-based, or a Noise-based dithering mode. References for the dithering methods are linked below. 3. Select a color baking mode, also known as quantization mode. This defines how the colors in your input image get quantized to the nearest available colors in 3D space. Metric Distance modes (Chebyshev, Manhattan, Minkowski, Euclidean) find the closest available color in 3D space. CIELAB modes are based on human perception of colors and will increase processing time. Functions are derived from projects by THEjoezack and antimatter15 on GitHub. "Special" quantization modes produce unique "deep fried" results. 4. Browse/Upload a source image. The image is processed locally in your browser and not sent through the internet. Processing will begin immediately. Extra settings: Adjusting Entropy modifies the contrast and apparent noise in the image. Max Size will affect output size and processing time. Zoom level (in your browser) should be an integer value (100%, 200%, etc.) for best results to avoid aliasing patterns; a read-out in the top right shows browser's current zoom level. Gallery and Batch Processing: Adding an image to the gallery stores the image in your browser. You can download it later by clicking on the file name. Dragging multiple files to the file Browse/Upload box automatically fills the gallery. You can then download the entire gallery as a zip folder (uses external script: JSZip). ~~~ Helpful links ~~~ https://tannerhelland.com/2012/12/28/dithering-eleven-algorithms-source-code.html http://caca.zoy.org/study/index.html https://en.wikipedia.org/wiki/Web_colors#Web-safe_colors https://www.youtube.com/watch?v=kT4p1GXq4HY