How to Convert PNG to WebP — Lossless WebP Is the Natural Fit

PNG and WebP share something JPG doesn't: both support lossless compression and a proper alpha channel for transparency. That's what makes PNG-to-WebP different from JPG-to-WebP — you actually have a choice between two modes, and that choice matters. Pick the wrong one and you either waste file size or degrade quality for no reason.

This guide covers how transparency is handled, when lossy WebP beats lossless even for PNG sources, cwebp CLI commands with the right flags, and how to verify your transparency came through correctly after converting.

The Key Difference: PNG is Lossless, JPG is Not

When people convert JPG to WebP, the source file already has compression artifacts baked in — it is already lossy. Converting to WebP just swaps one lossy codec for a more efficient one.

PNG is different. PNG uses lossless DEFLATE compression — every pixel is stored exactly as it was encoded, with zero quality loss. That means when you convert a PNG to WebP, you have a real decision to make:

• Lossless WebP: Preserves every pixel exactly, like PNG. Average file size is 26% smaller than PNG for the same image. Zero quality loss. The natural direct replacement for PNG.
• Lossy WebP: Compresses more aggressively using the VP8 codec. Files are much smaller than lossless WebP, but some pixel data is discarded. Appropriate when the PNG contains photographic content where perfect pixel accuracy is not needed.

The choice depends on what is in the PNG, not just the fact that it is a PNG file. A PNG of a logo needs lossless. A PNG of a photograph (which was saved as PNG to avoid JPG artifacts) can use lossy WebP at quality 82–85 and look identical to the source.

Transparency: WebP Handles Alpha Channel Perfectly

One of the most important reasons people use PNG is its support for transparency — the alpha channel. Logos on transparent backgrounds, product cutouts, icons, UI elements with see-through areas: all of these rely on the alpha channel.

WebP supports alpha channel in both lossless and lossy modes:

• Lossless WebP with alpha: The alpha channel is stored perfectly — every transparent and semi-transparent pixel is pixel-accurate. Identical to PNG's alpha channel behavior.
• Lossy WebP with alpha: The RGB color channels are compressed with lossy encoding, but the alpha channel itself is compressed losslessly. This is WebP's unique hybrid mode — you get smaller file sizes while the transparency edges remain crisp and exact.

In practice, lossy WebP with alpha is excellent for product photos on transparent backgrounds (e-commerce cutouts) or complex illustrations with transparency. The alpha edges are perfect; the color compression is imperceptible at quality 82+. If your product photo still has a background, use our free AI background remover to create a clean transparent PNG first — no upload, runs entirely in-browser.

What about IE and old Safari? Internet Explorer does not support WebP at all. If you need transparency and still support IE, keep PNG. For all modern browsers (Chrome, Firefox, Edge, Safari 14+), WebP alpha works perfectly.

Quality and Mode Decision Guide

Method 1: Convertlo — Free Browser Tool, Transparency Safe

Method 2: cWebP CLI — Lossless and Lossy Commands

# Lossless PNG to WebP (preserves every pixel, ~26% smaller)
cwebp -lossless input.png -o output.webp

# Lossy PNG to WebP (photographic PNGs — much smaller file)
cwebp -q 82 input.png -o output.webp

# Lossy with lossless alpha (product cutouts — small file, perfect edges)
cwebp -q 82 -alpha_q 100 input.png -o output.webp

# Batch lossless: all PNGs in current folder
for f in *.png; do
  cwebp -lossless "$f" -o "${f%.png}.webp"
done

# Batch lossy for photographic PNGs
for f in *.png; do
  cwebp -q 82 "$f" -o "${f%.png}.webp"
done

The -alpha_q flag (0–100) controls alpha channel compression quality separately from the main image. At -alpha_q 100 the alpha is losslessly compressed. Lowering it compresses the alpha channel more aggressively — useful for semi-transparent shadows where perfect accuracy is not needed.

One more flag worth knowing: -exact. By default, cwebp modifies the RGB values of fully-transparent pixels (alpha=0) during lossy encoding — it doesn't matter visually, but it can break round-trip fidelity if you convert back to PNG later. Adding -exact tells cwebp to preserve the RGB data under transparent pixels exactly: cwebp -q 82 -exact input.png -o output.webp. Most people don't need it, but if you're building a pipeline that converts back and forth, it's the right habit.

Understanding -alpha_q: Fine-Tuning Transparency Compression

When you run cwebp -q 82, that quality number controls the RGB colour channels only. The alpha channel — the transparency layer — is compressed independently, controlled by a separate flag: -alpha_q.

Most developers never need to change it. The default is -alpha_q 100 (lossless alpha), which is the right choice for logos and product cutouts. But for images with soft shadows, gradients, or decorative blur, lowering -alpha_q can shave another 5–20% off the file with no visible difference. Here is everything you need to know to choose the right value.

What alpha_q Actually Controls

