Drag a 4 MB photo into a compressor, and a few seconds later you get a 400 KB file that looks… the same. Nine-tenths of the data is gone and your eye can't find the hole. That should bother you more than it does. Where did 90% of the photo go?
The answer is one of the most elegant engineering stories in everyday software — JPEG, designed in 1992 and still compressing most of the internet's images. It works because it knows three things about you: what your eye measures sharply, what it measures poorly, and what it ignores completely. Compression isn't about shrinking data; it's about knowing which data was never really seen.
Our Compress Images tool runs this machinery in your browser. Let's open it up — three tricks, climbed step by step.
Trick 1 — Your eye is sharp on brightness, blurry on color
Hold a red pen and a blue pen at arm's length, tips touching. You can see the exact pixel-sharp boundary between light and shadow on each pen — but the boundary between the two colors is mushier to you than you think. Human retinas carry ~120 million brightness sensors and only ~6 million color sensors. You live in a world of crisp luminance and approximate color, and you've never noticed.
JPEG's first move exploits this ruthlessly. It converts every pixel from "red, green, blue" into "brightness + two color channels," then stores the color channels at half the resolution in each direction — one color sample per 2×2 block of pixels. That's called chroma subsampling, and it deletes half of all the data before any real compression begins.
Look at the recombined panel in the figure. The color layer was stored at a quarter of the size — and you cannot tell. The first 50% of the "missing" photo was never visible to you in the first place.
Trick 2 — Every 8×8 block is a recipe of waves
Now the clever part. JPEG chops the brightness layer into little 8×8 pixel blocks — 64 numbers each — and asks a strange question about every block: instead of storing your 64 pixel values, what if I stored your recipe?
Here's the idea in one dimension first. Any curve — say, the brightness along one row of pixels — can be built by adding up waves: one broad smooth wave for the overall trend, plus smaller, faster ripples for the fine texture. This is the famous idea of Fourier, from 1822: complicated signals are sums of simple waves.
In two dimensions, the waves become 64 standard patterns — from "completely flat" in the top-left corner, through broad soft gradients, down to a microscopic checkerboard in the bottom-right. This is the Discrete Cosine Transform (DCT), and the 64 patterns are its alphabet:
The DCT rewrites each block as a recipe: "a lot of pattern 1, a pinch of pattern 2, zero of pattern 59…" Crucially, nothing is lost yet — 64 pixel numbers became 64 recipe numbers, and the block can be rebuilt perfectly.
So why bother? Because photographs are overwhelmingly smooth. Sky, skin, walls, blur — across an 8×8 block (that's a speck a couple of millimeters wide on your screen), brightness barely changes. So in block after block, the recipe says: big amounts of the smooth top-left patterns, and amounts of the busy patterns that are nearly zero. The DCT doesn't delete anything — it sorts the information by how much your eye cares, smooth and visible at one end, microscopic and invisible at the other. It sets up the kill.
Trick 3 — The quality slider is a rounding dial
Now the deletion — and the real meaning of that "quality" slider you've dragged a hundred times.
Take each recipe amount and divide it by a step size, then round to the nearest whole number. High quality = small steps: dividing 42 by 4 and rounding gives 11 — most of the information survives. Low quality = big steps: dividing 42 by 24 gives 2, and dividing that near-zero fine-texture amount by 24 gives… 0. And 0 is the magic word, because a long run of zeros costs almost nothing to store.
That's the entire quality dial: how coarsely are the wave amounts rounded. Quality 90 rounds gently and keeps fine texture. Quality 45 rounds harder — in the figure the picture still looks fine, at a third of the bytes. Quality 8 rounds so brutally that only each block's average survives, and suddenly you can see the 8×8 blocks themselves — the famous JPEG blockiness is literally the grid of the algorithm showing through.
After rounding, the surviving numbers are read out in a zigzag (so the zeros bunch together at the end) and squeezed with classic lossless tricks — run-length counting and Huffman coding, the "say it shorter if it's common" family. But the hard decisions are already made. The file is small because the rounding dial decided which waves you'd never miss.
So where did the 90% go?
Half was color detail your retina never had sensors for. Most of the rest was fine-texture wave amounts that were already near zero and got rounded to exactly zero. What's left — the broad shapes, the edges, the brightness your eye actually measures — survives nearly untouched. The photo didn't lose 90% of what you see. It lost 90% of what you were never seeing.
One practical note from our own tool: compression this good is also why re-compressing a JPEG over and over degrades it — each pass re-rounds the recipes, and the rounding errors stack. Compress from the best original you have, once, at the quality you need.
Try the dial yourself and watch the bytes fall as you drag: jigsawlabs.tools/tools/image-shrink — free, no signup, and like every JigsawLabs tool it runs entirely in your browser, so your photos never leave your device.
Originally published on the JigsawLabs Blog. This is the fourth post in a series on the engineering inside JigsawLabs tools: the 55 KB brain that formats documents, how an AI cuts you out of a photo, and how OCR reads photos.
Top comments (0)