How to Convert PNG to WebP Without Losing Transparency
PNG is great for logos and cut-outs but heavy on a web page. WebP can do the same job in fewer bytes and still keep transparency. Here is how to convert, and where lossy compression bites.
Add PNG files, set a quality, and download WebP versions. Runs in your browser.
Convert PNG to WebP and keep the see-through areas
- Open PNG to WebP and add your PNG files. Only PNG is accepted here.
- Leave Quality at 85 or move it in steps of 5 between 10 and 100.
- Press Convert to WEBP and wait for "Done! Download your converted image below."
- Download with Download Image or Download All (ZIP). The ZIP is named
converted-images.zip.
Check the file list afterwards. It shows the size before and after for each file, so you can see whether a given image is better as WebP or as the PNG it was.
Why transparency survives
PNG and WebP both support an alpha channel, which stores how see-through each pixel is. When the tool draws your PNG on a canvas, the transparent pixels stay transparent, and the WebP that is exported carries that alpha data. This is the reason WebP is a good replacement for PNG on websites, unlike JPG, which would flatten the background. If you used a transparent logo on a coloured header, the WebP version behaves identically in a current browser.
One thing worth checking is soft edges, such as a drop shadow or an anti-aliased curve. Lossy compression is applied to the colour part, and at low quality the edge between solid and see-through can show a faint fringe on some images. View the result on both a light and a dark background before you publish it.
Lossy by default: what that means for a PNG
PNG is lossless. The WebP this tool writes is lossy, controlled by the Quality slider. That is how it gets small, and also why it is not a perfect copy. For photographs the changes are usually invisible at 85. For graphics with flat colours, text or thin lines, lossy compression can leave faint smudges around edges, so zoom in and look closely.
| Image type | Suggested quality | Reason |
|---|---|---|
| Photo with a transparent cut-out | 80 to 90 | Photo detail copes well with lossy compression |
| Logo or icon | 90 to 100, or keep PNG | Sharp edges show artifacts first |
| Screenshot with text | 90 or keep PNG | Small text blurs when compressed hard |
| Large decorative background | 60 to 75 | Detail is less critical |
Treat the numbers as starting points and test. The tool has no lossless mode, so for an exact copy PNG remains the answer, and you can shrink it a little with compress PNG without losing transparency.
When WebP does not beat your PNG
A tiny icon of a few kilobytes, or an image that was already optimised, can come out the same size or larger as WebP. A PNG with very few colours often compresses extremely well by its own method. Trust the size comparison in the list. If the WebP is not clearly smaller, the saving is not worth the quality risk, and the PNG is safer in older software.
Using the output
- Website: current browsers display WebP, so you can use it directly. Keep the PNG as a source file.
- Email and documents: support is less predictable, especially in older mail and office programs. Keep a PNG for those uses, or convert back with WebP to PNG, which is explained in this converting guide.
- Upload forms: many still list JPG and PNG only. If a form rejects the WebP, see fixing an image an upload form keeps rejecting.
Dimensions stay the same, and metadata is not copied to the new file. If the image is far bigger than the space on the page, resize it with Resize Image before converting, because fewer pixels save more than any quality setting. For the broader format question, see best image formats for websites.
Test your transparency in thirty seconds
Open the converted file in a browser tab. A transparent image shows on the browser's plain background, usually white or dark grey, so it is hard to judge. Instead, place it on a page with a strongly coloured background, for example in a simple HTML file with background:#ff00aa on the body. If you see a pink halo around the edges, the image has semi-transparent pixels that were pre-mixed with white. The cure is to raise the quality, or to re-export the source graphic with a cleaner edge. It is a quick check that saves a bad surprise on a live site.
If something goes wrong
- The file was ignored. It is not a PNG by type, for example a JPG renamed to .png. Use JPG to WebP, or check with the format detector.
- "Something went wrong while converting your images." Usually a damaged or very large file. Try a smaller copy.
- Edges look rough. Raise the quality, or leave this particular graphic as PNG.
The work is done in your browser, and the ZIP for several files is built there with JSZip, loaded from a CDN when the page opens.
Frequently Asked Questions
Does the WebP keep my PNG transparent background?
Yes. WebP supports an alpha channel, and transparent areas stay transparent after conversion.
Is the conversion lossless?
No. The tool saves lossy WebP controlled by the Quality slider. It is not an exact copy of the PNG.
What quality should I choose?
Start at 85. Use 90 or more for logos and text, and 60 to 75 only for large decorative images. Always check at full size.
Why is my WebP bigger than the PNG?
Small or very simple PNGs can already be tiny, and WebP will not always beat them. Compare the sizes shown and keep the smaller one.
Can I convert several PNGs at once?
Yes. Download them together as converted-images.zip.
Will old software open the WebP?
Not always. Keep a PNG for email, documents and older programs.