Understanding Image Compression: Lossy vs Lossless Explained

Every time you save an image, compression algorithms are working behind the scenes to reduce file sizes. But how do these algorithms work? Why do some formats produce tiny files while others create huge ones? And most importantly — when does compression actually matter for your images?

This guide explains the fundamental science behind image compression, helping you make informed decisions about which format and settings to use for every situation.

What is Image Compression?

At its core, image compression is the process of reducing the amount of data needed to represent an image. An uncompressed 1920x1080 image with 24-bit color requires approximately 6.2MB of raw data (1920 × 1080 × 3 bytes). Compression algorithms can reduce this to anywhere from 100KB to 3MB, depending on the method and quality settings used.

Why Compress Images?

• Storage: A photographer shooting 1,000 photos per day would use over 6GB daily with uncompressed images
• Bandwidth: Website images account for roughly 50% of total page weight. Compressed images load faster, improving user experience and SEO
• Transfer: Sharing images via email, messaging, or social media is impractical with multi-megabyte uncompressed files

Lossless Compression: Every Pixel Preserved

Lossless compression reduces file size without discarding any image data. The decompressed image is bit-for-bit identical to the original. This is like zipping a text file — the original content is perfectly preserved.

How Lossless Compression Works

Most lossless image compression uses two main techniques:

1. Prediction Filtering

Instead of storing the absolute color value of each pixel, the algorithm stores the difference between each pixel and a prediction based on neighboring pixels. In areas of solid color, these differences are zero or near-zero, which compresses very efficiently.

For example, in a blue sky, thousands of consecutive pixels have nearly identical color values. Instead of storing “blue, blue, blue, blue…” the algorithm stores “blue, same, same, same…” — which requires far less data.

2. Entropy Coding

After prediction filtering, the remaining data is compressed using entropy coding algorithms (such as Huffman coding or arithmetic coding). These algorithms assign shorter codes to frequently occurring values and longer codes to rare values, similar to Morse code using a single dot for the common letter ‘E’.

Lossless Formats

• PNG: The web standard for lossless images. Supports transparency. Best for screenshots, logos, and graphics with sharp edges
• WebP (lossless mode): Google’s format offers 25-35% smaller files than PNG with identical quality
• TIFF: Used in professional photography and publishing. Supports various compression methods
• BMP: Essentially uncompressed. Rarely used today due to large file sizes

Typical Lossless Compression Ratios

The effectiveness of lossless compression depends heavily on image content:

• Screenshots with text: 70-90% reduction (lots of solid colors and repeating patterns)
• Simple graphics: 60-80% reduction
• Photographs: Only 20-40% reduction (photographic content has high entropy with few repeating patterns)

Lossy Compression: Trading Quality for Size

Lossy compression achieves dramatically smaller file sizes by permanently removing image data that is theoretically less perceptible to human vision. This is based on the science of psychovisual modeling — understanding how the human visual system perceives images.

How Lossy Compression Works

Most lossy image compression (including JPEG) follows this general pipeline:

1. Color Space Conversion

The image is converted from RGB to YCbCr color space, which separates brightness (luminance) from color (chrominance). This is crucial because human eyes are much more sensitive to brightness changes than color changes.

2. Chroma Subsampling

Since humans are less sensitive to color detail, the color channels can be stored at lower resolution than the brightness channel. The most common method, 4:2:0 subsampling, stores color at half the horizontal and vertical resolution — immediately reducing data by 50% with minimal perceptible impact.

3. Discrete Cosine Transform (DCT)

The image is divided into 8x8 pixel blocks, and each block is transformed from pixel values into frequency coefficients using the Discrete Cosine Transform. This mathematical operation identifies how much of each visual frequency (from smooth gradients to sharp edges) is present in each block.

4. Quantization (Where Quality Loss Occurs)

The frequency coefficients are divided by a quantization matrix, which rounds high-frequency (fine detail) coefficients more aggressively. This is where actual data loss occurs — fine details and subtle textures are simplified or removed entirely. The quality setting you choose (e.g., 85%) controls how aggressive this quantization is.

5. Entropy Coding

Finally, the quantized coefficients are compressed using lossless entropy coding, similar to the lossless pipeline.

Lossy Formats

• JPEG/JPG: The universal standard for photographs. Quality adjustable from 0-100%
• WebP (lossy mode): 25-34% smaller than equivalent JPEG at the same visual quality
• AVIF: Next-generation format based on AV1 video codec. 50% smaller than JPEG
• HEIC: Apple’s format using HEVC codec. Similar efficiency to AVIF

Understanding Quality Settings

Quality percentages are not standardized across formats, but here are general guidelines for JPEG:

• 100%: Near-lossless, minimal compression. Files only 2-3x smaller than PNG
• 90-95%: Excellent quality. Artifacts invisible in normal viewing. Recommended for high-quality output
• 80-85%: Good quality. Slight artifacts visible only when zooming in. Great balance for web use
• 60-75%: Acceptable for thumbnails and casual use. Visible artifacts in gradients
• Below 50%: Noticeable quality degradation. Only for extremely constrained situations

Choosing the Right Approach

Use Lossless When:

• Images contain text, sharp edges, or fine lines (screenshots, logos, technical diagrams)
• You need to edit the image multiple times (each lossy save degrades quality further)
• Transparency is required
• Maximum quality is non-negotiable (medical imaging, archival)
• The image has few colors (icons, pixel art)

Use Lossy When:

• The image is a photograph (lossy formats are designed for photographic content)
• File size matters (web delivery, email, social media)
• The image will be viewed at small sizes where fine details aren’t visible
• You’re distributing final output that won’t be re-edited

The Modern Best Practice

For web delivery in 2026, the modern best practice is:

1. Store originals in lossless format (PNG or TIFF) for archival
2. Deliver on web in WebP or AVIF at 80-85% quality
3. Provide JPEG fallback for the small percentage of users on very old browsers
4. Use SVG for logos, icons, and graphics that are naturally vector

The Generational Shift in Image Formats

The image format landscape is evolving rapidly. Newer formats like WebP and AVIF use more sophisticated compression algorithms — including techniques borrowed from video codecs — to achieve better quality at smaller file sizes.

AVIF, in particular, represents a significant leap. Based on the AV1 video codec, it can produce files 50% smaller than JPEG at the same perceived quality. As browser support continues to expand, AVIF is poised to become the dominant web image format.

Conclusion

Understanding compression helps you make better decisions about image formats. Lossless compression preserves every detail but produces larger files. Lossy compression creates dramatically smaller files by intelligently removing imperceptible data. Neither approach is universally “better” — the right choice depends on your content, audience, and use case.

With WasmConvert, you can experiment with different formats and quality settings locally in your browser, comparing file sizes and quality to find the perfect balance for your specific needs.