Lossy vs Lossless Image Compression

Every image on the web has been compressed; but not all compression is the same. Understanding the difference between lossy and lossless compression is the foundation of all image optimization work. It determines which format to choose, how much quality you can sacrifice, and when to stop compressing.

What is lossy compression?

Lossy compression permanently removes data from the image. The algorithm analyses the image and discards information that human eyes are least likely to notice, fine texture in smooth areas, subtle colour gradients, high-frequency detail. The result is a smaller file at the cost of some image fidelity.

The key characteristic: quality loss is irreversible. Once you save a JPEG, the discarded data is gone. Re-saving that JPEG again causes another round of quality loss, this is called "generation loss."

Formats that use lossy compression: JPEG, WebP (lossy mode), AVIF (lossy mode), HEIC (lossy mode)

What is lossless compression?

Lossless compression preserves every pixel of the original image. The algorithm finds redundant patterns in the data and encodes them more efficiently, like ZIP compression for files; but the decompressed image is bit-for-bit identical to the original. No visual information is ever discarded.

Formats that use lossless compression: PNG, GIF, WebP (lossless mode), AVIF (lossless mode), BMP (uncompressed)

Side-by-side comparison

When to use lossy compression

Lossy compression is the right choice when:

• You are compressing photographs: photos have complex, irregular pixel patterns where some data loss is imperceptible
• File size is critical: hero images, product photos, page backgrounds
• The image will be viewed at a fixed size and you control the final output quality
• You will not edit the image again: lossy should be the last step before publishing

When to use lossless compression

Lossless compression is necessary when:

• The image contains sharp edges or text: lossy compression creates visible artifacts (ringing, blurring) around high-contrast edges
• Transparency is required: PNG with an alpha channel
• The image is a source file that will be edited: always work in lossless formats; apply lossy compression only at export
• Pixel-perfect accuracy matters: screenshots, UI mockups, technical diagrams

Quality settings in lossy compression

Lossy formats (JPEG, WebP, AVIF) have a quality parameter, typically on a scale of 0–100. This is not a linear scale, the relationship between quality value and file size is not proportional:

• JPEG 90–100: very high quality, large file. Rarely justified for web use
• JPEG 75–85: excellent for photos, imperceptible quality loss, typical web target
• JPEG 60–75: visible artifacts on close inspection, but acceptable for thumbnails
• JPEG below 60: visible degradation, only suitable for very small images

WebP and AVIF produce better results at the same quality setting, AVIF q60 typically looks better than JPEG q80 at a smaller file size.

Lossless PNG optimization

Even lossless PNG files can be significantly reduced in size without any quality loss by:

• Reducing colour depth: PNG-8 (256 colours) vs PNG-24 (16 million colours), use PNG-8 for simple graphics
• Applying more aggressive DEFLATE compression (pngcrush, oxipng)
• Removing metadata (ICC profiles, text chunks, creation timestamps)