BlogImage Compression

PNG vs WebP for Transparency: Which Format Should You Use?

Use WebP for transparent images on modern websites, keep PNG for masters and fallbacks. Compare alpha quality, file size, browser support, and conversion steps.

Updated: July 9, 2026

Use WebP for transparent images delivered on modern websites — specifically lossless WebP for logos and icons, and lossy WebP for cut-out product photography. Keep PNG as the editable master and fallback for email, legacy tools, and clients that do not support WebP. Both formats can carry alpha transparency, but WebP ships fewer bytes: Google's reference figures put lossless WebP around 26% smaller than PNG on average, while lossy WebP with alpha can be about 3× smaller. Actual savings vary with image content, so measure your own assets. Test sharp text and fine edges before replacing PNG everywhere — lossy WebP encoding can introduce subtle colour fringing that lossless mode avoids.

Key Takeaways

  • WebP wins for web delivery: lossless WebP is around 26% smaller than PNG on average, and lossy WebP with alpha can be about 3× smaller, per Google's published reference figures.
  • Both formats support 8-bit (256-level) alpha, making soft shadows and anti-aliased edges possible in either. Lossy WebP may add colour artifacts at sharp edges; lossless WebP does not.
  • Current major browsers support WebP transparency — but keep a PNG fallback for legacy browsers, older WebViews, and email clients.
  • Logos and icons → lossless WebP; cut-out photos → lossy WebP; masters, print, and email → PNG.
  • Never delete your PNG masters. WebP is a delivery copy, not a source file.

How Transparency Works in PNG and WebP

Both formats store transparency with an alpha channel — an extra layer that records how opaque each pixel is, from fully transparent (0) to fully solid (255). PNG and WebP both support 8-bit alpha, meaning 256 opacity levels, which is enough for smooth anti-aliased edges, soft drop shadows, and glass-like semi-transparency.

The difference is how each format compresses the pixel data:

  • PNG is strictly lossless. It uses DEFLATE compression and never discards pixel information. Truecolor PNG supports full 8-bit or 16-bit alpha; indexed PNG can use palette transparency via a tRNS chunk. PNG's pixel-perfect fidelity is exactly why its files are large.

  • WebP (built on VP8 video technology) offers both lossy and lossless modes, and both modes can carry an alpha channel. Lossy WebP uses predictive coding with YUV chroma subsampling; lossless WebP reconstructs pixels exactly but still beats PNG on compressed size. According to Google's published data, adding transparency to lossless WebP costs roughly 22% extra bytes as alpha overhead — not a fixed addition to every file.

Lossy vs Lossless WebP for Transparent Edges

Alpha depth and visual edge fidelity are different things and are often conflated:

Lossless WebPLossy WebPPNG
Alpha depth8-bit (256 levels)8-bit (256 levels)8-bit or 16-bit
RGB pixel accuracyPixel-perfectLossy — colour artifacts possiblePixel-perfect
Edge fidelity for fine textIdentical to PNGMay show fringing/halosReference
When to useLogos, icons, text overlaysCut-out photos, product imagesMasters, print, email

The safe rule: lossless WebP is the correct choice whenever pixel-identical transparency matters — for logos, icons, and anything with sharp strokes or small text. Lossy WebP is ideal for photographic cut-outs where mild colour shifts are invisible to the eye but the file-size savings are large.

PNG vs WebP for Transparency at a Glance

FeaturePNGWebP
Transparency8-bit or 16-bit alpha; indexed palette transparency8-bit alpha (lossy and lossless)
CompressionLossless only (DEFLATE)Lossy and lossless
Typical transparent-image sizeBaseline~26% smaller (lossless) / ~3× smaller (lossy) — Google reference averages
Browser supportUniversalCurrent major browsers; needs fallback for legacy/email
Color depthUp to 16-bit per channel8-bit per channel
AnimationAPNGNative WebP animation (with alpha)
Best forMasters, print, 16-bit editing, email, archivesWeb delivery

Quick Decision Table: PNG vs WebP by Use Case

