Lossy vs lossless, quality settings, format-specific behavior, when compression breaks down — image compression explained without the math, but with practical guidance.
Image compression is one of those topics where everyone uses the tools but few people understand what they actually do. You drag a slider, the file gets smaller, and somehow the picture still looks fine. How?
This article explains compression without diving into the math. By the end you'll understand what's happening when you save a JPG at quality 80, why PNG compresses some images well and others poorly, and how to pick the right settings for your use case.
Image compression works because real-world images aren't random. They contain patterns. Pixels near each other tend to be similar colors. Sharp transitions are relatively rare. Some color combinations appear more often than others. Repeating data can be encoded more compactly.
Every compression algorithm exploits these patterns differently. Some are lossless — they find more efficient ways to store the same exact data. Others are lossy — they throw away some data based on what human eyes don't notice.
Lossless compression makes files smaller without losing any information. Decompressing gives you back exactly the original bytes. This is the only acceptable approach when every pixel must be preserved exactly — medical imaging, technical diagrams, archival storage.
PNG uses lossless compression. So does the lossless mode of WebP. So do file formats like TIFF (with appropriate encoding).
The savings from lossless compression depend heavily on the content:
Lossy compression throws away some data to achieve dramatic size reduction. The trick is throwing away the right data — the parts that human vision is bad at noticing.
JPG is the most famous lossy format. It works by:
The "quality" slider in JPG controls step 4 — how aggressively the high frequencies are quantized. At quality 100, almost nothing is lost. At quality 50, a lot is lost (and you can see the artifacts).
The quality slider is misleading. It's not a percentage of how much quality is preserved — it's an index into a quantization table. The actual relationship between the number and the visible quality is non-linear and format-dependent.
Practical rules of thumb:
If you're not sure, use 85. It works for 95% of use cases.
When you crank quality way down, you see specific artifacts. These aren't random — they're consequences of how the compression algorithm works.
WebP and AVIF have different artifact patterns because they use different (smarter) compression techniques. Modern formats produce more graceful degradation at low qualities — instead of blocks, you get softer, blurrier images.
Lossy compression has cases where it fails badly:
Quality 85 for most uses. 95 for archival. Below 70 only if file size is critical.
Quality 80-85. WebP looks slightly better than JPG at the same quality setting because its compression is smarter.
Quality 60-75 produces files comparable to JPG quality 85. AVIF's quality scale doesn't map directly to JPG's.
No quality setting (lossless). You can choose the compression level (0-9) which trades encode time for file size — but the output is bit-identical regardless. Level 6 is the usual default.
Like PNG, but typically 25-50% smaller for the same content.
If your image is 4000 pixels wide but will only be displayed at 800 pixels, resizing produces more savings than compressing. Resize first, then compress. Doing both gives you the smallest files.
This is the workflow most professional image pipelines follow. Now you can do the same.
Try it yourself with pictoolkit's compression tool — adjust the quality slider and see the file size and visual difference in real time.