JPEG Compression Demo (pure JavaScript)

Shows the core JPEG steps: RGB → YCbCr → (optional 4:2:0) → 8×8 DCT → Quantization → Zig‑zag + RLE → Dequantize → IDCT → Reconstruct. Size is an estimate (no Huffman stage).

Controls

Estimated size
–
Compression ratio
–
PSNR (dB)
–
Non‑zero AC coeffs
–
What this demo approximates
  • Accurate: color transform, 8×8 DCT, standard quantization tables scaled by quality, zig‑zag, run‑length coding, dequantize & IDCT.
  • Approximate: entropy coding. We estimate size using RLE token counts instead of full Huffman coding.
Y: luminanceCb/Cr: chroma4:2:0: chroma downsampled by 2× in both axes

Preview

Original
Reconstructed (after JPEG‑like pipeline)
Y plane
Cb plane (after subsampling)
Cr plane (after subsampling)
Quantization table (luma)
RLE statistics
DC deltas
–
AC runs
–
Zig‑zag preview (first block)
–
No external libraries. Pure JS, educational purposes.