Image Compression Explained - How JPEG, PNG, and WebP Work

What Is Image Compression - Two Approaches to Reducing File Size

Image compression is the technology of reducing image file sizes. Since it directly impacts web page loading speed, it's essential knowledge for frontend developers and designers. According to HTTP Archive research, images account for approximately 50% of total web page transfer size, making image optimization one of the most effective means of performance improvement.

Compression methods fall into two broad categories:

• Lossless compression: A method that can perfectly reconstruct the original data after decompression. PNG is the prime example, compressing by eliminating data redundancy. It's ideal for images with sharp color boundaries like text and diagrams. Compression ratios typically range from 2:1 to 10:1 depending on image content.
• Lossy compression: A method that significantly reduces file size by discarding information imperceptible to the human eye. JPEG is the prime example, suited for natural photographs. Once compressed, the original data cannot be recovered, but compression ratios are adjustable from 10:1 to 100:1.

The choice between these methods depends on the image's purpose and required quality. For web use, the balance between display quality and file size is the most critical decision factor. Lossy compression leveraging human visual characteristics can reduce photo sizes to levels where quality degradation is barely perceptible, making it highly effective from a web performance perspective.

How JPEG Works - Frequency Transform via DCT

JPEG is a lossy compression format built around the Discrete Cosine Transform (DCT). Standardized in 1992, it has reigned as the de facto standard for photo formats for over 30 years. The compression process proceeds through these steps:

• Color space conversion: Converts from RGB to YCbCr, separating luminance (Y) from chrominance (Cb, Cr). Since human eyes are sensitive to luminance changes but less so to color differences, chroma subsampling (4:2:0) reduces data volume by up to 50%.
• Block splitting and DCT: The image is divided into 8x8 pixel blocks, and DCT is applied to each block. Spatial information is transformed into the frequency domain, separating low-frequency components (gradual changes) from high-frequency components (fine details). DCT is a reversible transform that loses no information - no degradation occurs at this stage.
• Quantization: DCT coefficients are divided by a quantization table, aggressively rounding high-frequency components to zero. Information is lost at this stage, but the quality parameter (1-100) controls quantization strength. Quality around 85 is a practical balance point for web use. Separate quantization tables are used for luminance and chrominance, with stronger quantization applied to chrominance channels.
• Entropy coding: Post-quantization coefficients are converted to a 1D array via zigzag scanning, then compressed using run-length encoding and Huffman coding to produce the final file. Consecutive zeros in high-frequency components are efficiently encoded, so more zeros from quantization means better compression.

JPEG's weakness is visible block noise (mosquito noise) on images with sharp edges like text or line art. Processing in 8x8 blocks creates discontinuities at block boundaries. It also doesn't support transparency (alpha channel), making it unsuitable for images requiring transparent backgrounds.

How PNG Works - Filtering and Deflate

PNG is a lossless compression format that perfectly preserves the original image data after decompression. Created in 1996 to circumvent GIF patent issues, it has become the standard lossless image format on the web. PNG compression consists of two stages.

Filtering: For each pixel row, the optimal filter is selected from 5 types (None, Sub, Up, Average, Paeth). Filters calculate differences from adjacent pixels, increasing data redundancy. For example, in areas of nearly uniform color like blue sky, applying the Sub filter makes differences approach zero, dramatically improving compression efficiency. The Paeth filter calculates predicted values from three pixels (left, above, upper-left) and is the most sophisticated filter, effective for images with gradients.

Deflate compression: After filtering, Deflate compression combining LZ77 algorithm and Huffman coding is applied. LZ77 detects repeated byte sequences and replaces them with distance-length references, while Huffman coding uses variable-length codes based on frequency. The sliding window size (maximum 32KB) affects compression ratio - larger windows can reference more distant patterns but increase processing time.

PNG supports alpha channels (transparency) and achieves high compression ratios for images with few colors or sharp edges. However, for photographs with complex color variations, file sizes can be 3-5x larger than JPEG. The distinction between PNG-8 (256 colors, palette mode) and PNG-24/32 (full color) is important - PNG-8 is ideal for icons and logos. PNG-8 can include alpha channels, but transparency is expressed only within the 256-color limitation.