Use caseRecommended formatWhy
Web logo or icon (sharp text/strokes)Lossless WebP + PNG fallbackPixel-accurate edges; ~26% smaller than PNG
Cut-out product photo (web)Lossy WebP + PNG fallbackLargest size reduction; minor colour shift invisible
Animation with transparencyWebP animationNative alpha support; smaller than APNG
Email signature or templatePNGOutlook for Windows and many clients do not support WebP
Print or prepressPNG (or TIFF)Lossless, up to 16-bit, no lossy artifacts
Archival / re-edit sourcePNGLossless master; never re-encode from WebP
Legacy CMS or unknown pipelinePNGWidest compatibility; test before switching
AVIF upgrade pathAVIF → WebP → PNG (in <picture>)Progressive fallback chain; AVIF is often smaller still

File Size Benchmarks: What the Published Numbers Mean

File size is the primary reason teams convert transparent PNGs to WebP. The following estimates apply Google's published average compression ratios to a hypothetical 200 KB transparent PNG. Your actual savings will differ — the ratios are reference averages across a range of images, not guarantees.

EncodingEstimated sizeEstimated saving vs. PNG
PNG-32 (baseline)~200 KB—
Lossless WebP~148 KB~26%
Lossy WebP (quality 80, with alpha)~65 KB~67% (≈3×)

Source: Google WebP compression statistics (developers.google.com/speed/webp). Actual results vary by image content.

On icon-heavy pages, reducing transparent image bytes can lower total page weight and may improve Largest Contentful Paint (LCP) when the transparent images are on the critical path — but measure before/after with a tool such as Lighthouse or WebPageTest rather than assuming a fixed improvement.

Citable fact: According to Google's published reference figures, lossless WebP images are on average about 26% smaller than equivalent PNGs, and lossy WebP with alpha is typically about 3× smaller. Both lossy and lossless WebP support full 8-bit alpha transparency.

Browser and Email Support Caveats

Web Browsers

Current major browsers support WebP transparency natively:

  • Chrome — since version 32 (2014)
  • Firefox — full support since version 65 (2019)
  • Edge — native (Chromium-based)
  • Opera — since version 19 (2014)
  • Safari — since version 14 (2020, macOS Big Sur and iOS 14)

According to Can I Use, WebP has over 96% global browser support as of 2026. However, Internet Explorer does not support WebP, and some older Android WebViews and niche browsers (e.g., KaiOS 2.5) have limited or no support. Always keep a PNG fallback.

Email Clients

Email is the main exception. Outlook for Windows, some older versions of Apple Mail, and many webmail clients do not render WebP reliably. For email signatures, newsletters, and templates, use PNG (or a JPEG with a white background if transparency is not needed) and test in your target clients before sending.

How to Convert and Verify Transparent Images

A reliable publishing workflow has three steps: convert, compress and compare, then mark up with a fallback.

1. Convert with cwebp

Use Google's cwebp command-line encoder (part of libwebp). For logos and icons, use lossless mode to preserve sharp edges:

# Lossless — for logos, icons, text with transparency
cwebp -lossless -alpha_q 100 logo.png -o logo.webp

For photographic cut-outs, lossy mode maximises savings:

# Lossy — for product cut-outs and photographic transparency
cwebp -q 80 product.png -o product.webp

The -alpha_q 100 flag keeps the alpha channel lossless even in lossy mode (the default, but worth being explicit). Use -metadata none to strip EXIF data, or -metadata all to preserve ICC profiles where colour accuracy matters.

2. Compress and Compare

After converting, use a browser-local compression tool to verify and compare output quality and file size without uploading files to an external server. LessMB is a free, browser-local image compressor that processes files on your device and supports PNG, WebP, and AVIF — useful for a quick size and quality sanity check before publishing.

3. Verify Transparency Carefully

  • Preview the result on at least three background types: light, dark, and a busy pattern (a checkerboard reveals edge fidelity issues best).
  • Zoom to 200–400% and look for colour fringing or halos around sharp text and thin strokes — a sign you need lossless instead of lossy WebP for that asset.
  • Compare the before-and-after byte sizes and confirm the saving justifies any visible quality trade-off.
  • Test in your target browsers and, for email assets, in your target email clients.

