How Image Compression Works (And Why 80% Is Almost Always Enough)

Photo by Markus Spiske via Pexels

What image compression actually does

A raw, uncompressed image file is enormous. A 12-megapixel photo stores 36 million individual pixel values before any compression — three bytes per pixel (red, green, blue). That's 36MB per image if stored as raw RGB data. Nobody does that, because image compression exists.

Compression algorithms analyze the pixel data and find a more efficient way to encode it. The most obvious example: if an image has 500 consecutive blue sky pixels at exactly the same color, there's no reason to store all 500 values separately. A simple encoding — “this shade of blue, repeated 500 times” — conveys the same information in a fraction of the space. Real compression algorithms are considerably more sophisticated, but the goal is identical: say the same thing with fewer bytes.

There are two fundamentally different approaches. Lossy compression discards some image data permanently to achieve larger size reductions. Lossless compression reorganizes data more efficiently without discarding any of it. They suit different use cases, and knowing the difference is the whole game.

Lossy compression: what gets thrown away

Photo by Jakub Zerdzicki via Pexels

Lossy compression permanently discards some image data to achieve a much smaller file. JPEG is the canonical example. So is lossy WebP. The key word is permanently — you cannot recover what was thrown away.

What gets thrown away, exactly? The clever part of lossy compression is that it discards the information your eyes are least likely to notice. Human vision is more sensitive to changes in brightness (luminance) than to changes in color (chrominance). JPEG exploits this: it preserves brightness detail at high fidelity while compressing the color channels more aggressively. At typical quality settings, this discrepancy is completely invisible.

The result at 80–90% quality: a file 60–70% smaller than the original with differences that are invisible at normal viewing sizes and distances. At very low quality settings (below 50%), the discarded data starts to show — blocky artifacts, smearing around edges, color banding. The term for these artifacts is compression artifacts, and once you learn to see them, you notice them everywhere on low-budget websites.

One more thing about lossy compression: every re-encoding loses more data. If you open a JPEG, make a small edit, and save it again as JPEG, the encoder runs a second pass and discards more. After three or four save cycles, degradation becomes visible — this is called generation loss. (Every time you save a JPEG, it forgets something. Like a goldfish with an art degree.) The fix: work in PNG, export to JPEG only at the final step.

Lossless compression: no data lost, smaller file

Lossless compression makes the file smaller without discarding any data. The original can be perfectly reconstructed — every pixel ends up identical to the source. PNG is the standard example. Lossless WebP is another.

PNG uses two main techniques. First, delta encoding (called filtering in the PNG spec): instead of storing absolute color values for each pixel, it stores the difference from the adjacent pixel. Differences between similar neighboring pixels are small numbers, which compress much better than raw absolute values. Second, DEFLATE compression — the same algorithm used in ZIP files — encodes the filtered data by finding and eliminating repeated byte patterns.

The limitation is real: lossless compression has a ceiling. For a typical photograph, PNG achieves 15–30% file size reduction. Useful, but a JPEG at 80% quality achieves 60–70%. Photographs contain too much non-repeating detail for lossless compression to compete with lossy on raw file size.

Where lossless wins: screenshots, logos, illustrations, anything with flat colors, sharp edges, or text. Compress a screenshot with PNG and you get excellent reduction with perfect quality. Apply JPEG compression to that same screenshot and you get blocky artifacts around every character and edge — exactly the fine detail JPEG is designed to discard.

The format decision tree is simple: photographs go to JPEG or lossy WebP; screenshots and graphics go to PNG or lossless WebP.

How JPEG compression works, step by step

Photo by panumas nikhomkhai via Pexels

JPEG compression is a multi-step pipeline. Here's what actually happens when you hit save:

