What Is Image Compression? Lossy vs Lossless Explained

A raw uncompressed photograph from a modern smartphone might be 20–30 MB. The JPEG you save from your camera is typically 3–8 MB. The WebP you serve on your website might be 80–200 KB. That 99% reduction in size is achieved by image compression — encoding the visual data more efficiently, and in some cases discarding visual detail that humans can't easily perceive.

What Is Image Compression?

Image compression is the process of reducing an image's file size by encoding its pixel data using mathematical algorithms. The goal is to represent the same (or near-identical) visual information in fewer bytes, making images faster to transmit and cheaper to store.

All digital images are ultimately grids of pixels, each pixel a combination of red, green, and blue (and sometimes alpha/opacity) values. Raw, uncompressed images store every pixel's full value. Compression algorithms exploit patterns in the data — repeated colours, predictable gradients, redundant information — to store the same visual content in fewer bits.

Lossy vs Lossless Compression

How Lossy Compression Works

Lossy compression works by identifying visual information that human eyes are least sensitive to and discarding it. JPEG, for example, uses the Discrete Cosine Transform (DCT): the image is divided into 8×8 pixel blocks, then each block is transformed into frequency components. High-frequency details (fine texture, sharp edges) are quantised more aggressively — rounded to fewer possible values — because human vision is less sensitive to high-frequency information than to low-frequency (broad colour areas, gradients).

WebP and AVIF use more sophisticated lossy algorithms from video codecs. Instead of fixed 8×8 blocks, they use variable block sizes (from 4×4 to 64×64 or larger) and more complex prediction of each block from surrounding pixels. This allows them to achieve better quality at the same file size, or the same quality at a smaller file size, compared to JPEG.

How Lossless Compression Works

Lossless compression keeps every pixel's exact value but encodes runs of similar pixels more efficiently. PNG uses the DEFLATE algorithm (the same algorithm as ZIP files) applied to prediction-filtered pixel data. First, a filter transforms each pixel into a prediction error (how far the actual pixel differs from what adjacent pixels predict it would be). These prediction errors tend to be small and clustered near zero — which DEFLATE compresses very efficiently.

WebP lossless uses a more advanced transform-based approach, applying colour indexing, colour space transformation, and 2D LZ77 back-reference encoding. The result: lossless WebP is typically 26% smaller than equivalent PNG, representing the same pixels but encoded more cleverly.

Which Formats Use Which Compression

Quality Settings Explained

Most image tools expose a quality slider for lossy compression, typically 0–100. Higher quality = larger file, lower quality = smaller file. The relationship isn't linear — quality 90 is often 3–5× larger than quality 70, while looking only marginally better to the eye.

• Quality 95–100: Near-lossless, huge files. Useful for post-production; avoid for web.
• Quality 85–90: High quality, still larger than needed for web. Used in professional print-adjacent workflows.
• Quality 75–85: The web sweet spot for photographs. Imperceptible quality loss, significantly smaller files.
• Quality 60–75: Noticeable quality loss on close inspection. Acceptable for thumbnails and small previews.
• Quality below 60: Visible artefacts. Only acceptable for very small images or aggressive size constraints.

How to Choose Compression Level

The best compression setting is the highest compression (lowest quality number) at which quality loss becomes invisible at normal viewing distance on a normal screen. For web images, WebP quality 80–85 achieves this for most photographs. For product images where customers zoom in, use 85–90. For thumbnails and previews, 70–75 is typically fine.