Dither Effect

Workflow & Usage

1. Add your images Drag & drop, paste, or click to select JPEG, PNG, or WebP files. You can dither one image or batch-process many at once.

2. Choose a palette Pick a preset for quick results (Black & White, Grayscale, Game Boy, CGA, ANSI, EGA, PICO-8, C64, DB16, and more). Or switch to Custom and build your own palette.

3. Edit palette colors (optional) Use the color pickers to tweak shades. Add new colors, remove extras, and keep the palette tight. Use Normalize hex if you’ve pasted colors in mixed formats.

4. Pick an algorithm

• Floyd–Steinberg (classic) — detailed, traditional dithering
• Atkinson (chunkier) — softer blocks, more “retro screen” feel

5. Adjust strength Strength blends the original image into the dithered result. Lower strength keeps more of the original; higher strength commits to the palette.

6. Preview instantly Each image card renders a crisp dither preview. (Serpentine scanning is enabled by default, which helps reduce directional artifacts.)

7. Export

• Download one image at a time
• Or export everything you’ve included as a ZIP Output files use clear names like: photo-dithered.jpg

Everything runs fully on-device and offline-friendly.

---

Use Cases

• Retro social posts Turn modern photos into Game Boy, CGA, or terminal-style graphics.

• Pixel-art references Reduce images into a controlled palette for stylized redraws and studies.

• Game assets & mockups Preview how a scene reads with a limited palette like DB16 or PICO-8.

• Brand palette experiments Try a custom palette that matches your site colors to create consistent visuals.

• Print-style textures Black & white or small sepia palettes can mimic old print/dot looks (without halftone screens).

---

Tips for Best Results

• Start with fewer colors. 2–6 colors creates a stronger “dither” look. More colors looks smoother, but less stylized.

• Use Atkinson for faces, Floyd for detail. Atkinson tends to feel softer and less noisy. Floyd preserves more fine texture.

• Lower strength for subtle texture. If 100% feels too harsh, try 40–70% to keep the photo readable.

• Normalize your palette before export. If you’ve been typing/pasting colors, “Normalize hex” ensures the export palette is valid.

• Optimize after export. For web-ready file sizes, run results through Image Compressor or convert photos to Progressive JPEG.

---

How It Works

• Palette-based quantization Each pixel is mapped to the nearest color in your chosen palette.

• Error diffusion (dithering) The difference (“error”) between the original pixel and the palette color is distributed to nearby pixels. This keeps gradients readable even with very few colors.

• Serpentine scanning (by default) Rows are processed left-to-right, then right-to-left on the next row. This reduces visible streaks and directional artifacts that can show up in classic dithers.

• Alpha-aware pixels Transparent pixels are preserved (pixels with alpha = 0 are skipped so they don’t smear error into visible areas).

• Canvas-based processing Images are decoded and rendered using the Canvas API.

• EXIF-aware loading Images are decoded with createImageBitmap({ imageOrientation: 'from-image' }) so camera photos keep the correct orientation.

• Preview vs export Previews use a downscaled render for speed, then exports re-run the same algorithm at full resolution before packaging into a ZIP.