WebP vs PNG: Which Image Format Should You Use?

The short answer

For images on a website, WebP is usually the better choice, because it keeps transparency and gives a much smaller file. For editing, exact pixels and maximum compatibility, PNG is the safer choice. Most sites use both: PNG as the master file and WebP as the published copy.

WebP vs PNG compared

File size: where WebP wins

PNG stores every pixel exactly, which is perfect for editing but expensive for photos and large screenshots. Google reports that lossless WebP files are about 26% smaller than PNG (see Google’s WebP documentation), and lossy WebP can be smaller still.

The AllWebP converters create lossy WebP at the quality you choose, so your saving can be larger than the lossless figure. It also depends on the image: a photo saved as PNG shrinks a lot, while a tiny flat-colour icon may barely change. Always check the size shown next to each result.

Transparency and edges

Both formats support transparent backgrounds, including soft edges such as shadows. After converting a PNG to WebP, preview the result on a light and a dark background to make sure the edges look clean. If you see a faint halo at low quality, raise the quality slider.

Use PNG to WebP to convert a PNG and keep its transparency, or WebP to PNG to go back.

Choosing the WebP quality

PNG has no quality setting because it is lossless. With WebP you trade a little detail for a smaller file, so start at the higher end for graphics with sharp edges.

Compatibility and software

All current major browsers display WebP. PNG, however, is understood by practically every program, printer, game engine and design tool. If a file will be opened outside the browser, or sent to someone whose software you do not know, PNG is the safer format.

Which should you use?

A simple workflow

1. Keep every original as a PNG master.
2. Resize the image to the size you need with Resize Image.
3. Convert a copy to WebP at 85 to 90% for graphics, or 75 to 85% for photographic images.
4. Compare the sizes, view the result on a real page, and upload the WebP.

Mistakes to avoid

• Converting your only copy and deleting the PNG.
• Using a very low quality on logos, which blurs edges.
• Converting the same image back and forth, which adds loss each time.
• Replacing tiny icons that were already small.

Using WebP in WordPress

WordPress has accepted WebP uploads since version 5.8. Convert your PNG graphics first, upload the WebP files, and keep the PNG masters outside the media library. If you want the full steps, read how to use WebP images in WordPress.

A real-world example

Picture a website with a large PNG banner and ten PNG screenshots in one article. Each file is saved without loss, so the page weighs several megabytes and loads slowly on a phone. Converting a copy of every image to WebP at 85 to 90% usually makes the page far lighter, while the images still look the same at normal size. You keep the PNG masters, so nothing is lost for future edits.

Editing and design tools

Design tools handle PNG without trouble, and many editors can now open WebP, but support is not yet equal everywhere. Plan your work around that: edit and export masters as PNG, and treat WebP as the delivery format for the web. If you need to open a WebP in an older editor, convert it first with WebP to PNG.

What about animation?

Standard PNG does not animate, and WebP does. If you have a short animation that is currently a GIF, animated WebP is usually smaller. The AllWebP converters work with still images, so for an animated file they use only the first frame.

Frequently Asked Questions