Image Compression Algorithms Explained

Image compression is one of the most remarkable achievements in computer science. A raw, uncompressed photograph from a modern camera might be 50 to 100 megabytes, yet it can be compressed to 200 kilobytes — a reduction of 99.7 percent — with no visible quality loss. How is this possible? The answer lies in compression algorithms: sophisticated mathematical techniques that identify and eliminate redundancy in image data. This guide explains the science behind image compression, from the fundamental concepts to the specific algorithms used by JPG, PNG, WebP, and AVIF.

The Fundamental Insight: Images Are Redundant

All image compression, whether lossy or lossless, relies on a single fundamental insight: images contain enormous redundancy. A photograph of a blue sky has millions of pixels that are nearly the same shade of blue. A graphic with a white background has thousands of identical white pixels. An image of a gradient has pixels that change in predictable ways. Compression algorithms exploit this redundancy to represent the image more efficiently.

There are three main types of redundancy in images:

Spatial Redundancy

Adjacent pixels are often similar in color and brightness. In a blue sky, neighboring pixels are nearly identical. Spatial redundancy can be reduced by encoding the differences between neighboring pixels rather than the absolute values, or by transforming the image into a representation where the redundancy is more obvious.

Spectral Redundancy

The color channels of an image are often correlated. A pixel that is bright in the red channel is often also bright in the green and blue channels. Spectral redundancy can be reduced by transforming the color space from RGB to a representation where the channels are less correlated, such as YCbCr (luminance and two chrominance channels).

Psychovisual Redundancy

The human visual system is less sensitive to certain types of visual information than others. We are more sensitive to brightness changes than color changes, more sensitive to low frequencies than high frequencies, and less sensitive to detail in busy areas than in smooth areas. Psychovisual redundancy can be reduced by discarding the information that the eye is least likely to notice — this is the basis of lossy compression.

Lossless Compression Techniques

Lossless compression reduces file size without discarding any information. The decompressed image is pixel-identical to the original. Lossless compression exploits spatial and spectral redundancy but not psychovisual redundancy.

Run-Length Encoding (RLE)

The simplest lossless technique. Instead of storing each pixel individually, RLE stores a color value and a count. A row of 100 white pixels is encoded as "100 white pixels" instead of 100 individual white pixel values. RLE is very efficient for images with large areas of solid color but useless for photographs, where consecutive pixels are rarely identical.

Dictionary Coding (LZW, DEFLATE)

Dictionary coding builds a dictionary of patterns that appear in the data and replaces each pattern with a short code. The LZW algorithm (used in GIF and some TIFF implementations) and the DEFLATE algorithm (used in PNG) are both dictionary-based. They are effective for images with repeated patterns but less effective for noisy, detailed photographs.

Predictive Coding

Predictive coding encodes each pixel as the difference between its actual value and a predicted value based on neighboring pixels. If the prediction is good, the differences are small and can be encoded efficiently. PNG uses a form of predictive coding called filtering, where each row of pixels can be encoded as the difference from the row above, the pixel to the left, or a combination.

Entropy Coding (Huffman, Arithmetic)

Entropy coding is the final step in most compression pipelines. It assigns shorter codes to more common values and longer codes to less common values, reducing the average code length. Huffman coding (used in JPG and PNG) and arithmetic coding (used in WebP and AVIF) are the two main entropy coding methods. Arithmetic coding is more efficient than Huffman coding because it can assign fractional bit lengths, but it is more computationally complex.

Lossy Compression Techniques

Lossy compression reduces file size by discarding information that the human eye is less likely to notice. The decompressed image is not pixel-identical to the original, but it looks very similar. Lossy compression exploits all three types of redundancy, including psychovisual redundancy.

Color Space Transformation

The first step in most lossy compression is to transform the image from RGB to a color space that separates luminance (brightness) from chrominance (color). The YCbCr color space is the most common:

• Y (luminance): The brightness of each pixel.
• Cb (chrominance-blue): The blue-yellow color difference.
• Cr (chrominance-red): The red-cyan color difference.

The reason for this transformation is that the human eye is more sensitive to luminance than chrominance. We can see fine detail in brightness changes but not in color changes. This means the chrominance channels can be downsampled (reduced in resolution) without visible quality loss.

Chrominance Downsampling

After the color space transformation, the chrominance channels are typically downsampled by a factor of 2 in each direction (4:2:0 subsampling). This means that for every 2x2 block of pixels, the luminance is stored at full resolution but the chrominance is stored as a single average value. This reduces the chrominance data by 75 percent with virtually no visible quality loss, because the eye cannot resolve color detail at this level.

The Discrete Cosine Transform (DCT)

The DCT is the heart of JPG compression. After color space transformation and chrominance downsampling, each color channel is divided into 8x8 blocks of pixels. The DCT transforms each block from the spatial domain (pixel values) to the frequency domain (how much of each spatial frequency is present in the block).

The DCT produces 64 coefficients for each 8x8 block. The first coefficient (the DC coefficient) represents the average brightness of the block. The remaining 63 coefficients (the AC coefficients) represent the variation within the block at increasing frequencies. Low-frequency coefficients represent gradual changes; high-frequency coefficients represent fine detail.

The key insight is that most of the visual information is concentrated in the low-frequency coefficients. The high-frequency coefficients, which represent fine detail that the eye is less sensitive to, are often small and can be discarded or reduced with minimal visible impact.

Quantization

