WebP Lossless Compression: How It Compares to PNG

WebP lossless is not just "WebP"

WebP is often described as a single format, but it actually supports two completely independent compression modes: lossy (based on VP8 intra-frame coding, similar to JPEG) and lossless (based on WebP Lossless, a separate specification). The two modes share a container format but have nothing in common in their compression pipeline.

When comparing WebP to PNG for lossless use cases, you need to compare WebP lossless to PNG. The lossy WebP comparison with PNG is apples and oranges — of course a lossy file is smaller, but it has discarded information that PNG preserved.

How WebP lossless compression works

WebP lossless uses a series of image transforms applied before entropy coding. Each transform is optional and is only applied if it reduces the eventual file size:

Subtract green transform: For each pixel, the green channel value is subtracted from the red and blue channels. Natural images have high correlation between colour channels, so this reduces the value range that the subsequent compressor must handle.

Colour transform: Applies a per-block linear transformation to decorrelate the colour channels further. Like the subtract-green transform, this exploits the statistical correlation between R, G, and B values in real images.

Subtract-green-from-palette transform: For palette-mode images, this applies the subtract-green transform to the palette entries.

Predictor (spatial) transform: Analogous to PNG's prediction filters, but more sophisticated. The image is divided into blocks, and each block uses one of 14 predictor modes. The predictor modes include all five PNG filter types plus more complex combinations. Crucially, different predictors can be used for different blocks (not just rows), which allows the algorithm to adapt to local image structure more precisely.

Colour indexing (palette) transform: When the number of distinct colours is small, the image is indexed against a palette. For images with very few colours, packing multiple pixels into a single byte further reduces data size.

After transforms, the residual data is entropy-coded using a spatial variant of Huffman coding where different image regions use different Huffman trees. This is more adaptive than PNG's single Huffman tree per DEFLATE block.

WebP lossless vs PNG: the numbers

Google's own benchmarks show WebP lossless achieving 14–45% smaller files than PNG across a variety of image types. In practice:

• For photographs saved as PNG (a use case that favours neither format — you should use JPEG or lossy WebP for photos), WebP lossless typically saves 20–30%.
• For screenshots and UI artwork with flat colours, WebP lossless typically saves 15–20% over an optimised PNG.
• For small icons and simple graphics, the difference is more variable — sometimes PNG wins for very small images due to header overhead.

The key qualifier is "optimised PNG". Many PNG files in the wild are saved with default (mid-level) compression settings. Comparing these against WebP lossless overstates WebP's advantage. A fair comparison uses a well-optimised PNG (maximum DEFLATE, optimal filter selection) against WebP lossless.

Browser and platform support

WebP is supported by all major browsers as of 2025: Chrome (since 2011), Firefox (since 2019), Edge (since 2018), and Safari (since 14.0, released 2020). Opera, Samsung Internet, and all Chromium-based browsers support it. For web delivery, there is no longer a meaningful compatibility reason to avoid WebP lossless.

Outside browsers, support is patchier. Windows 11 can display WebP natively in Explorer and the Photos app; Windows 10 requires the WebP Image Extensions from the Microsoft Store. macOS Preview supports WebP since macOS 11. Some older image editing software does not support WebP — if your images need to be editable in a variety of tools, keep PNG as your master format and serve WebP to browsers.

When to switch from PNG to WebP lossless

WebP lossless is the right choice when:

• You are delivering images to web browsers (universal support).
• File size matters — CDN costs, page load speed, mobile data budgets.
• You need pixel-perfect lossless quality (screenshots, UI assets, logos).
• You are already serving images from a modern stack that can set the correct Content-Type: image/webp header.

Stick with PNG when:

• The images need to be editable in tools that do not support WebP.
• You are distributing source files to clients or collaborators whose software compatibility is unknown.
• You need maximum compatibility with non-browser environments (print workflows, legacy CMS systems).

Serving both formats with the HTML picture element

For maximum compatibility without sacrificing the savings, serve WebP to supporting browsers and PNG as a fallback:

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.png" alt="Description">
</picture>

The browser picks the first <source> it supports. Modern browsers get WebP; older environments fall back to PNG. This is the best-of-both-worlds approach.

You can convert your PNGs to lossless WebP (and keep whichever is smaller) at compressanimage.com — it tests both options automatically and returns the better result.