How Image Compression Works Under the Hood (and Why Your Photos Can Shrink 80% Without Looking Worse)
Every photo you've ever uploaded was probably too big. A phone photo straight from the camera is often 3–5 MB. Try to attach it to an email, upload it to a form, or put it on a website, and you hit the same wall: "file
Every photo you've ever uploaded was probably too big.
A phone photo straight from the camera is often 3–5 MB. Try to attach it to an email, upload it to a form, or put it on a website, and you hit the same wall: "file too large." Then you run it through a compressor, and somehow the same photo comes out at 300 KB — and looks identical.
It feels like magic. It isn't. It's a series of clever trade-offs, and once you understand them, you'll never pick the wrong image format again.
Compression removes redundancy, not quality
Here's the key idea: most of the data in an image file isn't information your eyes need. It's redundancy.
A photo of a blue sky contains thousands of pixels that are almost the same shade of blue. Storing each one individually is wasteful. Compression works by finding those patterns and describing them more efficiently — "the next 2,000 pixels are basically this blue" instead of listing all 2,000.
Every image format is built on that insight — they just disagree about how much they're allowed to throw away.
Lossy vs. lossless: the one decision that matters
There are only two kinds of compression, and choosing between them is the whole game.
Lossy compression (JPEG, WebP, AVIF) permanently discards data your eyes are unlikely to miss. The file gets dramatically smaller, but you can't get the original back. This is the right choice for photographs.
Lossless compression (PNG) keeps every single pixel exactly as it was. The file gets smaller only by describing patterns more efficiently. This is the right choice for screenshots, logos, and anything with text or sharp lines.
A real example: a 4.2 MB JPEG photo from my phone, compressed at quality 80, became 380 KB — a 91% reduction — and side by side, I couldn't tell the two apart. But run a screenshot with small text through JPEG and the text turns fuzzy — JPEG's shortcuts are designed for smooth gradients, not hard edges. That same screenshot as a PNG stays razor-sharp.
How JPEG actually works under the hood
JPEG, from 1992, is still the most common photo format on the web, and its pipeline is a beautiful piece of engineering. In plain terms, it does three things:
1. It throws away color detail before brightness detail.
Your eyes notice brightness changes far more than color changes, so JPEG keeps brightness at full resolution and stores color at half. You've already lost half the color data — and never noticed.
2. It converts blocks of pixels into frequencies.
The image is split into 8×8 pixel blocks, and each block is run through a mathematical transform (the Discrete Cosine Transform, or DCT). Instead of "these 64 pixels are these colors," the block becomes "this block is mostly a smooth gradient, with a little bit of fine detail." Smooth gradients dominate real photos, so most of the fine-detail numbers are tiny.
3. It rounds the tiny numbers to zero.
This is the actual lossy step, called quantization. The small frequency values get rounded away, and the quality slider you see in every compressor controls how aggressively. Quality 90 keeps most of the detail; quality 60 throws away much more. What's left compresses extremely well because long runs of zeros are cheap to store.
That's the whole trick: keep what eyes notice, discard what they don't.
How PNG works: a completely different strategy
PNG never discards anything, so it has to be smarter about describing the data.
First, it filters each row of pixels: instead of storing each pixel's absolute value, it stores the difference from its neighbor. In a flat area of a screenshot, those differences are mostly zero.
Then it compresses the result with DEFLATE — the same algorithm behind ZIP files — which replaces repeated patterns with short references. A row of 500 identical white pixels becomes something like "white × 500."
This is why PNG is unbeatable for screenshots, diagrams, and logos, and terrible for photos: a photo has almost no repeating patterns, so DEFLATE has nothing to work with. A photo saved as PNG can easily be 5–10× larger than the same photo as JPEG.
Why WebP and AVIF beat JPEG
JPEG's 1992 design has limits, and the newer formats fix them:
- WebP (from Google) does everything JPEG does, but with a better prediction step and a more efficient entropy coder. The same photo at the same visual quality is typically 25–35% smaller than JPEG. It also supports transparency, which JPEG never did.
- AVIF goes further, borrowing the video compression from the AV1 codec. It can be 50% smaller than JPEG at the same quality, with better handling of fine detail.
The catch is compatibility — older tools and some platforms still don't accept them. That's why converting between formats is such a common task: you compress to WebP for your website, but you need a JPEG when a form only accepts JPG. If you ever need to switch, a free converter like the Image Format Converter handles JPEG, PNG, and WebP without installing anything, and HEIC to JPG covers the iPhone format that still trips people up.
Why all of this now runs in your browser
Here's the part most people don't realize: none of this needs a server anymore.
Modern browsers can decode an image, draw it to a <canvas>, and re-encode it at a lower quality — all in JavaScript, on your own device. The image never leaves your computer. That's why tools like the free Image Compressor can shrink your photos with zero upload: the heavy lifting is done by your browser's built-in image codecs, the same ones that render every photo on the web.
The upside is real: no upload waits, no sending personal photos to a stranger's server, and it works offline once the page has loaded.
A simple decision guide
So, next time you're staring at a file that's too big, here's the cheat sheet:
- Photograph for a website or email? JPEG or WebP, quality 75–85. That range is the sweet spot — below it, artifacts appear; above it, you're paying megabytes for invisible detail.
- Screenshot, logo, or anything with text? PNG, always. JPEG will blur the edges.
- Need transparency? PNG or WebP. JPEG doesn't support it at all.
- Photo is also the wrong dimensions? Resize first, then compress. A 4000-pixel-wide photo displayed at 800 pixels is carrying 25× more pixels than anyone will ever see — resizing it before compressing usually saves more than compression alone.
- Sending to someone whose app might reject WebP? Stick with JPEG. Compatibility beats a 30% saving when the file won't open at all.
The takeaway
Image compression isn't about making files worse. It's about removing the data nobody can perceive — the redundant color detail, the high-frequency noise, the pixels beyond the display size — and keeping the parts that actually reach your eyes.
Understand that, and the format choices stop being guesswork. And if you want to see the numbers for yourself, take any photo from your phone, run it through an image compressor, and compare the before and after. A 90% smaller file that looks the same is the most satisfying magic trick in computing — except now you know how it's done.
Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.