Image Compression Algorithms Explained — How JPEG, PNG, WebP & AVIF Actually Work

Image compression is one of computing's greatest achievements. A single uncompressed 4K photograph (3840 × 2160 pixels, 24-bit color) requires 24.9 megabytes of storage. After JPEG compression, that same image is typically 500 KB to 2 MB — a 90-95% reduction — with quality that's visually indistinguishable from the original for most viewers.

This guide explains how the major image compression algorithms work under the hood. Understanding these algorithms helps you make better decisions about which format to use, what quality settings to choose, and how to optimize images for different use cases.

The Two Categories: Lossy vs. Lossless

Lossless Compression

Lossless compression reduces file size without losing any information. The decompressed image is bit-for-bit identical to the original. Used by PNG, GIF, TIFF (optionally), and WebP (lossless mode).

How it works conceptually: Find patterns and redundancy in the data and represent them more efficiently. If a row of pixels has 100 consecutive white pixels, store "100 white" instead of "white, white, white, white..." repeated 100 times. The actual algorithms are more sophisticated, but the principle is the same.

Typical compression ratio: 2:1 to 5:1 (50-80% reduction)

Lossy Compression

Lossy compression achieves much higher compression by permanently discarding information that the human visual system is less sensitive to. The decompressed image is an approximation of the original — not identical, but ideally indistinguishable to the human eye. Used by JPEG, WebP (lossy mode), AVIF, and HEIC.

How it works conceptually: The human eye is much more sensitive to brightness changes than color changes, and more sensitive to gradual gradients than high-frequency detail. Lossy algorithms exploit these perceptual limitations, removing information that most viewers can't perceive.

Typical compression ratio: 10:1 to 50:1 (90-98% reduction) depending on quality setting

JPEG Compression (1992)

JPEG (Joint Photographic Experts Group) was standardized in 1992 and remains the most widely used image format. Understanding JPEG compression reveals the core concepts that all modern lossy codecs build upon.

Step 1: Color Space Conversion (RGB → YCbCr)

JPEG converts the image from RGB (Red, Green, Blue) to YCbCr:

• Y (Luminance): Brightness information
• Cb (Chrominance Blue): Blue-yellow color difference
• Cr (Chrominance Red): Red-cyan color difference

This separation exploits a key property of human vision: we're far more sensitive to brightness than to color. The Y channel preserves full detail, while the Cb and Cr channels can be reduced with minimal perceptible quality loss.

Step 2: Chroma Subsampling

The color channels (Cb and Cr) are typically downsampled by 50% in each dimension (called 4:2:0 subsampling). This means 4 pixels share a single color value while each retains its own brightness value.

Result: The image data is already reduced by 50% before any further compression, and most people can't tell the difference.

Step 3: Block Division (8×8 DCT)

The image is divided into 8×8 pixel blocks (64 pixels each). Each block is processed independently through the Discrete Cosine Transform (DCT).

The DCT converts pixel values (spatial domain) into frequency coefficients (frequency domain). The output is still 64 values per block, but now they represent frequency components rather than pixel colors:

• The top-left coefficient (DC component) represents the average brightness of the block
• Coefficients toward the bottom-right represent increasingly fine detail (high-frequency components)

Step 4: Quantization (The Lossy Step)

This is where information is actually discarded. Each DCT coefficient is divided by a value from a quantization table, then rounded to the nearest integer. Higher-frequency coefficients are divided by larger numbers, so they round to zero more often.

The quality setting in JPEG controls the quantization table values:

• Quality 100: Minimal quantization — large file, nearly lossless
• Quality 85: Moderate quantization — good balance of quality and size
• Quality 60: Aggressive quantization — visible artifacts but much smaller file
• Quality 20: Extreme quantization — significant artifacts, very small file

After quantization, many coefficients (especially high-frequency ones) become zero. A block that had 64 non-zero values might now have only 5-15 non-zero values.

Step 5: Entropy Coding (Huffman/Arithmetic)

The quantized coefficients are further compressed using lossless entropy coding. The non-zero values are encoded using Huffman coding (or arithmetic coding in newer implementations), which assigns shorter codes to more common values.

The long runs of zeros from quantization are encoded very efficiently using run-length encoding — "15 zeros followed by a 3" is stored in just a few bytes.

Why JPEG Has Block Artifacts

At low quality settings, you can see the 8×8 block boundaries — the image looks like a mosaic of slightly different-colored squares. This happens because each block is compressed independently, so adjacent blocks can have visibly different quantization results. This is JPEG's signature artifact and why it's called "JPEG compression" when something looks blocky.

PNG Compression (1996)

PNG (Portable Network Graphics) is completely lossless. The decompressed image is identical to the original. PNG achieves compression through two stages:

Stage 1: Predictive Filtering

