Why convert PNG to WebP
PNG is lossless, which is great while you're designing and costly when the image goes on a website. Google, which created WebP, reports that lossless WebP files are about 26% smaller than PNGs, and that lossy WebP is 25–34% smaller than a comparable JPEG. This converter makes lossy WebP at the quality you choose, so a photo or detailed graphic that was saved as PNG often ends up a fraction of its original size.
The big advantage over converting to JPG is transparency. WebP keeps the alpha channel, so a logo or product cutout still sits cleanly on any background color.
Lossy WebP still looks sharp at high quality, but it isn't pixel-perfect like PNG. That's why the usual approach is to keep PNG as the editable master and publish WebP. If an image is mostly flat color with crisp text, compare both versions at 100% zoom before you swap them on your site.
| PNG | WebP | JPG | |
|---|---|---|---|
| Compression | Lossless | Lossy or lossless | Lossy |
| Transparency | Yes | Yes | No |
| Size for photos | Largest | Smallest | Small |
| Browser support | All | All current browsers | All |
Using WebP on WordPress, Shopify and other sites
WordPress has accepted WebP uploads since version 5.8, and Shopify, Squarespace, Wix and Webflow all take WebP files. Upload the converted file the same way you'd upload a PNG. If your theme or an email newsletter tool doesn't display it, keep a PNG or JPG copy for that one place: many email clients still don't render WebP reliably.
Converting by hand makes sense for a handful of key images: your logo, homepage hero and best-selling product shots. For a whole media library, a CDN or image plug-in that converts automatically saves time. Either way, check the result on a phone over mobile data, since that's where lighter images make the biggest difference to how quickly a page feels ready.
- Resize first. A 4000 px wide PNG converted to WebP is still 4000 px wide. Use the Image Resizer to match the size it's displayed at.
- Keep your PNG master. Edit the PNG, then export a fresh WebP, rather than editing the WebP.
- Flat graphics with few colors sometimes gain little. Compare the sizes before you replace the file.
