🧪 Bit Depth Lab

Visualize quantization & dithering in real-time

🖼️ Drag & drop 🔍 Hover to inspect ✨ Real-time

Step 1 — Pick or load an image

Use sample images or upload your own. Processing runs locally in your browser.

Sample Images

Upload image

Channel Mode

Grayscale Color (per-channel)

Transfer (Gamma)

sRGB (display) Linear light

Bit Depth 8-bit

Quantizer

Mid‑tread Mid‑rise

Dithering

None Ordered 4×4 Ordered 8×8 Floyd–Steinberg JJN

Effect Strength 100%

Inspector Zoom 8×

💡 Quick Tips

Lower bits increase quantization error; try 2–4 bits with dithering
Switch sRGB/Linear to see how gamma affects perceived banding
Hover the image to inspect exact pixel values and calculations
Floyd-Steinberg and JJN are error diffusion algorithms

Step 2 — Visualize & Compare

Side‑by‑side original and quantized outputs. Blend with Mix for A/B comparisons.

Input

Output

Inspector

Range: 0…255 Mode: Grayscale Bits: 8 Levels: 256 PSNR: ∞ dB

Hover the image to see pixel math:
1) Read pixel (sRGB)
2) Convert to {linear or sRGB}
3) Quantize to N levels (based on bits & quantizer)
4) Dither adjustment (if any)
5) Convert back to sRGB → display value

Histogram (quantized levels)

Play with quantization! Try 1–2 bits with and without dithering on the gradient. Toggle sRGB/Linear to understand why gamma matters. All processing runs client‑side using the Canvas API.