How to use it
- Drop your PNGs in.
- For graphics and logos, keep quality at 85 or above. For photos, 75 to 80 is plenty.
- Download the WebP versions.
The case for WebP over PNG
Product photos on a transparent background are a classic website headache. As PNG they are often 1 to 3 MB each because PNG must store the photographic part losslessly. As JPG they are small but lose the transparency. Lossy WebP keeps the alpha channel and compresses the colour part like a photo format, so the same image often comes in at a tenth of the PNG size.
Where to be careful
Pixel art, tiny icons and UI graphics with hard edges are where lossy compression can smear things. Look closely at thin lines and small text after converting. If you see fuzz, push the quality up to 95 or keep those particular files as PNG, perhaps run through the PNG compressor instead.
Soft edges, shadows and semi-transparent areas are kept. The transparency channel in lossy WebP is compressed losslessly by default here, so edges stay clean even at lower quality settings.
PNG and WebP compared
| PNG | WebP | |
|---|---|---|
| First released | 1996 | 2010 |
| Compression | Lossless | Lossy or lossless |
| Transparency | Yes, including soft edges | Yes |
| Animation or pages | Only as APNG, rarely used | Animation |
| Best for | Screenshots, graphics, text and transparency | Images on websites |
| Support | Universal | All current browsers; some apps and forms still refuse it |
Questions people ask
Does PNG to WebP keep transparency?
Yes, including partial transparency such as drop shadows and anti-aliased edges.
Why is my WebP only slightly smaller?
Simple graphics with a handful of flat colours are already tiny as PNG. WebP saves the most on photographic images and gradients.
Can I convert the WebP back to PNG later?
Yes, with the WebP to PNG converter, though any detail lost to lossy compression will not come back. Keep your original PNGs.