Lossy vs lossless compression

Lossless: same pixels, shorter description

Lossless compression looks for predictability. PNG guesses each pixel from its neighbours (left, above, or a mix), stores only the difference from the guess, and passes those mostly-small numbers to DEFLATE, the algorithm inside zip files, which replaces repeated sequences with back-references. Decompress it and you get every pixel back exactly.

Flat graphics are very predictable, so they shrink well. Photos are full of sensor noise, which is by definition unpredictable, so lossless photos stay big. Reducing the colour count is the classic way to make graphics even more predictable:

Lossy: throw away what the eye ignores

Lossy codecs exploit human vision. We see brightness detail much better than colour detail, so JPEG usually stores colour at half resolution (chroma subsampling). And we notice broad shapes more than fine texture, so JPEG turns each 8×8 block into frequencies and rounds the fine ones hard. Move the slider and watch the frequency grid empty out:

Frequency maths like this tends to land better when someone explains it aloud. For how-it-works questions far from image files, ahaboo has narrated explainers on photosynthesis and why the Moon has phases.

WebP and AVIF use the same basic idea with smarter tools: they predict each block from already-decoded neighbours, use variable block sizes, and filter block edges after decoding, which is why they avoid JPEG’s blockiness at low sizes.

Which should you use?

Sources: ITU-T Recommendation T.81 (the JPEG standard) for the quantisation table and DCT; the PNG specification (W3C) for filtering and DEFLATE.