Updated: August 1, 2026
Short answer: Both PNG and WebP support transparency. Use lossless WebP as a web delivery candidate for logos and icons, use lossy WebP for photographic cut-outs only after checking halos and color fringing, and keep PNG for masters, email, print, and clients that require the format.
“Transparent” describes the alpha channel, not the quality of the pixels around it. A file can preserve fully transparent areas while changing the color of semi-transparent shadows, hair, glass, or anti-aliased text. That is why PNG vs WebP is not just a file-size comparison.
PNG vs WebP Transparency at a Glance
| Requirement | PNG | WebP |
|---|---|---|
| Alpha transparency | Yes | Yes, in lossy and lossless modes |
| Pixel-perfect output | Yes | Yes in lossless mode |
| Lossy compression | No | Yes |
| Lossless compression | Yes | Yes |
| Fine text and thin strokes | Very safe | Use lossless WebP and inspect |
| Web delivery size | Often larger | Often smaller, but measure |
| Email and legacy compatibility | Safest | Requires client testing and fallback |
| Master or editing source | Strong choice | Usually a delivery copy |
How Alpha Transparency Works
An alpha value controls how much of each pixel is visible: zero is fully transparent, the maximum value is fully opaque, and intermediate values create soft edges or shadows. The alpha channel can be correct while the color data underneath it has changed.
PNG is lossless and keeps the pixel data intact. WebP has two relevant workflows:
- Lossless WebP reconstructs the pixels exactly and is the safest WebP mode for logos, icons, UI graphics, and text overlays.
- Lossy WebP can shrink photographic cut-outs much further, but its color quantization and chroma behavior can create a fringe around high-contrast transparent edges.
Google’s WebP documentation reports that lossless WebP is about 26% smaller than PNG on average in its reference data. It also reports that lossy WebP with transparency can be much smaller than PNG, but these are benchmark averages, not a promise for a particular logo or cut-out. See Google’s WebP format documentation.
Choose the Mode by Asset Type
Logos, icons, and text overlays
Start with SVG if the source is vector. If you need a raster file, compare lossless WebP with an optimized PNG. Use lossless mode when a one-pixel edge, small label, or thin stroke must remain exact.
Product cut-outs and portraits
Lossy WebP or AVIF may reduce the file substantially for a web page. Check hair, fur, glass, jewelry, drop shadows, and the boundary between the subject and the transparent background. A small color fringe may disappear on one background and become obvious on another.
UI graphics and screenshots
Use PNG or lossless WebP. JPEG is not a transparency format, and lossy compression is risky when the image contains small type, icons, or flat interface colors. Crop unused space before reducing quality.
Print, editing, and archives
Keep PNG, TIFF, PSD, or another suitable master. WebP is usually a delivery derivative. Do not delete the master because a browser displays the WebP correctly.
The Background Test That Finds Halos
A transparent image should be tested on more than the checkerboard shown by an editor:
- Open the original PNG and the WebP export side by side.
- Place both on a white background.
- Repeat on black, a saturated brand color, and the real page background.
- Zoom to 100% and inspect the outer edge, shadow, small type, and diagonal lines.
- Compare at normal display size too; some artifacts only matter when the image is enlarged.
If a lossy WebP shows a halo, try a higher quality, lossless WebP, an adjusted matte color, or PNG. Do not “fix” a transparent edge by adding a colored background unless the design intentionally requires one.
How to Serve WebP with a PNG Fallback
For web pages, use <picture> when you want a modern transparent delivery copy and a widely accepted fallback:
<picture>
<source srcset="logo.webp" type="image/webp" />
<img src="logo.png" width="480" height="160" alt="Company logo" />
</picture>
Use lossless WebP for the logo in this example. For a photo-like cut-out, you can test a lossy WebP or AVIF source, but keep the PNG fallback and inspect every important edge.
Do not confuse srcset with format fallback. srcset chooses among sizes; <picture> and <source type> choose among formats. You may use both:
<picture>
<source
srcset="product-640.webp 640w, product-960.webp 960w"
type="image/webp"
/>
<img
src="product-960.png"
srcset="product-640.png 640w, product-960.png 960w"
sizes="(max-width: 640px) 100vw, 480px"
width="960"
height="960"
alt="Cut-out product on a transparent background"
/>
</picture>
What Usually Makes Transparent PNGs Large
- unnecessary pixel dimensions around a small graphic;
- a full-color PNG used for a simple indexed illustration;
- embedded editor metadata or thumbnails;
- complex semi-transparent gradients that do not compress well losslessly;
- a photographic cut-out kept in PNG when the web destination accepts a tested lossy format;
- repeated export and conversion from an already-compressed derivative.
Start with dimensions and safe metadata removal. If the graphic is still too large, test lossless WebP. Use lossy WebP only when the visual trade-off is acceptable.
Reduce Size Before Changing the Format
Format conversion is only one lever. For a transparent graphic, first remove empty canvas around the artwork if the layout does not need it. Check whether the image is using an unnecessarily large color depth or an unoptimized palette. Remove editor metadata from a delivery copy, but keep the source with its original profile and editing information.
If the asset is displayed at 320 pixels but exported at 2,000 pixels, resizing it to the largest useful display width can save more than switching from PNG to WebP. If it is a logo that must remain crisp at many sizes, replace the raster asset with an SVG when a clean vector source exists.
Email, Downloads, and Web Pages Have Different Rules
The same transparent file can need different outputs:
| Use case | Recommended delivery copy |
|---|---|
| Public web page | Lossless WebP or tested lossy WebP with PNG fallback |
| Email signature or newsletter | PNG unless the full client matrix supports WebP |
| User download | The format the recipient expects; keep PNG for broad compatibility |
| Design handoff | PNG, TIFF, PSD, or the original vector source |
| App or upload portal | Follow the documented accepted formats |
Do not force WebP simply because the browser displays it. A file that saves bytes on one page can create a support problem when it is copied into email, a slide deck, a print workflow, or an older application.
Transparent-Asset Validation Checklist
- The output uses the intended alpha mode and has not been flattened.
- The subject edge has no light or dark fringe on the real background.
- Small text and thin strokes remain readable at normal size.
- The file is smaller than the PNG it replaces, or the quality benefit justifies the size.
- The fallback path works in the browsers and clients that matter.
- The original master is still available for future exports.
Common Mistakes
- Checking only the checkerboard preview and not the real background.
- Saving a transparent image as JPEG and expecting alpha to survive.
- Using lossy WebP for small text or a fine logo without zoom inspection.
- Treating a WebP delivery copy as the editable master.
- Removing the PNG fallback from email or an upload workflow that rejects WebP.
- Assuming every PNG-to-WebP conversion saves space.
Related LessMB Guides
- Convert PNG to WebP and measure the result
- How to compress PNG files while preserving transparency
- JPEG vs PNG vs WebP vs AVIF
- How to compress screenshots without blurry text