• -alpha_q 100 — Alpha channel is stored losslessly. Every transparency value (0–255) is preserved exactly. This is the default for -q mode if you omit the flag.
• -alpha_q 0 — Alpha channel is discarded entirely. All pixels become fully opaque. Use only when you intentionally want to flatten transparency.
• -alpha_q 1–99 — Lossy alpha at that quality level. Semi-transparent pixels lose some precision — a pixel encoded at alpha=200 might decode at alpha=197 or alpha=203. The effect is invisible for soft gradients but can produce fringing on hard edges.

Recommended Values by Use Case

alpha_q in Lossless Mode

When you use the -lossless flag, -alpha_q is ignored entirely. In lossless mode the whole image — RGB and alpha — is stored pixel-perfectly. -alpha_q only applies in lossy mode.

The combination cwebp -q 82 -alpha_q 100 is called lossy RGB + lossless alpha (sometimes written α* = 100 in encoder docs). It is the recommended setting for product photography on transparent backgrounds: the colour channels use lossy compression to shrink the file, while the alpha channel stays exact so edges stay clean at any zoom level.

# Logo / icon — lossless RGB + lossless alpha (pixel-perfect)
cwebp -lossless input.png -o logo.webp

# Product cutout — lossy RGB + lossless alpha (best for e-commerce)
cwebp -q 82 -alpha_q 100 product.png -o product.webp

# Soft shadow / glow — lossy RGB + lossy alpha (smaller file, imperceptible)
cwebp -q 82 -alpha_q 70 shadow-overlay.png -o shadow.webp

# Discard alpha entirely (intentional flattening, e.g. for og:image)
cwebp -q 85 -alpha_q 0 hero.png -o hero-opaque.webp

# Batch: product images with lossless alpha
for f in products/*.png; do
  cwebp -q 82 -alpha_q 100 "$f" -o "${f%.png}.webp"
done

Finding the Right alpha_q for Your Image

There is no universally optimal value — the right alpha_q depends on the variation in your specific alpha channel:

• Binary alpha (pixels are either fully transparent or fully opaque — logos, flat icons): always use -alpha_q 100. Even slight lossy imprecision on hard binary edges creates a visible 1–2 pixel fringe when the image is placed on a contrasting background.
• Linear gradient alpha (soft drop shadow, fog, vignette): anything from -alpha_q 40 upward is usually invisible. Start at 60 and decrease only if file size is a priority. Inspect the output in a browser on a dark background before publishing.
• Complex alpha (hair masking, motion blur, semi-transparent smoke): use -alpha_q 80 or higher. Fine detail in complex alpha channels compresses unpredictably at lower values — artefacts appear as faint halos or smearing.

To find the threshold for a specific image: run cwebp at -alpha_q 50, view the output on both a white and a black background, and halve or double based on what you see. Three iterations is usually enough to land at the optimal value.

PNG vs Lossless WebP vs Lossy WebP — Size Comparison

The table makes the decision clear: for flat graphics and text, lossless WebP is the winner — it saves ~26% with zero quality loss. For photographic content that was saved as PNG, lossy WebP is dramatically better — 70–80% smaller with no perceptible difference.

When to Keep PNG Instead of Converting to WebP

WebP is not always the right choice. Keep PNG in these situations:

• Open Graph images and email: Many email clients and social media crawlers do not support WebP for og:image tags. The Facebook link previewer, many email clients, and Discord unfurls may fail with WebP. Use PNG or JPG for these.
• Download assets: If users download the file to edit in design tools, PNG has vastly wider software support. Affinity Photo, Sketch, Figma, Canva — all read PNG natively. WebP support varies.
• Print workflows: If the PNG is destined for print (even via a web download), PNG is safer. Many print workflows and desktop publishing tools do not handle WebP.
• Legacy CMS compatibility: Some CMS platforms (older WordPress versions, certain DAMs) do not handle WebP in their media libraries.

PNG to JPEG vs PNG to WebP — Which Should You Convert To?

If you searched "png to jpeg converter" and landed here, the short answer is: WebP for web pages, JPEG for email/print/social. Both are much smaller than PNG — the right choice depends purely on where the image is going, not which is "better."

How to Check That Transparency Was Actually Preserved

After converting, don't assume the alpha channel came through — check it. Converters that don't handle alpha correctly will silently flatten transparency to white or black, and you won't notice until the image is on a coloured background in production.

Fastest check: Drag the WebP file directly into a Chrome or Firefox tab. The browser renders it over a white background — if your logo or cutout has no visible white box around it, the transparency is intact.

More reliable check: Open browser DevTools (F12), click the Elements tab, select the <img> element, and in the Styles panel add background: #000 to the body. Transparent areas will show the black background through them. If you see solid colours where there should be transparency, the alpha channel was lost.

In your codebase: Drop the WebP over a coloured <div>:

<div style="background:#f00;padding:20px;display:inline-block">
  <img src="output.webp" alt="transparency test">
</div>

If the red shows through the transparent areas, you're good. If you see a white or black rectangle, re-convert using lossless mode or check that your converter supports alpha.

Frequently Asked Questions