Smaller file. Something had to go.

1. Tiles (blocks). The picture is 192 × 192 grey pixels, cut into 8 × 8 tiles. The lab’s model handles 64 × 64 pixels at a time, so the picture is processed as 3 × 3 pieces of 64 × 64 by the same model and stitched back together.

2. Patterns (DCT). Each tile is rewritten as 64 amounts, one per cosine pattern. This step loses nothing: the patterns can rebuild the tile exactly. The first amount is the tile’s average brightness; the rest describe detail from coarse to fine.

3. Rounding (quantisation). Each amount is divided by a step and rounded: level = round(amount ÷ step), with step = q × (1 + 0.15 × (across + down)) and q = max(1, round((101 − quality) × 0.8)). Fine patterns get bigger steps, so they are the first to round to zero. This is the only lossy step.

4. Rebuild (inverse DCT). Each level is multiplied back by its step and the patterns are added up.

File size. Levels are stored coarse-first in zig-zag order, so zeros bunch up at the end and one short “stop” code (end-of-block) covers them. We count the bits a baseline JPEG encoder would write for these exact levels with the standard brightness Huffman tables (ITU-T T.81, Annex K): headers excluded. KB here means 1,000 bytes; the original is 192 × 192 = 36,864 bytes.

How it looks. Based on PSNR (10 · log₁₀(255² ÷ mean squared error)): 38 dB or more “looks the same”, 32–38 “small flaws”, 27–32 “visibly worse”, below 27 “badly damaged”. These are common rules of thumb, not a vision test.

• Grey only. Real JPEGs also store colour, usually at half resolution, which saves more and adds its own smearing around coloured edges.
• The rounding steps come from this lab’s simple formula, not the standard JPEG table, so “quality 70” here is not the same as quality 70 in Photoshop or your phone.
• The size counts the stored pattern data only. Real files add a few hundred bytes of headers. Each 64 × 64 piece restarts its brightness prediction, which costs a few extra bits.
• Your photo is cropped to a centred square and shrunk to 192 × 192 grey in your browser. It is never uploaded anywhere.
• The “How it looks” label is a number-based guess. Blocking in a smooth sky can look worse than a bigger error hidden in grass.
• The 3D heights use a square-root scale so that small amounts are visible. Use the Numbers view for exact values.

• JPEG overview (Joint Photographic Experts Group)
• ITU-T T.81: the JPEG specification: DCT (A.3.3), zig-zag order (Figure 5), Huffman tables K.3 and K.5 used for the size.
• G. K. Wallace, “The JPEG still picture compression standard”, Communications of the ACM, 1991.

Model notes: RESEARCH.md. Related labs: Color & Vision Lab and Inside a Camera.