Lossless vs lossy
Lossless compression rebuilds the exact original bit-for-bit. PNG and WebP-lossless work this way; they just store the same image more efficiently.
Lossy compression throws away data that the human eye is bad at perceiving. JPEG is the classic example — it drops high-frequency detail that we don't notice. The result is dramatically smaller files.
The key insight behind lossless compression is that real images contain massive redundancy. The pixel at (100, 100) is almost certainly similar in color to the pixel at (100, 101). A compressed file stores the difference rather than the absolute value, and most differences turn out to be small numbers that pack into few bits. That's the same principle behind gzip, video codecs, and audio codecs like FLAC.
Lossy compression goes further: it throws away the differences that don't matter. The human eye is much better at seeing brightness than color, and much better at seeing smooth gradients than high-frequency noise. Lossy codecs exploit those gaps in human perception. Whether you call this 'destroying data' or 'cleverly using human limits' depends on your perspective.
Why JPEG is so good for photos
Photos have lots of high-frequency noise (texture, grain) that's expensive to store and that we don't consciously perceive. JPEG identifies it and dumps it. PNG can't dump anything, so PNG photos are huge.
Quantitatively: a 12 MP photo as PNG runs 8-15 MB. The same photo as JPEG at quality 80 runs 1-2 MB. That's an 8x reduction with no visible difference at normal viewing distance. PNG isn't doing worse compression — it's holding to a stricter contract (every pixel exact). The photo just doesn't need that contract.
JPEG's worst case is sharp edges and text, exactly the cases where PNG shines. The frequency-domain transform that lets JPEG discard noise also smears edges into ringing artifacts. That's why JPEG-compressed screenshots of text look fuzzy — the encoder is treating crisp character edges as high-frequency content and partially discarding them.
Why PNG is so good for screenshots
Screenshots have lots of flat color regions (UI panels, text backgrounds). PNG compresses runs of identical pixels into tiny encoded entries. JPEG would smear those flat regions with its frequency tricks; PNG keeps them crisp.
PNG uses DEFLATE — the same compression algorithm as ZIP files. Before deflating, PNG runs a per-row prediction filter that exploits the typical patterns in image data (horizontal runs, vertical edges, smooth gradients). The filtered output compresses much better than raw pixel data because most of the prediction residuals are small numbers near zero.
For a screenshot of a code editor, PNG often compresses to under 5% of the raw pixel size. The same screenshot as JPEG at quality 90 might be larger and have visible artifacts around the text. The rule of thumb: if your image has flat regions and sharp edges, use PNG. If it has smooth gradients and natural variation, use JPEG.
Where WebP fits in
WebP has both modes. Lossy WebP beats JPEG by 20-30% at the same visual quality. Lossless WebP beats PNG by 20-30% on most images. It's the modern default.
Lossy WebP comes from Google's VP8 video codec. It uses better prediction (predicting blocks from neighboring blocks before computing the residual) and arithmetic coding instead of JPEG's Huffman coding. Both improvements push more entropy out of the file.
Lossless WebP uses a custom format with multiple transform predictors and a color cache. It outperforms PNG on screenshots and graphics by 20-30% in typical tests. The trade-off is encode time: lossless WebP takes longer to encode than PNG, which matters for server-side image pipelines processing thousands of uploads.
AVIF, JPEG XL, and what's coming next
AVIF is the still-image profile of the AV1 video codec. It pushes another 20-30% off WebP for the same visual quality, using more sophisticated block partitioning and prediction. The cost is encode time — AVIF can be 5-20x slower to encode than WebP. For static sites where images are pre-encoded once, that cost is irrelevant. For user-upload pipelines, it can be prohibitive.
JPEG XL was designed as a long-term successor to JPEG. It can losslessly convert existing JPEGs to a smaller format (saving 15-25% with zero quality change), supports progressive decoding, and handles both lossy and lossless in one file format. Browser support has been politically slow but is improving.
For the next few years, WebP is the safe default. AVIF is the right choice for high-traffic pages where encode time is amortised across millions of views. JPEG XL is worth watching but isn't yet universally supported. JPEG and PNG remain universal fallbacks and will be readable in browsers forever.
What compression can't do
Compression can't recover information that isn't in the source. A blurry photo doesn't become sharper because it's encoded as AVIF. A noisy phone shot doesn't lose its noise during compression — it might lose the high-frequency parts of the noise, but the underlying signal-to-noise ratio doesn't change.
Compression can't fix poor capture. If the photo is underexposed or out of focus, no amount of clever encoding rescues it. Compression decides which bits to keep; it can't generate new ones.
Compression can't reduce visible bandwidth costs without affecting quality somewhere. The fundamental trade-off is: smaller file, more aggressive discarding, more risk of visible artifacts. There's no free lunch — each format chooses different trade-offs but they all sit on the same curve.
Re-encoding doesn't help. Saving a quality-80 JPEG as a quality-80 JPEG again doesn't make the file smaller; it just adds another round of loss. To shrink a file further, you need to either drop quality or change format.
Frequently asked questions
Does compression reduce image quality?
Lossy compression reduces it slightly; well-tuned settings make the loss invisible. Lossless compression doesn't reduce quality at all.
Why does my compressed file look the same?
Because the compressor threw away only what your eyes are bad at seeing. That's the whole game.
Is it safe to share compressed photos?
Yes. Compression is universal and standard. Every viewer decodes it transparently.
Why does my PNG screenshot get bigger when I save it as JPG?
That's not what usually happens — JPG screenshots are usually smaller. If yours got bigger, the JPG encoder probably defaulted to quality 95 or 100 with no chroma subsampling, which can produce files larger than the well-compressed PNG source.
How small can I push an image?
Without visible artifacts, a typical photo can shrink to about 0.2-0.3 bytes per pixel as JPEG or 0.15-0.25 bytes per pixel as WebP. Below that, you'll start seeing the loss.
Do I need to understand compression to use it?
No. Modern tools default to good settings. Understanding compression helps you debug edge cases — why a screenshot got fuzzy, why a photo got huge as PNG, why upgrading to WebP saved bandwidth.