Lossless vs Lossy Compression - When to Use Each for Web Images

Fundamentals of Image Compression

Digital images consist of enormous amounts of pixel data, resulting in very large file sizes when uncompressed. For example, a 1920 x 1080px 24-bit color image is approximately 6MB uncompressed. Image compression technology solves this problem and is broadly classified into two types: lossless compression and lossy compression.

Lossless compression allows complete restoration of original data from compressed data. Operating on the same principle as ZIP file compression, it incurs zero information loss. Image formats using lossless compression include PNG, GIF, TIFF (LZW), WebP (lossless mode), and AVIF (lossless mode).

Lossy compression achieves dramatic file size reduction by exploiting human visual characteristics to remove imperceptible information. Once compressed, the original data cannot be recovered. JPEG, WebP (lossy mode), AVIF (lossy mode), and HEIC use lossy compression.

Neither is universally superior - selecting the appropriate method based on image purpose, type, and delivery environment is what matters.

How Lossless Compression Works

Lossless compression reduces file size by detecting redundancy (repeating patterns) in data and replacing them with shorter representations. Here are the key algorithms explained.

Major algorithms:

• DEFLATE (used in PNG): Combines LZ77 (dictionary compression) with Huffman coding. Compresses by referencing previously occurring byte patterns
• LZW (used in GIF, TIFF): Dynamically builds a dictionary during compression. Usage was temporarily restricted due to patent issues, now expired
• WebP lossless: Google's proprietary algorithm combining predictive transforms, color space transforms, and an improved LZ77 variant. Claimed to be 26% smaller than PNG

Lossless compression characteristics:

• No quality degradation regardless of how many compression/decompression cycles (no generation loss)
• Compression ratio heavily depends on image content. Images with large solid areas compress well; complex photos compress poorly
• Generally 2-10x larger file sizes compared to lossy compression
• Many formats support transparency (alpha channel)

PNG compression efficiency is significantly affected by filtering (preprocessing that converts each row's pixel values to differences from adjacent pixels). Tools like pngcrush and optipng search for optimal filtering strategies to achieve additional size reduction.

How Lossy Compression Works

Lossy compression cleverly exploits characteristics of the Human Visual System (HVS) to selectively remove imperceptible information. Using JPEG as an example, here's how it works.

JPEG compression process:

1. Color space conversion: Converts RGB to YCbCr (luminance + chrominance). Exploits the fact that human eyes are sensitive to luminance changes but insensitive to chrominance
2. Chroma subsampling: Reduces chrominance component (Cb, Cr) resolution by half (4:2:0). Luminance is preserved
3. DCT (Discrete Cosine Transform): Transforms each 8x8 pixel block into frequency domain. Separates low-frequency components (gradual changes) from high-frequency components (sharp changes)
4. Quantization: Coarsely rounds high-frequency components (information is lost here). The quality parameter controls quantization table coarseness
5. Entropy coding: Generates the final bitstream using Huffman coding

Lossy compression characteristics:

• Achieves extremely high compression ratios for natural photographs (1/10 to 1/20 of original)
• Quality parameter allows controlling the compression-quality tradeoff
• Quality degrades with each recompression (generation loss)
• Artifacts (block noise, mosquito noise) are visible in images with sharp edges (text, line art)

Optimal Compression by Use Case

The optimal compression method clearly differs based on image type and purpose. Follow these guidelines for selection.

Choose lossless compression for:

• Images containing text: Screenshots, diagrams, infographics. JPEG produces block noise around text
• Logos and icons: Sharp-edged images with few colors. PNG or SVG is optimal
• Images requiring transparency: Transparent logos, UI elements. PNG (8-bit or 24-bit + alpha)
• Master images for editing: Images that may be re-edited later. Save as TIFF or PNG to prevent generation loss
• Pixel art: Per-pixel precision matters. PNG is optimal (JPEG bleeds colors to adjacent pixels)

Choose lossy compression for:

• All photographs: Landscapes, portraits, product photos. JPEG quality 80-85% maintains sufficient quality
• Web delivery images: Page load speed is critical. WebP lossy offers the best balance
• Social media posts: Platforms recompress anyway, so excessively high source quality has diminishing returns
• Thumbnails: Compression artifacts are less noticeable at small sizes

When in doubt: if the image contains "straight lines," "text," or "large solid-color areas," choose lossless. If "gradients," "natural color transitions," or "complex textures" dominate, choose lossy.

Compression in Next-Generation Formats

Next-generation formats like WebP, AVIF, and JPEG XL support both lossless and lossy modes, achieving compression efficiency far exceeding legacy formats.

WebP (Google, 2010):

• Lossy: Based on VP8 video codec. 25-34% smaller than JPEG
• Lossless: Proprietary algorithm. 26% smaller than PNG
• Browser support: All modern browsers. Practically safe to use universally

AVIF (Alliance for Open Media, 2019):

• Lossy: Based on AV1 video codec. Can be 50%+ smaller than JPEG
• Lossless: Supported but encoding speed is very slow
• Particularly excellent quality at low bitrates with fewer artifacts under heavy compression
• Browser support: Chrome, Firefox, Safari (iOS 16+)

JPEG XL (Joint Photographic Experts Group, 2022):

• Lossy: Approximately 60% smaller than JPEG
• Lossless: Approximately 35% smaller than PNG
• Unique strength: lossless transcoding from existing JPEG files
• Browser support: As of 2026, only Safari has native support. Chrome implemented then removed it

In practice, building a fallback chain of AVIF → WebP → JPEG/PNG using the <picture> element to serve optimal formats based on browser capabilities is the recommended strategy.

Books explaining data compression algorithms are available on Amazon

Quality Metrics and Optimization Tools

Objectively evaluating post-compression quality requires numerical quality metrics. Combined with subjective visual inspection, these help determine optimal compression parameters.

Key quality metrics:

• PSNR (Peak Signal-to-Noise Ratio): Expresses difference from original in decibels. 30dB+ is practical, 40dB+ is high quality. Fast to compute but poorly correlated with human perception
• SSIM (Structural Similarity Index): Evaluates similarity across luminance, contrast, and structure. Range 0-1 where 1 is identical. Closer to human perception than PSNR
• VMAF (Video Multimethod Assessment Fusion): Machine learning-based metric developed by Netflix. Applicable to still images with highest correlation to human subjective assessment
• Butteraugli: Perceptual difference measurement tool by Google. Used for JPEG XL quality tuning

Practical optimization tools:

• mozjpeg: Mozilla's JPEG encoder. Produces 5-15% smaller files than standard JPEG
• oxipng: Rust-based PNG optimizer. Multi-threaded for speed
• cwebp / avifenc: Official WebP / AVIF encoders with fine-grained quality control
• squoosh (Google): Browser-based image compression tool for visual format comparison

For web delivery, JPEG quality 75-85%, WebP quality 75-80%, and AVIF quality 60-70% are generally recommended ranges. However, optimal values vary by image content, so testing with representative images is essential.