WebP vs PNG: Lossless Compression and Transparency Compared

816 words 5 mins read

Compare WebP lossless and PNG on file size, transparency quality, encoding time, and tool support for UI assets, logos, screenshots, and graphics.

When your images require lossless fidelity or crisp transparency — UI elements, logos, screenshots, and illustrations — WebP lossless is a compelling alternative to PNG. Both formats preserve every pixel of the original, but WebP’s VP8L codec achieves higher compression ratios than PNG’s DEFLATE algorithm for the same visual output, which means smaller files without any quality trade-off.

File Size #

Google’s corpus study found that WebP lossless is 26% smaller than PNG on average across a diverse set of web images. For images that contain large flat-colour areas — such as interface screenshots, icons on white backgrounds, or vector-originated graphics — the savings can exceed that average because VP8L’s colour-indexing and spatial prediction transforms exploit repetition more aggressively than DEFLATE.

For the full breakdown of WebP lossless compression techniques, including near-lossless mode, see the Lossless Compression page.

The savings are not uniform. Highly complex photographic images stored as PNG see modest lossless WebP gains, whereas synthetic graphics with limited colour palettes can shrink by 30–40%.

Transparency Quality #

Both WebP lossless and PNG support 8-bit alpha channels, giving you 256 levels of transparency per pixel — enough for smooth anti-aliased edges on UI components and logos.

WebP stores its alpha channel as a separate VP8L-compressed plane, which means the alpha data is compressed independently with the same lossless algorithm used for colour. In practice this produces sharp, artifact-free edges that are indistinguishable from PNG transparency at equivalent content.

PNG remains the better choice when you need 16-bit colour depth (65,536 levels per channel). WebP lossless is limited to 8 bits per channel. If your workflow involves medical imaging, scientific visualisation, print pre-press, or HDR editing, keep PNG.

Feature Comparison #

Lossless compression — WebP: supported. PNG: supported.
Alpha transparency — WebP: supported. PNG: supported.
Animation — WebP: supported. PNG: APNG (partial).
Lossy mode — WebP: supported. PNG: not supported.
HDR / 16-bit depth — WebP: not supported. PNG: supported.
Universal browser support — WebP: 95%+ globally. PNG: 100%.

WebP has a clear advantage in animation and lossy fallback flexibility. PNG has the edge in deep colour and universal compatibility. APNG — the animated PNG extension — is broadly supported in modern browsers, but it is not part of the core PNG specification, which makes it a less reliable target in mixed tooling environments.

When to Keep PNG #

16-Bit Colour Depth #

Medical imaging, scientific data visualisation, and HDR photography workflows require more than 8 bits per channel. WebP lossless tops out at 8 bits; PNG supports 16-bit depth natively.

Tooling Without WebP Support #

If your design tools, CMS, image CDN, or asset pipeline cannot read or write WebP, introducing it creates friction. Evaluate tooling gaps before committing to a migration.

Zero Compatibility Risk #

For assets that must render correctly on every device and browser with absolute certainty — think email images, embedded report graphics, or partner-distributed content — PNG’s 100% support coverage eliminates any edge-case risk.

Strict Lossless Workflows #

Some archival and forensic imaging workflows require a well-known, auditable format. PNG’s long track record and widespread open-source tooling make it easier to verify bit-for-bit fidelity across the entire pipeline.

Near-Lossless as a Middle Ground #

If strict lossless compression is not an absolute requirement but you still want visually identical results, consider WebP’s near-lossless mode. The cwebp -near_lossless flag applies a small spatial noise-shaping step before lossless encoding, which makes flat areas and smooth gradients compress much more efficiently while remaining indistinguishable from the original at normal viewing distances.

# Strict lossless
cwebp -lossless logo.png -o logo.webp

# Near-lossless (level 40 — aggressive, visually identical)
cwebp -near_lossless 40 logo.png -o logo.webp

# Near-lossless (level 80 — conservative, very close to strict)
cwebp -near_lossless 80 logo.png -o logo.webp

The -near_lossless value (0–100) controls how much pre-processing noise shaping is applied. A value of 0 applies the most aggressive pre-processing for maximum compression; 100 is equivalent to strict lossless.

How does near-lossless work internally? Near-lossless mode runs a quantisation step on the image before handing it to the VP8L lossless encoder. This step rounds pixel values in smooth regions to nearby values that compress more efficiently, without introducing the blocking or ringing artifacts that characterise lossy compression. The result is a file that a pixel-level diff will flag as modified, but that a human observer — or a quality metric like SSIM — will rate as visually identical to the source.

Measuring the Difference #

Run a quick comparison on your own assets to see how WebP lossless stacks up against PNG in your specific context:

# Convert PNG to WebP lossless and compare sizes
cwebp -lossless ui-screenshot.png -o ui-screenshot.webp
ls -lh ui-screenshot.png ui-screenshot.webp

# Try near-lossless for a smaller file
cwebp -near_lossless 40 ui-screenshot.png -o ui-screenshot-nl.webp
ls -lh ui-screenshot.png ui-screenshot.webp ui-screenshot-nl.webp

Use the output to validate that the percentage savings on your image corpus match or exceed the 26% average from Google’s study before planning a full migration.

In the opposite direction, if you have WebP files that need to become PNG — for design tools or strict-lossless workflows — you can convert WebP to PNG online in your browser.

Was this page helpful?