Save PNG transparency in WebP without artefacts

WebP supports alpha, but the conversion must ask for it

WebP supports a full alpha channel, so a transparent PNG can become a transparent WebP. The trap is that a default or lossy conversion can flatten transparency onto a white background, which shows up as a white rectangle against dark page sections.

The conversion needs the alpha preserved and, in lossy mode, an alpha quality setting high enough that the edges stay clean. In most encoders this means keeping the format as WebP with an alpha-setting enabled, rather than writing through a path that falls back to an opaque JPEG.

The settings that keep edges clean

Two settings matter more than anything else:

• Preserve alpha: the decoder must carry the RGBA channel through, not discard it. Transparent PNGs stay transparent.
• Alpha quality: on hard edges, a low alpha quality shows a faint fringe on logos and icons over dark backgrounds. Keep it high for anything that sits over varied backgrounds.

If you are running a whole site through the migration pack, a PNG to WebP preset that preserves transparency is the right default for logos, icons and cut-out product shots. That is exactly how the PNG to WebP converter is configured.

Verify with a dark-background check

The fastest check for a flattened alpha is to place the output on a dark colour and a light colour and confirm the silhouette is identical. A faint white box on the dark test is the giveaway that transparency was lost. You can run this check across a batch by testing one logo and one cut-out per set.

When PNG is still the right choice

WebP is not always the best output. For small flat graphics, favicons and simple icons, a PNG may already be tiny, and converting adds no real benefit while changing an asset your workflow expects. For anything with sharp edges over varied backgrounds where the extra size is trivial, a lossless PNG keeps maximum fidelity with zero risk of a conversion artefact.

The rule for an agency migration: convert photographic content aggressively, keep small flat graphics as PNG or SVG, and only convert transparent files when the alpha-preserving setting is confirmed. That combination avoids both inflated weight and rendering surprises.