Shrinking a photo from 8 MB to 200 KB without anyone noticing isn't magic: it's applied math with precise knowledge of your visual system. JPEG, PNG and WebP attack the problem from different fronts — one discards what your eye ignores, the other finds literal repetition. Understanding both mechanisms lets you choose format and quality with criteria instead of moving sliders blind.
The core idea: information is redundant
An uncompressed image stores 3 bytes per pixel (RGB). A 12-megapixel photo: 36 MB. But neighboring pixels resemble each other enormously — sky next to sky, skin next to skin. All image compression exploits that redundancy two complementary ways:
- Spatial redundancy: correlated adjacent pixels.
- Psychovisual redundancy: details that exist but your sight barely perceives.
Lossless formats (PNG) exploit only the first: bit-for-bit identical reconstruction. Lossy formats (JPEG, WebP) use both: sacrificing imperceptible information for brutal ratios.
JPEG step by step: where data dies
The JPEG pipeline has five stages and losses occur in exactly two:
1. Color space conversion: RGB → YCbCr. Y is luminance (brightness), Cb/Cr are chrominance (color). Human vision resolves brightness far better than color — the next step exploits exactly that.
2. Chroma subsampling (loss #1): since color matters less, it's stored at half or quarter resolution (4:2:0 = one color value per 4 brightness pixels). Real, irreversible loss — but almost always invisible because your retina doesn't resolve that much color either.
3. DCT transform (lossless): the image is cut into 8×8 blocks and each block transforms from spatial to frequency domain: instead of "this pixel is X", it describes "waves" — how slowly the block changes (low frequency) and how sharply (high frequency). A smooth block concentrates energy in few low frequencies; fine detail spreads energy across highs.
4. Quantization (loss #2, THE important one): high frequencies get divided by larger values and rounded — many become zero and vanish. JPEG's quality factor (the "quality 80" slider) directly scales these division tables: high quality = small divisors = more detail survives; low quality = everything flattens. JPEG's characteristic artifacts (visible 8px blocks, ringing around sharp edges) are precisely this stage's fingerprint.
5. Entropy coding (lossless): the resulting coefficients, mostly zeros, compress with RLE + Huffman/arithmetic coding. No loss here, just efficient packing.
Practical conclusion: JPEG quality lives in the balance between subsampling and quantization. Re-saving a JPEG repeatedly re-quantizes already-quantized data — every generation adds artifacts, like chained MP3s.
PNG: prediction and dictionary, zero losses
PNG cannot discard anything, so it plays a different game: transform data to be more compressible without changing it.
Row filtering: before compression, each byte is replaced by its difference from the previous pixel (or the upper one, or their average — the encoder picks the optimal filter per line). Flat sky goes from 128,128,129,128... to 128,0,1,0... — tiny numbers, easy to compress.
DEFLATE: over that predicted data acts the LZ77 + Huffman combo you know from ZIP and gzip: repeated sequences become backward references, frequent symbols get short codes.
Result: PNG shines on screenshots, logos, flat-area graphics and text (huge literal redundancy); performs poorly on photographs where every pixel differs from its neighbor and prediction adds little. That's why a photo in PNG weighs several times its decent-quality JPEG equivalent.
WebP and AVIF: the modern generation
WebP (Google, 2010) replaces block DCT with VP8-style intra prediction: each block predicts from already-coded neighbors and only the residual gets coded. Adds lossy alpha, animation, and typically beats JPEG by 25-35% at equal visual quality.
AVIF (based on AV1) goes further: far more sophisticated prediction, variable-size transforms (goodbye 8px blocks), optimized rate-distortion tools. It compresses ~50% better than JPEG and noticeably better than WebP on photos, though encoding costs much more CPU. Both are what any modern web should serve today, with JPEG as fallback.
The rule crossing all of them: the fair comparison is visual quality per byte, never declared numeric quality — a WebP 75 can look better than a JPEG 90.
Practical compression: what each slider really controls
Using any compression tool, here's what you actually touch:
- Quality (lossy): quantization table scaling. Dropping 95→85 is usually invisible; 70→50 starts showing in textures.
- Target format: the biggest jump of all — JPEG→WebP/AVIF saves more than any fine-tuning within JPEG.
- Resizing: halving dimensions removes 75% of pixels. The most brutal optimization remains not sending pixels nobody sees.
- Metadata: EXIF, thumbnails and duplicated ICC profiles can weigh megabytes on camera photos; stripping them is free.
Our image compressor applies all these levers locally in your browser, and if you need to serve different sizes per device, combine with the variants explained in srcset and sizes.
FAQ
Does converting PNG to JPEG lose quality? Yes, quantization kicks in — but for photographs loss is invisible at quality ≥85 and savings usually exceed 70%. For graphics needing transparency or crisp text, stay with PNG/WebP lossless.
What does 4:2:0, 4:2:2 mean? Chroma subsampling ratios. 4:4:4 = full-resolution color (for screenshots with red text, say); 4:2:0 = quarter-resolution color (photo/video standard, invisible in natural content).
Can lost JPEG quality be recovered? No. Information quantized away no longer exists. Artifacts can only be masked (deblocking), never reverted to original.
Compress your images tuning all these parameters with our online compressor, free without uploading anything to any server.