PNG — lossless prediction + DEFLATE
PNG never discards a pixel. Each scanline is first run through a prediction filter (Sub, Up, Average, Paeth) that stores the difference from neighboring pixels, then the residuals are squeezed with DEFLATE (LZ77 + Huffman). Brilliant for flat colors, UI, logos and screenshots — terrible for photos, where noise leaves nothing repeatable to compress. Our 12 MP photo: ~21 MB as PNG vs 36 MB raw.
JPEG — the 8×8 DCT workhorse (1992)
JPEG converts RGB to YCbCr, usually throws away half the color detail (4:2:0 chroma subsampling — your eye resolves brightness far better than hue), slices the image into 8×8 blocks, and applies the Discrete Cosine Transform to turn each block into 64 frequency coefficients. Quantization divides high-frequency coefficients by big numbers and rounds — that rounding IS the loss. Low quality = bigger divisors = blocky artifacts at block borders.
WebP — video tech for still images (2010)
Lossy WebP is a single intra-coded frame of the VP8 video codec. Its trick is spatial prediction: each 4×4 or 16×16 block is first predicted from already-decoded neighbors, and only the prediction error is transformed and coded — plus arithmetic (boolean) coding beats JPEG's Huffman. Typically 25–34% smaller than JPEG at equal quality; also does lossless (~26% under PNG) and alpha.
AVIF — AV1 intra frames (2019)
AVIF wraps an AV1 keyframe in a HEIF container. It extends the same predict-transform-code idea much further: block sizes from 4×4 up to 64×64, 56 directional prediction modes, chroma-from-luma, and a modern entropy coder. Result: roughly 50% smaller than JPEG at similar visual quality, with 10/12-bit and HDR support. Cost: slow encoding and heavier decode than JPEG.
WHICH FORMAT WHEN?
| Use case | Pick | Why |
|---|---|---|
| Photos on the modern web | AVIF (WebP fallback) | Smallest at equal quality; ~95% browser support via <picture> |
| Screenshots, logos, UI, pixel art | PNG (or lossless WebP) | Sharp edges must survive exactly; lossy codecs smear text |
| Maximum compatibility (email, old apps) | JPEG q80–85 | Decodes literally everywhere since 1992 |
| Transparency + photo content | WebP / AVIF | Alpha channel with lossy compression — PNG can't compress photos, JPEG can't do alpha |
| Archival / editing master | PNG / TIFF / RAW | Never re-save lossy: each JPEG re-encode adds generation loss |