Interactive codec lab

Image Compression Microscope

Sourcegenerated test image320 × 224 pixels
01 Pixels with hidden bits
02 Decoded JPEG
03 Error × 10
Encoded file…Encoding
Mean channel error…0 means identical samples
PSNR…numeric fidelity, not perception
Hidden bits intact…768 measured LSBs
Hidden data survival

The picture can survive while the payload dies

Each square is one least-significant bit written before compression and read from the same channel after decoding. A crossed square changed.

Mechanism view · declared model

8 × 8 transform blocks → quantization → entropy coding

The block view reproduces the transform and a conventional luminance table. It does not expose this browser encoder's private tables or chroma decisions.

8 × 8 luma samples

93939393949494949394949494949595949494949595959594959595959596969595959596969696959596969696979796969696979797989697979797989898

Transform coefficients

-261-4000000-9000000000000000-1000000000000000-100000000001000000010-100

After quantization

-29-1000000-10000000000000000000000000000000000000000000000000000000

61/64 coefficients became zero at quality 72.

What this proves: the browser encoded and decoded the selected image, and the metrics come from those returned pixels.

What it does not prove: the mechanism panel is not a dump of the browser codec's internal decisions.

How to use Image Compression Microscope

  1. Choose a codec

    Switch between JPEG, PNG, and WebP. JPEG and WebP expose the quality target accepted by the browser API.

  2. Run the real round trip

    The browser writes payload bits, encodes the pixels, decodes the returned file, and measures the reconstructed samples.

  3. Inspect the failure

    Use the error map and hidden-bit grid to separate visual similarity from exact data survival.

  4. Open the mechanism model

    Trace one 8 × 8 JPEG block, compare PNG predictors, or distinguish WebP's lossy and lossless codec families.

Formats, compatibility, and limits

Inputs

  • The generated test image or one local PNG, JPEG, or WebP file.
  • A requested JPEG or WebP quality value from 15 to 98.

Outputs

  • A decoded image produced by the browser codec.
  • File size and pixel-error measurements.
  • A measured hidden-bit survival map.
  • A declared educational model of the selected codec mechanism.

Compatibility

  • PNG and JPEG canvas encoding are widely available in current browsers.
  • WebP encoding can be unavailable or can choose a browser-specific mode; the tool reports the returned container instead of assuming it.
  • Uploaded images are scaled to at most 640 pixels on the longest side for responsive local analysis.

Known limits

  • Canvas exposes a quality target, not the encoder's quantization tables, chroma-subsampling decision, search strategy, or entropy model.
  • The JPEG and PNG mechanism panels are calculated explanatory models, not internal telemetry from the returned file.
  • Peak signal-to-noise ratio measures numeric error and is not a complete perceptual-quality metric.
  • The hidden-bit experiment tests sequential spatial RGB least-significant bits; it does not represent every steganographic or watermarking method.

Privacy and processing

  • The selected image, encoding, decoding, and measurement remain in the current browser tab.
  • The tool does not upload images or retain the generated compressed file.

Why visual similarity and data integrity are different measurements

Before encoding, the tool writes 768 deterministic bits into the least-significant bits of red, green, and blue samples. It sends the resulting pixel array through the browser's canvas encoder, decodes the returned image, and compares the two arrays channel by channel. PNG normally returns the same values, while lossy JPEG or WebP can change many samples even when the image looks stable. The mechanism panels are kept separate: JPEG applies a two-dimensional discrete cosine transform to an 8 × 8 luminance block and divides coefficients by a quality-scaled quantization table; PNG computes the five standard reversible row-filter residuals; WebP is identified as a container for either lossy VP8 intra coding or its separate VP8L lossless format.

Questions about Image Compression Microscope

Does the tool use the real image codecs?

Yes for the encode-and-decode result. The browser produces the file and decodes it again. The mechanism panels are declared models because the browser does not expose its internal encoder decisions.

Why can a JPEG look unchanged while hidden data is damaged?

Human vision tolerates many small color errors. A payload stored in exact bit positions does not: one changed least-significant bit changes the recovered message.

Is PNG always smaller than the original pixels?

No. PNG is lossless, but its filters and DEFLATE stage only reduce size when the pixel data contain exploitable structure. Small or noisy images can gain little after container overhead.

Is WebP one compression algorithm?

No. WebP can carry a lossy VP8 intra-frame stream or a separate lossless VP8L stream with reversible transforms, LZ77 references, a color cache, and prefix codes.