DEV Community

Cover image for Image Dithering made fast and free
Kosa Matyas
Kosa Matyas

Posted on

Image Dithering made fast and free

Turbo Dither: High-Performance Browser-Based Image Dithering with Retro Flair

-> turbodither.com

In the world of digital imaging, dithering remains a timeless technique for simulating colors and gradients in limited palettes.
Turbo Dither is a cutting-edge tool that brings professional-grade dithering to your browser. Built with Next.js 15 and React 19, this free application transforms ordinary images into retro masterpieces using authentic algorithms and color schemes from computing history; all without servers, accounts, or compromises on privacy.

Demo screenshot

Core Features That Set It Apart

Turbo Dither prioritizes speed, usability, and authenticity. Key highlights include:

  • Blazing-Fast (even though it's not in Rust) Processing: Leveraging Web Workers, image transformations occur in a background thread, ensuring a buttery-smooth UI even on mobile devices.
  • Diverse Dithering Algorithms:
    • Floyd-Steinberg: Error diffusion for natural details.
    • Atkinson: Macintosh-inspired brightness and contrast.
    • Ordered (Bayer): Pattern-based for classic crosshatch effects.
    • Jarvis-Judice-Ninke: Wide-area diffusion for ultra-smooth gradients.
  • 14 Retro Palettes: From CGA's 4 colors to NES's 64, including Game Boy, Commodore 64, Pico-8, and grayscale variants.
  • Fine-Tuned Controls: Adjust brightness, contrast, saturation, diffusion factor (0.0–2.0), and dither scale for pixel-perfect results.
  • Privacy and Freedom: 100% client-side—no uploads, account creation, or watermarks.
  • Interactive Tools: Real-time side-by-side comparisons, progress indicators, and PNG exports with custom names.

Control panel

Technical Stack and Architecture

Powered by:

  • Next.js 15.
  • React 19 (with useReducer for state, useTransition for concurrency).
  • TypeScript 5.
  • Bun 1.3.1.
  • Web Workers & Canvas API (core processing).
  • CSS Modules.

Performance and Optimizations

Optimizations include typed arrays, progress streaming, and React 19 concurrency. All in-browser; no latency from servers.

  • Small images (<500KB): 4–20ms.
  • Medium (500KB–2MB): 20–100ms.
  • Large (>2MB): 100–500ms.

Performance demo:

1920x1080, 10.3MB image compressed to 1920x1080, 498KB in 211ms.
Perforance demo

Dithered images

Roadmap Ahead

Future enhancements:

  • More algorithms (Sierra, Burkes).
  • Additional palettes (Amstrad, MSX2).
  • Batch processing, custom palettes, multi-format exports.
  • PWA offline support, drag-and-drop.

Final Thoughts

Check the live demo at turbodither.com and leave comment or DM me on X/Twitter (@kosa12) for your thought and reviews about Turbo Dither❤️

Top comments (0)