Lossy vs Lossless Compression: What Actually Happens to Your Image

Every image file is a compromise between size and quality, and that compromise comes down to one core decision: does the compression throw information away, or not? That single question is the difference between lossy and lossless compression, and it explains almost everything about why JPG, PNG and WebP behave so differently.

Lossless: smaller, but honestly

Lossless compression finds patterns and redundancy in the data and encodes them more efficiently, without discarding any information. Decompress a lossless file and you get back the exact original, bit for bit. PNG is the common lossless image format: it works well on images with large flat areas of a single color, sharp edges and text — logos, screenshots, diagrams — because those have a lot of repeating patterns to compress efficiently. On a busy photograph with subtle color gradients everywhere, PNG has much less redundancy to exploit, so the file stays large.

Lossy: smaller, because it cheats a little

Lossy compression, used by JPG and (optionally) WebP, gets much smaller files by discarding information the human eye is less likely to notice missing. JPG specifically takes advantage of the fact that human vision is far more sensitive to changes in brightness than to changes in color, so it keeps brightness detail largely intact while compressing color information more aggressively, and also groups the image into small blocks and simplifies the fine detail within each one. At normal viewing sizes and reasonable quality settings (75–85%), this is genuinely invisible to most people. Push the quality too low and the shortcuts become visible as blocky artifacts, especially around sharp edges and text.

Every time you re-save a JPG, this discarding happens again on top of whatever was already lost, which is why repeatedly editing and re-saving the same JPG file gradually degrades it — a real phenomenon sometimes called generation loss.

Choosing the right one

• Photographs, real-world images: use lossy (JPG or WebP). The quality loss is invisible at reasonable settings and the file size savings are large.
• Logos, screenshots, diagrams, text-heavy images: use lossless (PNG). Lossy compression on flat-color graphics tends to introduce visible smudging around sharp edges that wasn't there before.
• Anything that needs transparency: use PNG (or WebP, which also supports transparency). JPG cannot represent transparent pixels at all.
• Anything you'll edit and re-save repeatedly: keep a lossless master copy and only export a lossy version for final use, to avoid compounding quality loss over time.

Where WebP fits in

WebP is unusual because it supports both modes in one format: lossy WebP typically beats JPG by 25–35% at equivalent quality, and lossless WebP typically beats PNG by 20–30%. If your target platform supports it (nearly all current browsers do), WebP is usually the better default in either case — the main reason to still reach for JPG or PNG specifically is compatibility with an older system or a tool that doesn't yet accept WebP.