Quantization is where the actual data loss happens. Each DCT coefficient is divided by a quantization value and rounded to the nearest integer. Large quantization values cause more coefficients to round to zero, which means more information is discarded. The quantization values are determined by a quantization table, which assigns larger values (more discard) to high-frequency coefficients and smaller values (less discard) to low-frequency coefficients.

The quality setting in JPG controls the quantization table. A high quality setting uses small quantization values, preserving more detail. A low quality setting uses large quantization values, discarding more detail.

After quantization, many high-frequency coefficients are zero. The quantized coefficients are then arranged in a zigzag pattern (from low to high frequency) and run-length encoded to take advantage of the long runs of zeros at the end.

Entropy Coding

The final step is entropy coding (Huffman or arithmetic coding), which encodes the quantized coefficients efficiently by assigning shorter codes to more common values.

How PNG Compression Works

PNG uses lossless compression, so it does not use the DCT or quantization. Instead, PNG uses:

1. Filtering (predictive coding): Each row of pixels is filtered using one of five filter types (None, Sub, Up, Average, Paeth). The filter predicts each pixel from neighboring pixels and stores the difference. This makes the data more compressible.
2. DEFLATE compression: The filtered data is compressed using the DEFLATE algorithm (the same algorithm used by zip and gzip), which combines dictionary coding and Huffman coding.

PNG is lossless, so the compression ratio is limited by the actual redundancy in the image. Images with large areas of solid color compress very well; noisy photographs compress poorly.

How WebP Compression Works

WebP uses techniques from the VP8 video codec:

Lossy WebP

1. Block-based prediction: The image is divided into blocks (up to 16x16 pixels). Each block is predicted from previously encoded blocks using one of several prediction modes.
2. Transform coding: The prediction residual (the difference between the prediction and the actual pixels) is transformed using a Walsh-Hadamard transform or a DCT, depending on the block size.
3. Quantization: The transform coefficients are quantized, similar to JPG.
4. Entropy coding: The quantized coefficients are encoded using arithmetic coding.

The key difference from JPG is the block-based prediction, which is more efficient than the DCT alone, especially for images with predictable patterns.

Lossless WebP

Lossless WebP uses:

1. Spatial prediction: Each pixel is predicted from up to 10 neighboring pixels.
2. Color space transformation: The color channels can be transformed to reduce correlation.
3. Color cache: A cache of recently seen colors is used to encode repeated colors efficiently.
4. Entropy coding: Arithmetic coding with a custom entropy coder.

How AVIF Compression Works

AVIF uses the AV1 video codec, which uses even more advanced techniques:

1. Large block sizes: AV1 supports block sizes up to 128x128 pixels, larger than JPG's 8x8 or WebP's 16x16. Larger blocks can capture more redundancy.
2. Multiple prediction modes: AV1 supports many more prediction modes than VP8, including directional prediction, palette prediction, and compound prediction (combining multiple predictions).
3. Transform selection: AV1 can choose from multiple transform types (DCT, ADST, identity) for each block, selecting the one that best matches the content.
4. Quantization: Advanced quantization with per-coefficient quantization parameters.
5. Entropy coding: Advanced arithmetic coding with multi-symbol coding.
6. Film grain synthesis: AV1 can model film grain separately from the image content, preserving the look of film-originated content efficiently.

These advanced techniques are why AVIF achieves better compression than JPG and WebP — it can represent more types of image content more efficiently.

The Tradeoff: Compression Ratio vs Quality and Speed

All image compression involves tradeoffs between three factors:

1. Compression ratio: How much the file is reduced. Higher is better for file size but usually means more quality loss or slower encoding.
2. Visual quality: How close the decompressed image looks to the original. Higher is better for quality but usually means larger files.
3. Encoding and decoding speed: How fast the image can be compressed and decompressed. Faster is better for performance but may mean lower compression ratio or quality.

Different formats make different tradeoffs:

• JPG: Fast encoding and decoding, good compression ratio, moderate quality at high compression. The oldest and most widely supported format.
• PNG: Fast encoding and decoding, moderate compression ratio (limited by lossless constraint), perfect quality. The standard for lossless web images.
• WebP: Moderate encoding speed, good compression ratio, good quality. A modern, versatile format.
• AVIF: Slow encoding, excellent compression ratio, excellent quality. The most advanced format, with the best compression but the slowest encoding.

Why Compression Is Not Perfect

No compression algorithm can compress every image. Some images are inherently incompressible — random noise, for example, has no redundancy to exploit. For these images, compression may not reduce the file size at all, or may even increase it.

More importantly, lossy compression always involves a quality tradeoff. The question is not whether quality is lost, but whether the loss is visible. A well-designed compression algorithm discards information that the eye is least likely to notice, making the loss invisible at reasonable compression ratios. But at extreme compression ratios, the loss becomes visible — blocky artifacts, smeared details, color shifts, and ringing around edges.

Conclusion

Image compression is a remarkable achievement of computer science and mathematics. By exploiting spatial, spectral, and psychovisual redundancy, compression algorithms can reduce image files by 90 to 99 percent with no visible quality loss. The key techniques — color space transformation, the discrete cosine transform, quantization, predictive coding, and entropy coding — work together to identify and eliminate redundancy at every level. Understanding how these algorithms work helps you make better decisions about format choice, quality settings, and optimization strategies, and gives you a deeper appreciation for the technology that makes the visual web possible.