A transparent PNG can be useful as a master copy of a logo, product cutout or icon, but you may want a WebP version for a website. WebP supports transparency, so a format change does not have to add a white rectangle around the subject. The two things to check are whether the background stays transparent and whether the visible details still look right.
This guide uses the Image Format Converter to make a WebP copy, then checks that copy against the PNG. Keep the original file so you can return to it if a later design or export needs a different format.
What transparency means in a PNG or WebP
An alpha channel describes how opaque a pixel is. It lets an image have fully transparent corners and partially transparent details such as a soft shadow. Both PNG and WebP can store this information. JPG cannot store an alpha channel, as documented in MDN’s image format guide.
A white background in a preview does not tell you whether the file is transparent: white pixels and transparent pixels displayed over white can look identical. Check the image over more than one background before accepting the conversion.
Convert a transparent PNG to WebP
1. Load the original PNG
Open the converter and use Choose an image to convert, or drag the PNG onto the drop area. The displayed file limit is 20 MB. After the file loads, the tool shows its detected format, pixel dimensions and file size. Confirm that the source is PNG and that you selected the intended version of your artwork.
The converter exports at the loaded image’s width and height. If the image also needs different dimensions, use the separate workflow in How to Resize an Image Without Stretching It, then check the resized result before converting its format.
2. Select WebP and start at quality 85
The Convert to dropdown offers JPG, PNG and WebP. A PNG source selects WebP automatically when the browser passes the tool’s WebP encoding check; confirm the selection yourself. The quality slider starts at 85 and runs from 10 to 100.
For a first comparison, leave quality at 85. A lower value can reduce the output size while changing visible detail. For small lettering, thin outlines or a textured product edge, make another copy at a higher value if the first looks softened. A value of 100 is not a promise of a lossless WebP export: this tool exposes a quality setting, not a separate lossless mode.
There is no background-fill setting for WebP in this tool. The Fill transparency with white checkbox appears for JPG, where it is selected by default. Choosing JPG and applying that fill produces an opaque white background; it does not preserve the original transparency.
3. Convert, compare and download
Press Convert image. The result area shows the source format and size, the new format and size, a percentage size change, and a preview with the output filename. Read New format and confirm that it says WebP. Then press Download converted to save the file.
The size comparison is useful for this specific image. A WebP copy is not guaranteed to be smaller than every PNG, particularly a small graphic that was already efficiently encoded. Accept the new copy only if its size and appearance suit the job.
Check the downloaded file’s transparency
Use an image editor that can open WebP and display a transparency checkerboard. Open both the original PNG and the downloaded WebP. This check is separate from the converter’s preview; the converter does not provide a checkerboard switch.
- Check an empty corner. The editor’s checkerboard should show through the same empty areas in both files. If you see a solid rectangle in the WebP, confirm the source was actually transparent and that the downloaded result was WebP rather than JPG.
- Check a soft edge. Look at a shadow, antialiased curve or partially transparent part of the artwork. Compare it with the PNG at 100% zoom, then at the size it will appear on the page.
- Try light and dark backgrounds. Place each image above a temporary white layer, then above a dark layer. An unwanted pale fringe may be difficult to see on white and obvious on dark. Compare the same edge in the original; a fringe already present in the PNG needs attention in the source artwork.
- Check the actual placement. Preview the WebP on the intended page or design background. Confirm that the cutout, shadow and fine details work together at the final display size.
For a simple practice file, use a PNG containing a colored shape with transparent corners and a soft shadow. Those three regions let you inspect opaque color, complete transparency and partial transparency separately. Avoid using a screenshot of a checkerboard as your source: its squares may be ordinary pixels baked into the image.
A small conversion we checked
On 10 October 2026, we tested the converter with a generated 320 × 200 PNG containing a blue rectangle, a partially transparent border and transparent corners. At quality 85, the 1,271-byte PNG produced a downloadable 944-byte WebP with the same dimensions. Decoding the downloaded file confirmed alpha values of 0 at a transparent corner, 128 on the partial border and 255 inside the opaque rectangle, matching the source at those three points.
This is one synthetic sample, not a size forecast for other images or a check of every pixel. The measured alpha values confirm those transparent, partial and opaque areas survived this conversion. Colors, lettering and photographic detail still need their own visual comparison.
Transparency and image quality are separate checks
A WebP can keep a transparent background while its colored pixels change through lossy compression. Google describes a WebP mode with lossy color and lossless alpha. That distinction explains why an intact cutout does not prove that lettering, texture or edge colors are unchanged. Check both the empty areas and the subject itself.
| Format | Transparency | Use in this workflow |
|---|---|---|
| PNG | Supported | Keep the original transparent artwork. PNG uses lossless compression and has no quality slider in this converter. |
| WebP | Supported | Make a website copy and compare its size, fine detail and edges. The converter provides a quality slider. |
| JPG | Not supported | Use only when an opaque background is acceptable. The tool can fill transparent areas with white. |
If sharp text or a logo’s edges remain unsatisfactory after raising WebP quality, keeping that asset as PNG can be the better choice. The successful result is a file that meets the visual requirement, not simply one with a different extension.
If WebP encoding is unavailable
The converter checks whether the browser can encode WebP and displays a warning if that check fails. In that case, keep the PNG or use a browser that passes the check. Selecting JPG as a substitute would discard the transparency you are trying to preserve.
The underlying browser export method can return PNG when a requested format is unsupported; MDN’s canvas export documentation describes that fallback. The converter reads the returned format, shows it under New format, and uses it for the download extension. Checking that reported format is more reliable than assuming the dropdown selection guarantees a WebP file.