Convert PNG to WebP Online — Free
Convert PNG to WebP for smaller files that still support transparency. Faster web pages, no visible quality loss, browser-based.
How to convert PNG to WebP
- 1
Add your PNG file
Drop or select a .png file. Files up to 50MB process locally in your browser — nothing uploaded.
- 2
Run the conversion
Your PNG decodes onto a Canvas and re-encodes as WebP at the quality you choose. Transparency is preserved end-to-end because WebP fully supports an alpha channel — unlike JPG, which flattens alpha to white.
- 3
Download your WebP
One click saves the result as a .webp file. Your original file stays on your device.
Why convert PNG to WebP?
WebP produces files about 25-30% smaller than equivalent PNGs at lossless settings, and 70-90% smaller when lossy WebP is acceptable for photo-like PNGs. For websites, this directly improves Core Web Vitals (Largest Contentful Paint) and cuts CDN egress costs — which is why Cloudflare, Shopify, and Next.js default to WebP delivery.
Common PNG to WebP use cases
- Replacing PNG logos and UI graphics on a website with lossless WebP at 25-30% smaller size, preserving transparency
- Compressing PNG screenshots for a blog or documentation site where the original's sharp UI edges must stay crisp
- Converting PNG product renders with transparent backgrounds for an e-commerce site where WebP keeps alpha
- Shrinking PNG assets in a PWA or React app bundle while keeping icon transparency intact
What file size to expect
A 1200×800 PNG illustration with transparency is typically 280-450 KB. Lossless WebP output lands at 200-320 KB (~25-30% smaller). Lossy WebP at quality 85 can shrink it to 60-120 KB (70%+ smaller) — at the cost of some detail, though still visually indistinguishable for most uses.
Technical notes: PNG → WebP
WebP lossless uses a different compression scheme than PNG (predictive coding plus a dictionary approach) that typically beats DEFLATE by 25-30% on graphics. Lossy WebP uses VP8 intra-frame compression with alpha kept as a separate lossless channel, so transparency edges stay crisp even at aggressive compression. The Canvas re-encode drops any PNG text chunks (tEXt, iTXt), color profiles (iCCP, sRGB), and gamma (gAMA) metadata — colors are interpreted as sRGB during rendering.
Compatibility and browser support
WebP decoding works in Chrome 23+, Firefox 65+, Safari 14+ (macOS Big Sur / iOS 14), Edge 18+, and Opera 12.1+. Global coverage is above 96%. For the remaining users on older Safari or ancient Edge, serve a PNG fallback via <picture> with <source type='image/webp'>.
PNG vs WebP
| PNG | WebP | |
|---|---|---|
| File size | Larger (lossless) | Smallest at equivalent quality |
| Quality | Lossless | Lossy or lossless |
| Transparency | Yes | Yes |
| Browser / app support | Universal | Modern browsers (Chrome, Firefox, Safari, Edge) |
| Best for | Screenshots, logos, graphics with transparency | Web images, performance-focused sites |
Related conversions
Frequently Asked Questions
What's the savings vs PNG?
Roughly 25-30% smaller at lossless settings, 70-90% smaller with lossy WebP for photo-like content. Flat UI graphics save the most.
Will transparency survive?
Yes — WebP fully supports an alpha channel in both lossy and lossless modes. Unlike JPG conversion, transparent pixels stay transparent.
Lossy or lossless?
Pick based on content: logos, screenshots, and graphics with sharp edges benefit from lossless. Photos and photo-like PNGs benefit from lossy at quality 85+.
Browser support?
Over 96% globally — Chrome, Firefox, Safari 14+, Edge, Opera. iOS 13 and older Safari can't decode WebP; use a PNG fallback there.
Will icon or logo edges stay crisp?
Yes, especially in lossless mode. Lossy WebP also keeps alpha edges sharp because alpha is stored separately from color.
Any metadata preserved?
No — Canvas-based conversion drops tEXt, iCCP color profiles, and gAMA gamma. For metadata preservation, use a desktop tool like cwebp with -metadata flags.