An alpha-aware workflow for logos, icons, and product cutouts.
A transparent logo looks fine locally, but after conversion it appears inside a white box. Before blaming WebP, check the source file, export settings, and page styling.
WebP supports transparency with both lossy and lossless compression. Preserving it depends on keeping the image’s alpha channel throughout your workflow.
Check your source image first. Open the PNG in an editor and place a colored layer underneath it. The color should show through transparent areas.
If the white background remains, it is already part of the image. Changing the file format will not remove it.
Convert with explicit settings. With Google’s cwebp utility installed, use this command for logos or graphics where preserving visible detail matters:
cwebp -lossless input.png -o output.webp
For photographic cutouts, you can try lossy color compression while keeping alpha lossless:
cwebp -q 80 -alpha_q 100 input.png -o output.webp
Here, -q 80 controls color quality, while -alpha_q 100 preserves alpha without loss. Treat 80 as a starting point, then inspect the result.
Avoid -noalpha, which discards transparency, and -blend_alpha, which composites the image onto a background.
One subtle detail: -lossless can change invisible RGB values in fully transparent pixels. Add -exact if your processing pipeline needs those values preserved. This flag is not required simply to retain a transparent background. These options are documented in Google’s cwebp reference.
Validate the exported file. Open the WebP over light and dark backgrounds. Inspect small lettering, soft shadows, and edges at their intended display size.
A white image-viewer canvas does not prove the background became opaque. Test transparency in an editor before changing your conversion settings.
If you prefer a browser workflow, PNG image converter site is another place to start. Apply the same checks when using any PNG to WebP converter.
Finally, inspect the uploaded image on your actual page. If the local WebP is correct but the published version differs, check CMS processing and CSS backgrounds.
Keep the original PNG and compare file sizes. Ship the version that meets your visual requirements and works correctly in your application.
Top comments (0)