Most projects don't need a fancy build pipeline to convert PNG to WebP. They need a clear decision on lossy vs lossless, a tool that handles the conversion without uploading your files to a third party, and a quick check that nothing looks wrong afterward. This guide covers exactly that.

Step 1 — Decide between lossy and lossless

WebP supports both modes in the same container. The right choice depends on what's in the image:

Photos, gradients, anything camera-shot → lossy at quality 75–85. Differences from the source are invisible to anyone not doing pixel-level diffs, and file size drops 30–45% versus the original PNG.
Screenshots, UI mockups, charts, logos with text → lossless. The WebP lossless coder is genuinely better than PNG's DEFLATE on this content, and it preserves every pixel. Expect 20–30% smaller files.
Mixed content (e.g. a UI screenshot with a photo embedded) → try lossy at quality 90 first. If text or thin lines look soft, fall back to lossless.

Step 2 — Pick a converter

For one-off conversions, a browser-based tool is usually the fastest path. Server-side converters add latency, and most upload your image to a third-party server you can't audit. Our PNG to WebP converter runs the encoder entirely in WebAssembly inside your browser — your files never leave your device.

For build pipelines, the canonical tool is cwebp, the reference encoder shipped by Google. On macOS it ships as part of libwebp via Homebrew:

brew install webp

Then:

cwebp -q 80 input.png -o output.webp for lossy, or cwebp -lossless input.png -o output.webp for lossless.

Step 3 — Tune the quality slider

Quality 80 is the sweet spot for photos. Below 60, blocking artifacts start to show on flat areas. Above 90, the file grows fast without visible improvement. Some specific targets:

Hero images on landing pages: quality 82–85. The first-paint LCP win dwarfs any quality concern.
Product photography: quality 85–90. Customers will zoom in.
Blog post inline images: quality 75–80. Plenty for body text.
Background textures: quality 60. Nobody looks at the background.

Step 4 — Handle transparency carefully

If your PNG has an alpha channel, two things can go wrong in conversion:

Premultiplied alpha. Some encoders default to premultiplying RGB by alpha, which silently changes the colors of partially transparent pixels. When you composite the WebP onto a different background, you'll see halos or color shifts. The fix is to pass -exact to cwebp, or pick a converter that preserves the original RGB.
Alpha quantization on lossy WebP. By default, lossy WebP can quantize the alpha channel to save bytes. For UI assets where you need clean edges, pass -alpha_q 100 or use lossless mode.

Step 5 — Verify the output

Before committing the WebP, do three checks:

Diff the result visually. Open both files in Preview / Photos / whatever your default viewer is and flip back and forth. If you can spot a difference inside a second of switching, the quality is too low.
Check the file size. WebP should be smaller than the source PNG. If it's larger, you probably ran lossy on a flat image where lossless would have been better, or the source PNG was already heavily optimized (e.g. via oxipng).
Render in the target environment. If the asset is for a website, drop it into a staging build and click around. If it's for a desktop app, open it in the app. The single biggest WebP failure mode is a downstream tool that silently doesn't support the format.

Bulk conversion: a few hundred files at once

For a folder of PNGs, a shell loop with cwebp works fine:

for f in *.png; do cwebp -q 80 "$f" -o "$${f%.png}.webp"; done

For mixed-content folders where you want lossless on UI assets and lossy on photos, a web-based batch tool is faster than scripting it. Our converter accepts up to 20 files at a time and processes them in parallel.

Common failure modes

The output is larger than the input. You ran lossy on a flat asset, or your source PNG was already optimized. Try lossless instead.
Email rendering shows a broken image icon. Most email clients don't support WebP. Use PNG/JPEG for email.
Colors look different after compositing on a colored background. Premultiplied alpha. See Step 4.
The WebP looks blurry compared to the PNG. Your quality is too low, or the source had very thin lines. Bump quality to 90 or switch to lossless.

Wrap-up

For most assets, the entire flow is: open a converter, drop the PNG in, leave quality at 80, download the result. The complications above are real but rare. When you do hit them, the fixes are tiny — a quality bump or a lossless switch. The 30–40% file size savings compound across every page view, and the conversion takes seconds.