PNG or WebP: what changes?
PNG is the classic format for screenshots, logos, icons and anything with transparency. It is lossless, which keeps edges crisp, but files get big, especially for photos or soft gradients saved as PNG. WebP can do everything PNG does (including transparency) and adds a second, lossy mode. That gives you two ways to convert:
| Mode | Pixels | Typical saving vs PNG | Best for |
|---|---|---|---|
| Lossless WebP | Identical to the PNG | About 26% smaller on average | Logos, icons, UI screenshots, diagrams, text |
| Lossy WebP (quality 85) | Very close, tiny changes | Often 60–90% smaller | Photos and illustrations saved as PNG, hero images |
The 26% figure comes from Google’s WebP compression study, which compared lossless WebP with PNGs. Lossy savings vary a lot with the picture: a photo saved as PNG shrinks dramatically, while a flat two-colour logo barely changes.
How the converter works
Your browser decodes each PNG into pixels, then the libwebp encoder, running as WebAssembly in a background worker, writes the WebP. Nothing is uploaded: screenshots of chats, bank pages or private documents stay on your device. File names are kept (logo.png becomes logo.webp), and a batch downloads as a single ZIP.
Which mode should you pick?
Choose lossless when every pixel matters:
- App and website screenshots with small text.
- Logos, icons and line art with sharp edges and flat colours.
- Images you will edit again later.
Choose lossy when file size matters most:
- Photos that someone exported as PNG (common with phone screenshots of photos, or design tools).
- Large banners and backgrounds with gradients.
- Product cut-outs with a transparent background, such as files from our Background Remover. Lossy WebP keeps the transparency and is usually many times smaller than the PNG.
A good habit: try lossless first, look at the new size in the list, then switch to lossy. The list updates by itself, so you can compare both in a few seconds.
Worked example
Take an online shop with 40 product cut-outs, each a 1200 × 1200 PNG with a transparent background, averaging 900 KB, for 36 MB in total. Cut-outs are photos at heart, so lossy WebP at quality 85 typically brings each one down to a small fraction of the PNG.
At that rate the catalogue drops from 36 MB to under 5 MB, with the same transparent edges on every product page. Your own numbers will differ, which is why the tool shows the real size of every file instead of a guess.
Using WebP on a website
- WordPress (5.8+), Shopify, Wix, Squarespace and most site builders accept WebP uploads.
- In HTML, use it like any image:
<img src="logo.webp" alt="Company logo" width="240" height="80">. - For a site favicon, browsers still expect PNG or ICO. Make one with PNG to ICO.
- Emails: keep PNG or JPG, because some email apps do not show WebP.
Tips and edge cases
- Already-optimised PNGs (run through tools such as TinyPNG or OxiPNG) may only shrink a little in lossless mode, or occasionally grow. Keep whichever file is smaller.
- Very small icons (16–64 px) have tiny files either way. WebP’s header overhead can make them slightly larger; for favicons stay with PNG or ICO.
- Animated PNG (APNG): only the first frame is converted. Build animations with the GIF Maker.
- Colour profiles: colours are converted to standard sRGB, which is what web browsers display.
- Other formats: JPG files dropped here are converted too, but JPG to WebP is tuned for photos, and Compress Image can shrink files without changing the format.
Converting back
Some apps, upload forms and older programs still do not open WebP. If you need a PNG again, WebP to PNG converts it back. A lossless WebP converts back to exactly the same pixels as your original PNG; a lossy one keeps the small changes it made.