WebP vs PNG: when to use each format
WebP and PNG both support transparency. Both can keep every pixel exact. So which one should you pick? It depends on where the image will be used and who needs to open it.
Short answer: use WebP for images on a website, and PNG for files you edit or send to other people. The rest of this post explains why, and covers the cases where the answer changes.
WebP vs PNG at a glance
PNG is a lossless format from the 1990s. Almost every app, browser and operating system can open it. WebP is a newer format from Google. It has a lossless mode and a lossy mode, and both can keep transparency.
For the same image, WebP is usually smaller. PNG is more widely supported outside of browsers. Most choices between the two come down to that trade.
Use WebP for images on the web
For images served to a modern browser, WebP is the better default. It is usually smaller than PNG at the same visual quality, and every current browser supports it.
Smaller files make pages load faster. For most websites, that alone is reason enough to switch.
Transparency and image detail
Both formats keep transparent pixels, but they work in different ways. PNG is always lossless. That protects sharp screenshots, small text and flat-color illustrations. WebP can be lossless or lossy. In lossy mode you give up a little precision and get a much smaller file, which is fine for many images.
Don't assume one format always wins on size. A tiny flat icon can compress very well as PNG. A large textured image with transparency can be far smaller as WebP. Test the real image and compare both at the size people will see it.
Use PNG for editing and sharing files
PNG is lossless and opens almost everywhere. That makes it the safe choice for source files, screenshots and anything you pass to another app or person.
If someone down the line might not support WebP, PNG removes that risk.
Compatibility outside the browser
Current browsers all show WebP. A real workflow touches more than a browser, though. Email clients, design plugins, CMS importers, social media schedulers and desktop apps may all handle the file. An image that shows fine in Chrome can still fail at a later step.
Keep a lossless PNG source if you will edit the image again. Make a WebP copy for the website, and automate that export if you can. Check that your server sends the right image content type. Renaming a .png file to .webp does not convert it.
A simple rule of thumb
Ship WebP when every step of your publishing path supports it. Keep PNG when you need a lossless source that any editor can open. Export web copies at the size the layout needs. Don't send a full-size master and let CSS shrink it.
For photos without transparency, compare WebP with JPG as well. For icons and logos, try SVG before either PNG or WebP. Picking a format works best as one step in a process that also sets dimensions, makes responsive sizes, compresses and caches the files.
Common cases
Use PNG for a design hand-off, a screenshot someone will mark up or a small graphic where every pixel matters. Make a WebP copy for a live web page when a test shows it saves a useful number of bytes and every publishing step accepts WebP.
For a transparent cutout of a photo, compare lossy WebP and PNG at the final size. The gap can be large. For a simple logo, check whether SVG works better as both the source and the web file before you turn it into pixels at all.
Some images travel through slides, office documents, email signatures and vendor software you don't control. For those, PNG is the safer file. Optimize the web copy on its own. One file rarely suits editing, sharing and fast page loads all at once.
Converting between WebP and PNG
To turn a WebP into a PNG for editing, use a WebP to PNG converter. Going from PNG to WebP shrinks a file for the web. On Convertur, both run in your browser, so the image is never uploaded.
Converting lossy WebP to PNG keeps what is there but can't bring back detail the WebP already dropped. If you have the original PNG, start from that.