Image Compression: Lossy vs Lossless Explained

Lossless compression — PNG, WebP-lossless, lossless AVIF — reduces file size by encoding the bitstream more efficiently without altering pixel values. Decompressing returns the byte-exact original. The achievable ratio depends entirely on how predictable the image is; photographs full of fine detail compress poorly (1.5-3x), while screenshots with large flat areas compress excellently (5-10x). PNG specifically applies one of five row filters before DEFLATE to maximize predictability.

Lossy compression — JPEG, WebP-lossy, AVIF, HEIC — discards information that the human visual system is least sensitive to. JPEG's quantization step zeros out high-frequency DCT coefficients; the eye is far more sensitive to low-frequency luminance variation than to high-frequency chrominance, which is why JPEG can drop most of the chroma channel detail without visible damage. At quality 80-85, typical photographs compress to 5-10% of an uncompressed bitmap with no perceptible artifacts.

JPEG's quality slider does not map linearly to perceived quality. Above quality 90, you are mostly preserving high-frequency noise that the eye cannot resolve at typical viewing distances; below quality 70, the quantization tables zero out enough coefficients to produce visible blocking and ringing. Quality 80-85 sits at the knee of the rate-distortion curve where additional quality buys very little perceived improvement and additional compression starts to cost visible quality. This is why sites like Google's PageSpeed Insights and Squoosh default to roughly that range.

WebP's quality scale is roughly equivalent to JPEG's at the same number, but the underlying VP8 codec produces sharper edges at low quality. WebP at 75 typically looks better than JPEG at 75. AVIF's scale is different again — AVIF quality 50 is roughly comparable to JPEG quality 80, and AVIF quality 30 is still acceptable for most photographs.

PNG-24 is rarely the right choice. If the image needs transparency, use PNG-32 (8-bit alpha). If it does not need transparency and is photographic, use JPEG or WebP. PNG-24 produces the largest file with no compensating benefit. PNG-8 (indexed-color, up to 256 colors) is dramatically smaller for simple graphics and is what most icon sprites should use.

WebP has two encoder paths — one based on VP8 for lossy and one based on prediction for lossless — and they produce different outputs even at the same nominal quality. The lossless path is documented in the libwebp encoder reference and uses a chained predictor, color transform, and entropy coder. For images with both photographic regions and crisp graphics (e.g., a screenshot with embedded photos), neither WebP path is ideal — consider splitting the regions.

JPEG's chroma subsampling default is 4:2:0, which halves the chrominance resolution in both axes. This is invisible on photographs but produces visible color smearing on saturated red text against a contrasting background — the classic 'red text on blue' artifact. If you must JPEG-encode an image with sharp colored text, force 4:4:4 chroma (no subsampling) at the cost of larger files.

Always resize to the actual display dimensions before compressing. The leverage is enormous: a 4000-pixel-wide photo resized to 1200 pixels for web use is already 89% smaller before any compression runs (1200² / 4000² ≈ 0.09). Compressing the resized image then targets the final byte budget. The reverse — compressing first, then resizing — wastes compute and loses quality, because you are throwing away detail that the resize would have removed anyway, and the resize-after step has less signal to work with.

Use Compress Image after resizing for the final size step. The tool preserves EXIF orientation tags so portrait photos display correctly. For format conversion as part of the pipeline, Image Converter handles JPEG/PNG/WebP/AVIF/HEIC interconversion.