Why WebP Beats JPEG and PNG: Deep Dive into Its Compression Mechanics and Android Support

Background

Images consume a large portion of network traffic, especially on mobile. Reducing image size without visual loss saves bandwidth and battery.

Traditional formats (JPEG, PNG, GIF) have been optimized, so Google introduced WebP in 2010, offering lossless and lossy compression with alpha support.

Lossless WebP reduces PNG size by ~26%; lossy WebP achieves 25‑34% size reduction compared to JPEG at equal SSIM, and supports transparent lossy images at about one‑third the size of PNG.

Dynamic WebP (2014) adds animation support, offering richer colors and smaller size than GIF.

Major internet services have adopted WebP, yielding bandwidth savings and faster page loads (examples: YouTube thumbnails, Google Play, Tencent News, etc.).

Principles

Lossy WebP

Based on VP8 predictive coding, the pipeline includes format conversion, macroblock partitioning, prediction, FDCT, quantization, Z‑ordering, DPCM, run‑length coding, and Boolean arithmetic entropy coding.

Key prediction modes: H_PRED, V_PRED, DC_PRED, TM_PRED.

FDCT transforms spatial pixels to frequency coefficients; quantization reduces high‑frequency coefficients; Z‑ordering groups zeros; DPCM encodes DC coefficients; run‑length coding compresses repeated zeros; Boolean arithmetic coding provides 5‑10% extra compression.

Additional steps include adaptive block splitting and loop filtering.

Lossless WebP

Uses spatial prediction, color‑space conversion, palette usage, multi‑pixel packing, and alpha replacement, with an improved LZ77‑Huffman entropy coder.

Lossy WebP with Alpha

Combines lossy RGB compression with lossless alpha compression, yielding about 22% overhead compared to opaque lossy WebP, but still 60‑70% smaller than PNG with alpha.

Animated WebP

Stores each frame’s rectangle, duration, blending and disposal methods, similar to GIF/APNG, but with richer color and smaller size.

File Structure

Header

RIFF container, file size, "WEBP" signature.

Lossy WebP

Contains a VP8 chunk with header and VP8 bitstream.

Lossless WebP

Contains a VP8L chunk with similar fields.

Extended Features

VP8X chunk indicates used features.

Optional ICC, ANIM, EXIF, XMP chunks.

Static images have one frame; animated images have multiple frames.

Comparison with Other Formats

Lossy WebP vs JPEG: 25‑34% size reduction at comparable SSIM.

Lossless and lossy‑with‑alpha WebP vs PNG: most images become smaller; encoding is slower and uses more memory, but decoding speed is comparable.

Animated WebP vs GIF: supports 24‑bit color and 8‑bit alpha, combines lossy and lossless modes, reduces size by up to 64% (lossy) or 19% (lossless), and decodes ~57% faster.

Animated WebP vs APNG: generally smaller, though some APNG sequences can be larger.

Support

Browser support is growing; Android 4.0+ natively supports static WebP, while iOS requires third‑party libraries. Animated WebP is supported via Facebook’s Fresco library (API 9+).

Conclusion

WebP offers higher compression than JPEG/PNG and richer features than GIF, but its performance for animated images can be unstable, and Android support for animation remains limited.