WebP Technology - Next-Generation Format Based on VP8

WebP is a format developed by Google in 2010 that supports both lossy and lossless compression modes. The lossy mode applies VP8 video codec technology to still images, achieving 25-34% smaller file sizes compared to JPEG. Designed primarily to improve web performance, it offers an excellent balance of encode/decode speed and compression efficiency.

Lossy WebP features: Like JPEG, it uses block-based predictive coding, but with 4x4 pixel intra-prediction that reduces block boundary artifacts. Four prediction modes are available - horizontal, vertical, DC (average), and TrueMotion - with the optimal mode selected per block. It also employs Boolean Arithmetic Coding, achieving higher compression efficiency than Huffman coding. Alpha channel support allows transparent photos in a single file.

Lossless WebP features: Uses a proprietary algorithm combining spatial prediction, color cache, LZ77 back-references, and Huffman coding to produce files approximately 26% smaller than PNG. The color cache remembers recently used colors and efficiently encodes their reoccurrence. Multiple preprocessing steps exploit image-specific redundancy, including palette transformation and delta storage in the green channel.

As of 2024, all major browsers (Chrome, Firefox, Safari, Edge) support WebP, and practical compatibility issues are largely resolved. However, support in image editing software varies, and depending on your workflow, you may need to use JPEG/PNG alongside WebP. Encoding speed is comparable to JPEG and significantly faster than AVIF.

Compression Quality vs File Size - Finding Optimal Quality Settings

In lossy compression, the quality parameter determines the tradeoff between file size and image quality. However, the relationship between quality value and file size is non-linear and varies significantly based on image content. Here's practical knowledge for finding optimal quality settings.

JPEG quality settings: Reducing quality from 100 to 95 cuts file size by 30-50% with virtually imperceptible visual difference. The 95-to-85 range yields another 30-40% reduction at a level where degradation is unnoticeable without careful comparison. From 85 to 75, significant size reduction is achieved but banding (stepping) becomes visible in gradient areas. Below 75, quality degradation becomes pronounced and is not recommended for web use.

WebP quality settings: WebP's quality parameter uses the same 0-100 range as JPEG but achieves higher compression efficiency at equivalent values. WebP quality 75 delivers visual quality equivalent to JPEG quality 85 at a smaller file size. WebP also has a unique method parameter (0-6) where higher values spend more encoding time to improve compression ratio.

Objective quality assessment with SSIM: SSIM (Structural Similarity Index) is widely used as a quality metric that closely matches human perception. SSIM above 0.95 is considered imperceptible to most viewers. In automated pipelines, setting a target SSIM and auto-adjusting quality parameters is effective. Use cjpeg's -quality option or cwebp's -q option to specify quality, and measure SSIM with the dssim command to search for optimal values.

Image format reference books are available on Amazon

Practical Format Selection - Choosing the Right Format by Use Case

Here's a summary of format selection criteria. In practice, you need to consider not just image type but also delivery environment and workflow.

• Photos and natural images: Use WebP (lossy) as the primary choice with JPEG as fallback. Quality 75-85 maintains a level where visual degradation is barely perceptible. For AVIF-capable browsers, an additional 30-50% size reduction is possible.
• Logos, icons, and graphics: Use PNG-8 for low color counts, WebP (lossless) or PNG-24 for full-color with transparency. Prefer SVG when applicable - as a vector format, SVG renders sharply at any resolution.
• Screenshots: PNG is optimal for screenshots containing text. JPEG introduces mosquito noise around text that reduces readability. However, if file size is large, converting to WebP (lossless) can achieve 20-30% reduction.
• Animation: WebP animation is effective as a GIF replacement, achieving roughly 1/3 the file size at equivalent quality. For short videos, MP4 or WebM is even more efficient.
• Responsive images: Combine HTML's <picture> element with srcset attribute to serve optimal images based on device screen width and format support. A build pipeline auto-generating AVIF, WebP, and JPEG is ideal.

Ultimately, the most reliable approach is testing multiple formats on your actual images and visually confirming the quality-to-size balance. For automation, build logic that routes images to formats based on characteristics like color count, edge density, and transparency requirements. Libraries like Sharp or ImageMagick make automated multi-format generation straightforward during build time.