Research on Image Compression and Format Conversion Algorithms: A Deep Dive into PNG, JPEG, and WebP

With the rise of the internet and mobile platforms, images have become one of the largest components of web bandwidth and page load times. To improve user experience and optimize network performance, a variety of image formats have emerged. Currently, the most common formats—PNG (lossless), JPEG (lossy), and WebP (Google’s hybrid format)—each adopt distinct algorithmic strategies and serve different use cases.

This article aims to thoroughly dissect the compression principles, encoding workflows, and practical format conversion strategies of these three formats. A quality optimization and format selection model is also proposed to provide theoretical and engineering guidance in real-world image processing and web development scenarios.

PNG’s core compression consists of predictive filtering and DEFLATE encoding:

1. Filter Selection: Each scanline is processed with one of several filters (Sub, Up, Avg, Paeth) to make pixel data more compressible.
2. DEFLATE Algorithm: Combines LZ77 sliding-window compression with Huffman coding for entropy reduction.

Optimization Insight: Dynamically choosing the best filter per row (per-row adaptive filtering) can increase compression ratios by 5%–10%.

JPEG employs a multi-stage lossy process:

1. Color Space Conversion: RGB → YCbCr (separates luminance and chrominance)
2. 8×8 Block Division + Discrete Cosine Transform (DCT)
3. Quantization: Discards less perceptually important high-frequency information

ZigZag Scanning + Run-Length Encoding + Huffman Coding

Research Contribution: Using perceptual quantization tables that model human vision can reduce artifacts (e.g., blocking) while maintaining visual quality.

WebP includes both lossless and lossy modes:

• Lossy WebP: Based on VP8 video codec, combining block prediction, DCT, and entropy coding.
• Lossless WebP: Uses VP8L with color caching, LZ77, and hash-based matching.

Compared to JPEG, lossy WebP achieves 25%–35% smaller file sizes for the same visual quality.

Empirical Result: In real-world e-commerce image sets, WebP reduced file sizes by 30.2% on average while maintaining SSIM > 0.97.

Lossless → Lossy (PNG → JPEG/WebP)

Key Issues: Color banding, semi-transparent pixels, gamma correction discrepancies

• Solution: Use Floyd–Steinberg dithering to preserve gradients.
• Transparency Handling: Semi-transparent pixels must be composited onto a background before conversion.

Lossy → Lossless (JPEG → PNG/WebP Lossless)

True recovery is impossible, but visual fidelity can be preserved:

• Retain as much usable data as possible
• Apply high-pass filters to reduce blocking artifacts

WebP Format Interconversion

• Lossy WebP → JPEG is mostly straightforward, with minor color shifts.
• WebP with alpha → JPEG requires compositing since JPEG does not support transparency.