How to Convert PNG to WebP for Faster Websites
Convert PNG to WebP and cut image sizes by 25-35% with no quality loss. Free browser converter plus CLI batch commands. Faster sites, better Core Web Vitals.
The Quickest Performance Win
Converting your site's PNG images to WebP is the lowest-effort, highest-impact change you can make for page speed. PNG images are lossless and large. WebP images can be lossy (for photos) or lossless (for graphics that need perfect edges), and both variants are smaller than equivalent PNG.
Here is the math. A typical product page has 8-12 PNG images: product shots, icons, UI elements. If those PNGs average 200 KB each, the total image payload is around 2 MB. Converting to lossy WebP at quality 85 cuts each image to roughly 50-70 KB. The page drops from 2 MB to about 700 KB of images. For a site with 100,000 monthly page views, that saves roughly 130 GB of bandwidth per month.
Lossless vs Lossy WebP
When converting PNG to WebP, you choose between two modes:
- Lossless WebP: pixel-perfect reproduction. About 26% smaller than PNG on average. Safe for screenshots, UI elements, logos, and images with text. A 500 KB PNG-24 screenshot becomes roughly 370 KB as lossless WebP.
- Lossy WebP: discards imperceptible detail for dramatic size reduction. About 60-80% smaller than the original PNG at quality 85. Good for photos, product images, and hero images where perfect pixel accuracy is not needed. A 2.8 MB PNG-24 photo becomes roughly 260 KB as lossy WebP at quality 85.
A good rule: if the PNG is a screenshot or a logo, use lossless WebP. If it is a photo that happens to be stored as PNG (which is common when photos come from design tools), use lossy WebP at quality 85-90.
Real File Size Results
Here are results from converting five common image types. All conversions were done with the PNG to WebP Converter at quality 85 (lossy) or default (lossless):
| Image Type | Original PNG | Lossless WebP | Lossy WebP (q85) | |---|---|---|---| | Product photo (2400x1600) | 2,800 KB | 2,100 KB | 260 KB | | Screenshot (1920x1080) | 520 KB | 390 KB | 85 KB | | Logo with transparency (800x400) | 120 KB | 90 KB | 45 KB | | UI icon set (200x200) | 35 KB | 26 KB | 12 KB | | Photo with text overlay (1600x900) | 1,100 KB | 820 KB | 140 KB |
The lossy WebP column shows why this is the single biggest performance win available. The file size drops are not marginal. They are transformational for page load speed.
How to Convert Individual Files
The PNG to WebP Converter converts files in your browser. Upload a PNG, choose lossy or lossless, set the quality for lossy mode, and download the WebP. The conversion happens locally. Your image is never uploaded to a server.
Steps:
- Open the PNG to WebP Converter.
- Upload your PNG file (drag and drop works).
- Select lossy or lossless mode.
- For lossy, set the quality slider (85 is recommended).
- Click Convert and download the result.
How to Batch Convert with CLI Tools
For folders with dozens or hundreds of PNGs, use the command line:
# Install Google's WebP tools (Ubuntu/Debian)
sudo apt install webp
# Convert a single file
cwebp -q 85 input.png -o output.webp
# Lossless conversion
cwebp -lossless input.png -o output.webp
# Batch convert all PNGs in a directory (lossy, quality 85)
for f in *.png; do cwebp -q 85 "$f" -o "${f%.png}.webp"; done
# Batch lossless for screenshots and logos
for f in *.png; do cwebp -lossless "$f" -o "${f%.png}.webp"; done
The cwebp encoder is fast. Converting 100 PNGs takes under 30 seconds on modern hardware.
Serving WebP with a PNG Fallback
The <picture> element serves WebP to browsers that support it and falls back to PNG for the rest:
<picture>
<source srcset="hero.webp" type="image/webp">
<img src="hero.png" alt="Hero image">
</picture>
As of 2026, global WebP support is above 97%. The fallback is a safety net, not a primary path. Most of your traffic will receive the WebP version.
Transparency Handling
WebP supports alpha transparency in both lossless and lossy modes. Converting a transparent PNG to lossy WebP preserves the alpha channel. At quality 85-90, transparent edges are clean. Below quality 75, you may see minor artifacts along the edges of transparent regions.
If your transparent PNG has hard edges (like a logo on a transparent background), lossless WebP preserves those edges perfectly and still saves roughly 26% in file size. If it has soft edges or drop shadows, lossy WebP at quality 85 handles them cleanly.
Try it yourself: open the PNG to WebP Converter. Upload a PNG from your project. Convert it once as lossless and note the file size. Convert again as lossy at quality 85 and note the size. Compare both against the original. The lossy version will be dramatically smaller while looking identical on screen.