1. Color space conversion. The image moves from RGB (red, green, blue) to YCbCr: one channel for brightness (Y) and two for color information (Cb and Cr). This separation lets the algorithm treat brightness and color differently — because they matter differently to your eyes.
2. Chroma downsampling. The two color channels (Cb and Cr) are reduced in resolution — typically halved in both dimensions. Since your eyes are much less sensitive to color detail than to brightness detail, this step costs almost nothing visually but saves meaningful space.
3. Block splitting.The image is divided into 8×8 pixel blocks. Each block is processed independently. This is why JPEG artifacts appear as blocky 8-pixel-wide squares — it's the fundamental unit of the algorithm.
4. Discrete Cosine Transform (DCT). Each 8×8 block is converted from pixel values into a set of frequency coefficients. This is similar to how audio compression works — the transform describes how quickly colors are changing across the block. A block of uniform blue sky produces mostly low-frequency coefficients. A block with fine edge detail produces high-frequency coefficients.
5. Quantization.This is the only irreversible step, and it's where the quality setting actually matters. The DCT coefficients are divided by values from a quantization table and rounded to the nearest integer. At low quality settings, the divisors are large — more rounding happens, more detail is discarded, smaller file. At high quality settings, divisors are smaller and rounding is less aggressive. High-frequency detail (fine textures, edges) uses larger divisors than low-frequency information (gradients, large areas of color), so fine detail is discarded first.
6. Entropy coding. The quantized coefficients are losslessly encoded using Huffman coding — common values get shorter bit representations, rare values get longer ones. This step reduces the file further without losing any more data.

The output is a JPEG file. Decoding reverses every step exceptquantization — you get back the rounded coefficients, not the originals. That's the loss. Everything else in the pipeline is perfectly reversible.

Which format to use

WebP is worth a specific mention. WebP is 25–35% smaller than JPEG at equivalent visual quality, supports both transparency and animation, and works in every modern browser. WebP support was Internet Explorer's hill to die on. IE is gone now. WebP won. If your website is still serving 4MB JPEGs, this is a gentle nudge.

The one place WebP still falls short: Open Graph images shared on WhatsApp, iMessage, and some email clients, which still expect JPEG. Keep WebP for on-page images; keep JPEG for anything shared outside a browser. You can convert between any of these formats using the ImageTools Image Converter — no account required, under 2 seconds.

AVIF is technically superior to WebP — better compression ratios, better handling of high-dynamic-range content — but browser support is still not universal. Keep an eye on it. Don't build production workflows around it yet unless you have a specific reason to.

How to compress without visible quality loss

Photo by Pixabay via Pexels

A small e-commerce seller had 200 product photos at 4–6MB each. Their store loaded slowly. Google PageSpeed kept flagging “serve images in next-gen formats” — which they had been ignoring because it sounded complicated and they had a store to run.

They batch-uploaded to the Image Compressor, downloaded the ZIP, replaced the originals. Average file size dropped from 5MB to 680KB. Load time dropped. No developer needed, no plugin, no subscription. They needed a lunch break and a decent internet connection.

The practical rules for compressing images without visible quality loss:

• JPEG at 80% quality for photographs.Files are 60–70% smaller; the difference is invisible on screen. If your tool lets you pick a quality number, pick 80. It's almost always the answer.
• Never re-compress an already-compressed JPEG. Open it, make your change, export once at 80%. Multiple re-saves stack the quality loss. After three rounds, the degradation becomes visible.
• PNG for anything with text, sharp edges, or a transparent background. JPEG produces blocky artifacts around those elements that lossless compression avoids entirely.
• Switch to WebP for web images.You get JPEG-level file sizes with better quality at equivalent settings, plus lossless support for graphics. If you're building a website and you're not using WebP, you're leaving performance on the table.
• Resize before compressing. Serving a 4000×3000 image scaled down to 800×600 via CSS wastes three times the bandwidth regardless of compression. Resize to the actual display dimensions first, then compress.
• Lossless compression has limits.PNG lossless compression reduces files 15–30% on average. Anyone promising “lossless 90% compression” is either confused about what lossless means or hoping you are.

For a full breakdown of when visible quality loss actually occurs and how to tell the difference, read our guide on whether image compression reduces quality. For the compression itself: ImageTools Image Compressor handles JPEG, PNG, and WebP. No account, no watermarks, files deleted within an hour. Upload, download, done.

Frequently asked questions