Before compression, each row of pixels is filtered using one of five strategies:

• None: Raw pixel values
• Sub: Difference from the pixel to the left
• Up: Difference from the pixel above
• Average: Difference from the average of left and above pixels
• Paeth: Uses a more complex predictor based on left, above, and upper-left pixels

The encoder chooses the filter that produces the smallest values for each row. In areas of smooth gradients or solid color, the differences between adjacent pixels are near zero — which compresses much better than the raw pixel values.

Stage 2: DEFLATE Compression

The filtered data is compressed using DEFLATE — the same algorithm used in ZIP files. DEFLATE combines LZ77 (finding and referencing repeated sequences) with Huffman coding (assigning shorter codes to more frequent values).

Why PNG Files Are Bigger Than JPEG

PNG preserves every pixel exactly, which means it must encode all the high-frequency detail that JPEG discards. For photographic images, PNG files are typically 3-10x larger than equivalent JPEG files. However, for images with large areas of solid color (screenshots, logos, diagrams, pixel art), PNG's predictive filtering is extremely effective and files can be surprisingly small.

WebP Compression (2010)

WebP, developed by Google, combines concepts from both JPEG and PNG while adding significant improvements:

Lossy WebP

Based on VP8 video codec technology:

• Variable block sizes: Instead of JPEG's fixed 8×8 blocks, WebP uses 4×4 to 16×16 blocks, adapting to image content. Large smooth areas use big blocks (fewer coefficients); detailed areas use small blocks (more precision).
• Intra-prediction: Each block can be predicted from neighboring blocks before compression. The encoder only needs to store the difference between prediction and actual values.
• Loop filtering: A deblocking filter smooths block boundaries, virtually eliminating the visible block artifacts that plague JPEG at low quality.
• Boolean arithmetic coding: More efficient entropy coding than JPEG's Huffman coding.

Result: 25-35% smaller files than JPEG at equivalent visual quality.

Lossless WebP

• Uses spatial prediction (similar to PNG filtering but with more prediction modes)
• Color cache: Stores recently used colors for efficient encoding of repeated colors
• Backward reference: Finds and references repeated pixel patterns anywhere in the image (not just adjacent)
• Huffman coding with a custom alphabet

Result: 26% smaller than PNG on average.

AVIF Compression (2019)

AVIF (AV1 Image File Format) is based on the AV1 video codec — the most advanced open-source video codec available:

• Block sizes up to 128×128: Much larger than WebP's 16×16, allowing more efficient encoding of large smooth areas
• 67 intra-prediction modes: vs. JPEG's 0 and WebP's 13. More prediction modes mean the encoder can find a closer prediction, leaving less residual to encode.
• Multi-symbol arithmetic coding: State-of-the-art entropy coding
• Film grain synthesis: Instead of encoding grain/noise pixel by pixel (expensive), AVIF can describe the grain statistically and re-synthesize it during decoding
• 10-bit and 12-bit color depth: Supports HDR content natively
• Excellent at low bitrates: AVIF particularly shines at aggressive compression where JPEG and WebP show visible artifacts

Result: 50% smaller than JPEG and 20% smaller than WebP at equivalent quality. However, encoding is significantly slower.

Practical Comparison

Format	Typical Photo (1920×1080)	Quality	Speed (Encode)
Uncompressed (BMP)	6.2 MB	Perfect	N/A
PNG (lossless)	3.8 MB	Perfect	Fast
JPEG Q85	350 KB	Excellent	Very fast
WebP Q80	240 KB	Excellent	Fast
AVIF Q60	180 KB	Excellent	Slow

Choosing the Right Format

• Photographs for the web: WebP (best balance of quality, size, and browser support) or JPEG (universal compatibility). Use ImgLink's converter to create WebP versions.
• Screenshots, diagrams, logos: PNG (lossless, preserves sharp edges and text)
• Maximum compression: AVIF (if your target audience uses modern browsers)
• Transparency needed: PNG or WebP (JPEG does not support transparency)
• Animation: WebP or GIF (animated)

For web publishing, the optimal workflow is: optimize your image using the ImgLink Image Compressor, convert to WebP or the best next-gen format for your audience, and upload to ImgLink for permanent hosting with CDN delivery.

Apply This Workflow on ImgLink

ImgLink is built for the exact workflow covered in this guide: fast uploads, permanent direct links, Cloudflare CDN delivery, and no-signup sharing when you need to move quickly. If you want to turn the advice above into a repeatable publishing system, start with one canonical hosted image URL and reuse it across docs, posts, forums, and social channels.

Recommended Next Steps

Use these related resources to keep building the same workflow across adjacent image-hosting topics:

• Compress images online
• WebP hosting
• Free image converter
• PostImage alternative
• ImgBB alternative