4. Serve with a Fallback

Use the <picture> element so browsers that cannot read WebP fall back to PNG automatically:

<picture>
  <source srcset="logo.webp" type="image/webp">
  <img src="logo.png" alt="Company logo" width="200" height="60">
</picture>

Always include explicit width and height attributes on the <img> element to prevent Cumulative Layout Shift (CLS). For an AVIF upgrade path, add a second <source> before the WebP source.

Common Mistakes to Avoid

  • Using lossy WebP for everything. Text-heavy logos and icons can exhibit fringing. Use lossless WebP for those assets.
  • Deleting the original PNGs. Always keep the PNG master; WebP is a delivery copy, not a source file. Re-encoding from WebP degrades quality.
  • Skipping the fallback. Even at 96%+ browser support, a bare <img src="logo.webp"> will break in Outlook, older WebViews, and some less common browsers. Use <picture>.
  • Shipping oversized assets. Resize to the display dimensions first — no format makes an unnecessarily large image cheap.
  • Conflating lossless with smallest. Lossless WebP beats PNG, but for photographic transparency, lossy WebP is far smaller. Match the encoding mode to the content type.

Next Steps

  1. Audit your site's largest transparent PNGs using Lighthouse or WebPageTest.
  2. Convert logos and icons to lossless WebP; convert cut-out photos to lossy WebP using cwebp.
  3. Compress and compare with a local tool and measure the actual byte savings before publishing.
  4. Deploy <picture> elements with a PNG fallback and explicit width/height attributes.
  5. Re-test LCP and total page weight — many icon-heavy pages see substantial reductions in image bytes after switching.

FAQ

Does WebP support transparency?

Yes. Both lossless and lossy WebP support full 8-bit alpha transparency, giving you smooth, anti-aliased edges and semi-transparent regions just like PNG. Transparency is a core part of the WebP specification, not an optional add-on.

Is WebP transparency as good as PNG?

For alpha depth, yes — both formats support 8-bit (256-level) alpha, so soft shadows, frosted-glass effects, and gradual edges are possible in either. Lossless WebP reproduces PNG transparency pixel-for-pixel. Lossy WebP can introduce subtle colour fringing around sharp edges and fine text, so lossless WebP is the safe choice when pixel-identical transparency is required. PNG only extends its lead for 16-bit alpha workflows (HDR compositing, print prepress) that are outside normal web use.

Which is smaller for transparent images, PNG or WebP?

WebP, by a meaningful margin. According to Google's published reference figures, lossless WebP is on average about 26% smaller than an equivalent PNG, and lossy WebP with alpha is typically about 3× smaller. Actual savings vary with image content — measure your specific assets rather than assuming the averages apply exactly.

Do current major browsers support WebP transparency?

Current major browsers — Chrome, Edge, Firefox, Opera, and Safari (since version 14 in 2020 on macOS Big Sur and iOS 14) — support WebP transparency natively. Can I Use reports over 96% global coverage as of 2026. The gaps are Internet Explorer, some older Android WebViews, niche browsers, and most email clients, which is why a <picture> element with a PNG fallback remains best practice.

Should transparent logos use lossy or lossless WebP?

Use lossless WebP for logos, icons, and any asset with sharp text, thin strokes, or fine detail. Lossless mode preserves pixel-accurate edges and avoids the colour artifacts that YUV chroma subsampling can introduce in lossy mode. You still save roughly 26% compared with PNG and gain no visible quality loss.

Do I need a PNG fallback for email?

Yes. Outlook for Windows and a number of other email clients do not reliably render WebP. For email signatures, marketing emails, and newsletter templates, use PNG (or a JPEG with a white background where transparency is not needed) and test in your target email clients before sending at scale.

When should I still use PNG instead of WebP?

Use PNG when you need a lossless master for editing or archiving, for print and 16-bit colour workflows, for email signatures, for older systems that cannot read WebP, or as the final fallback inside a <picture> element. PNG is the trusted source of truth; WebP is the optimised delivery copy.

References