Convert PNG to WebP: Keep Transparency, Cut File Size

Which PNG files shrink the most when you convert to WebP

The savings depend on what is inside the picture, not on the format label. The WebP encoder excels at smooth gradients and photographic detail, which PNG stores inefficiently.

• Photos saved as PNG, often exported from a phone editor or design app: commonly 70 to 90 percent smaller
• Screenshots of apps, dashboards and web pages: a large cut, with small text staying sharp at 85 to 92
• Transparent product cutouts and portraits: big savings, and the alpha channel is kept
• Logos, icons and flat illustrations with few colors: modest gains, and tiny icons can come out larger

Every result card shows the change as a percentage, green when the file got smaller. If a small graphic comes out bigger, keep the PNG for that one; there is no rule that every file must switch.

Transparency: what survives and how to check it

WebP has a full alpha channel, so transparent and semi-transparent pixels carry over from the PNG. Soft shadows, anti-aliased logo edges and wisps of hair in a cutout all keep their partial transparency.

• The preview shows a checkerboard behind each result, so gaps and halos are easy to spot
• Zoom into curved edges and fine details; low quality settings can add faint fringes around them
• If you see a fringe, raise the quality by five to ten points and compare again
• Choosing JPG in the same menu fills transparency with a background color, so stay on WebP for cutouts

A practical test for a logo is to place the WebP on the darkest and the lightest backgrounds it will ever sit on, such as a dark site header and a white slide. If both look clean, the conversion is safe. Converting a PNG with a solid white background does not make that white disappear; remove the background first if you need a cutout.

Picking a quality setting to convert PNG to WebP

The Quality slider runs from 40 to 100 and starts at 80 for WebP. Moving it re-encodes every loaded file after a short pause, so you can watch sizes change live.

• 75 to 85: photos, hero images and product cutouts on websites
• 85 to 92: screenshots with small text, UI mockups, charts and diagrams
• Below 70: thumbnails only, where softness is invisible
• Always zoom to 100 percent on text and edges before accepting a lower number

The output is meant for delivery, not editing, so keep your PNG as the master for future changes, printing and new exports. Conversion also keeps the exact pixel dimensions. A 4000 by 3000 export stays 4000 by 3000, so if the image will display 800 pixels wide, resize it to about 1600 pixels first, then convert. Doing both usually beats either step alone by a wide margin.

Converting a whole folder? The Batch WebP Converter saves time, and this image optimization guide shows where WebP fits.

When the PNG should stay a PNG

Every current major browser displays WebP, including Safari since version 14, and WordPress accepts it as an upload. A few destinations still expect the original format:

• Files people download and open in older or specialist desktop software
• Email newsletters, since several desktop mail clients do not render WebP reliably
• Print shops, sticker makers and print-on-demand services that list PNG or TIFF
• Design handoffs, where a developer or designer wants a lossless source file
• Tiny icons and sprites where the WebP came out larger than the PNG

For a website that must also serve very old software, keep both files and serve the WebP through a picture element with the PNG as a fallback. After converting, remember to update image references in your pages or CMS; a new file on disk speeds nothing up until the site actually uses it.

Step-by-step

Common mistakes to avoid

Pro tips

Frequently asked questions