WebP Transparency: The Alpha Channel in Both Modes

WebP supports an 8-bit alpha channel in both lossy and lossless modes. This is unique among common web formats: JPEG has no transparency, and PNG has no lossy mode. A single WebP file can therefore deliver a transparent photograph or a transparent logo, both smaller than the format it replaces. This guide explains how WebP stores transparency.

For the format overview, see What is WebP?. To convert transparent graphics, use PNG to WebP.

Does WebP support transparency?

WebP supports full 8-bit alpha transparency, giving 256 levels of opacity per pixel. This matches PNG's transparency precision and preserves soft, anti-aliased edges and gradient transparency exactly. Both lossy and lossless WebP can carry an alpha channel.

8-bit alpha means smooth edges and partial transparency render cleanly — no jagged 1-bit cutouts like GIF. Drop shadows, feathered masks, and semi-transparent overlays all reproduce faithfully.

How does lossless WebP store transparency?

Lossless WebP stores the alpha channel inline with the colour data, encoded by the same VP8L engine. Each pixel carries red, green, blue, and alpha values that are all preserved bit-for-bit. The decoded image is identical to the source, transparency included.

Because VP8L is lossless, transparent edges stay pixel-perfect. This makes lossless WebP the direct, smaller replacement for transparent PNG graphics and icons.

How does lossy WebP store transparency?

Lossy WebP stores the alpha channel separately from the colour data, in a dedicated ALPH chunk that is compressed losslessly. The colour data uses lossy VP8 encoding, while the alpha mask stays exact. This separation keeps transparent edges crisp even when the colours are compressed.

This design — described in WebP File Structure: RIFF Container and Chunk Format — is what lets WebP offer something neither JPEG nor PNG can: a transparent photograph at lossy file sizes.

What is the file-size cost of transparency?

Adding an alpha channel increases file size, but modestly. In lossless mode the alpha overhead is roughly 22% of the image data. In lossy mode the separately compressed alpha mask adds far less, because flat or simple transparency regions compress to almost nothing.

Compared to transparent PNG, lossless WebP with alpha is typically ~26% smaller. A lossy WebP with alpha can be several times smaller than the equivalent PNG for photographic content with transparency.

When should you use transparent WebP?

Use transparent WebP wherever you previously used transparent PNG, and for the new case PNG never handled — transparent photographs. The mode follows the content type, exactly as with opaque images.

Apply this rule:

Logos, icons, UI graphics, line art with transparency — use lossless WebP for pixel-perfect edges.
Transparent photographs or product cut-outs — use lossy WebP for far smaller files.
Mixed graphic and photographic content — use near-lossless, covered in WebP Compression Settings.

The full reasoning is in Lossy vs Lossless Compression: When to Use Each for WebP.

How does WebP transparency compare to PNG?

WebP matches PNG's 8-bit alpha precision while producing smaller files. Lossless WebP with transparency is ~26% smaller than PNG. Lossy WebP adds an option PNG lacks entirely — transparent images at photographic compression ratios.

The one consideration is browser support, which is effectively universal today. See WebP vs PNG and WebP Browser Support.

Does animated WebP support transparency?

Animated WebP supports transparency on every frame. Each frame carries its own alpha channel and can use lossy or lossless encoding. Animated GIF, by contrast, supports only 1-bit on/off transparency with no partial opacity.

This makes animated WebP suitable for transparent animations — animated logos or stickers — that GIF cannot render cleanly. See WebP Animation.

Where to go from here

Transparency in both modes is one of WebP's defining advantages. Lossless alpha replaces PNG; lossy alpha enables transparent photographs that no earlier web format could store efficiently.