The Basics: Why Compression is Necessary

Uncompressed images store color information for every single pixel. A 12-megapixel photo contains 12 million pixels, and if each pixel requires 3 bytes to store its color (RGB values), the total file size is 36 megabytes—just for one photo.

Image compression algorithms analyze these pixel values and find ways to represent the same visual information using less data. The key insight is that most images contain redundancy and patterns that can be described more efficiently than storing every pixel individually.

Compression algorithms also exploit limitations of human vision. Our eyes are less sensitive to certain types of changes, particularly fine color variations and high-frequency details. Compression can discard or reduce information in areas where human perception is weak, creating smaller files without noticeable quality loss.

Two Categories: Lossy vs Lossless Compression

Lossless Compression: Perfect Preservation

Lossless compression reduces file size without losing any image data. When you decompress a lossless image, you get back exactly the original—pixel-perfect, bit-for-bit identical. PNG uses lossless compression, which is why PNG files are typically larger than equivalent JPG files but maintain perfect quality.

Lossless compression works by finding patterns and redundancies in the data. For example, if an image has a large solid blue area, instead of storing "blue, blue, blue, blue..." thousands of times, the algorithm stores "blue × 1000." This is called run-length encoding, one of many lossless techniques.

Other lossless techniques include dictionary coding (LZ77/LZ78), Huffman coding (assigning shorter codes to frequently occurring values), and predictive coding (storing differences between pixels instead of absolute values). PNG combines multiple techniques for optimal compression.

Lossy Compression: Strategic Data Removal

Lossy compression achieves much smaller file sizes by permanently removing some image data. The key is removing information that has minimal perceptual impact—changes that human eyes typically can't detect, especially at normal viewing distances.

JPG and WebP use lossy compression. These formats can reduce file sizes by 80-95% compared to uncompressed images while maintaining visual quality that appears nearly identical to the original. The "quality" slider in image editors controls how aggressively lossy compression discards data.

Lossy compression is irreversible—once data is removed, it cannot be recovered. This is why repeatedly saving JPG files degrades quality progressively. Each save operation applies compression, removing more data with each iteration.

How JPG Compression Works

JPG (JPEG) compression is the most widely used lossy compression format. Understanding how JPG works provides insight into image compression principles in general.

Step 1: Color Space Transformation

JPG first converts images from RGB (Red, Green, Blue) color space to YCbCr (Luminance, Blue-difference, Red-difference) color space. This separation is crucial because human eyes are more sensitive to brightness (luminance) than to color variations (chrominance).

By separating brightness from color information, JPG can apply more aggressive compression to color channels where humans are less perceptive, while preserving detail in the luminance channel where we notice changes more readily.

Step 2: Chroma Subsampling

Since humans perceive brightness more accurately than color, JPG reduces the resolution of color information through chroma subsampling. Common subsampling ratios include 4:2:0, meaning color information is stored at half the resolution of brightness information.

This single step can reduce file size by 50% with minimal perceptual impact for most photographic images. Your eyes simply can't detect the reduced color resolution at normal viewing distances.

Step 3: Block Division and DCT (Discrete Cosine Transform)

The image is divided into 8×8 pixel blocks. Each block undergoes a mathematical transformation called Discrete Cosine Transform (DCT), which converts spatial pixel values into frequency coefficients representing different patterns of variation.

Think of DCT like musical notes. Just as complex sounds can be broken down into individual frequencies (bass, midrange, treble), images can be broken down into spatial frequencies (smooth gradients, medium details, fine textures). DCT identifies how much of each "frequency" is present in each 8×8 block.

Low frequencies represent smooth areas and gradual changes. High frequencies represent sharp edges, fine details, and textures. Human vision is most sensitive to low and medium frequencies, less sensitive to high frequencies.

Step 4: Quantization (Where Compression Happens)

Quantization is where lossy compression actually removes data. The DCT coefficients are divided by values from a quantization table, then rounded to integers. This process discards fine details and emphasizes dominant patterns.

The quantization table is where the quality setting comes into play. Lower quality uses more aggressive quantization, discarding more high-frequency information and creating smaller files with more visible compression artifacts. Higher quality preserves more detail but creates larger files.

After quantization, many high-frequency coefficients become zero, especially in smooth areas. These zeros compress extremely well using lossless techniques in the next step, achieving significant size reduction.

Step 5: Entropy Coding

The quantized coefficients undergo lossless compression using Huffman coding or arithmetic coding. These algorithms assign shorter codes to frequently occurring values and longer codes to rare values, similar to Morse code assigning shorter codes to common letters like 'E'.

Since quantization created many zeros, and zeros are very efficiently compressed, this step significantly reduces file size without any additional quality loss.

How PNG Compression Works

PNG (Portable Network Graphics) uses lossless compression, meaning it preserves every bit of image data. PNG is ideal for graphics, screenshots, and images with text where perfect accuracy is required.

Step 1: Filtering

Before compression, PNG applies filters to each row of pixels to increase compressibility. Filters create patterns by storing differences between adjacent pixels rather than absolute values.

For example, if a row contains pixels with values 100, 101, 102, 103, instead of storing those numbers, PNG might store "100, +1, +1, +1." This creates repetition (lots of +1 values) that compresses more efficiently.

Step 2: DEFLATE Compression

After filtering, PNG uses DEFLATE compression (the same algorithm used in ZIP files). DEFLATE combines LZ77 (finding repeated sequences) with Huffman coding (efficient encoding of frequent values).

DEFLATE is highly effective for images with solid colors, gradients, and repeating patterns—the types of content found in graphics, logos, and screenshots. However, photographs with complex details compress less effectively with PNG compared to lossy formats like JPG.

How WebP Compression Works

WebP, developed by Google, is a modern format supporting both lossy and lossless compression with better efficiency than JPG or PNG. WebP combines techniques from both video compression (VP8 codec) and image compression.

Lossy WebP

Lossy WebP uses predictive coding (borrowed from video compression) where each block is predicted from neighboring blocks, and only the prediction error is encoded. This is more efficient than JPG's approach for many images.

WebP also uses more sophisticated quantization and entropy coding than JPG, achieving 25-35% better compression at equivalent quality levels. This makes WebP ideal for modern web applications where performance is critical.

Lossless WebP

Lossless WebP uses predictive coding and entropy encoding optimized specifically for image data. It typically achieves 26% better compression than PNG for equivalent image quality, making it an excellent alternative for graphics requiring perfect preservation.

Understanding Compression Artifacts

Compression artifacts are visual distortions introduced by lossy compression. Understanding artifact types helps you choose appropriate quality settings.

Choosing the Right Compression for Your Content

The Future of Image Compression

Image compression continues evolving with new formats and algorithms. AVIF (based on the AV1 video codec) offers even better compression than WebP, though browser support is still growing. JPEG XL promises to replace JPG with superior compression and modern features while maintaining backward compatibility.

Machine learning and AI are also entering the compression space. Neural networks can learn optimal compression strategies for specific content types, potentially achieving better quality-to-size ratios than traditional algorithms.

Despite these advances, JPG, PNG, and WebP remain the practical choices for web and digital applications today due to universal support and proven effectiveness.

Conclusion

Image compression is a sophisticated blend of mathematics, psychology (understanding human perception), and computer science. By exploiting patterns in image data and limitations of human vision, compression algorithms achieve remarkable file size reductions while maintaining visual quality that meets or exceeds what our eyes can perceive. Understanding how compression works empowers you to make informed decisions about formats, quality settings, and optimization strategies for your specific needs.