PNG vs WebP: Which Format Should You Use?

PNG has been the standard for lossless web graphics for decades. WebP, introduced by Google, can do most of what PNG does and also offers lossy compression. Which one you should use depends on what the image contains and where it is going.

The short answer

• Photos and large illustrations on a website: WebP, usually in lossy mode, gives much smaller files.
• Logos, icons and diagrams: SVG if you have a vector version; otherwise PNG or lossless WebP.
• Screenshots for documentation: PNG or lossless WebP keep text crisp.
• Files for other people to edit, print or open in older software: PNG, because support is universal.

How they compress

PNG is always lossless. Every pixel is stored exactly. It compresses by finding repeated patterns, which works very well for flat colours and sharp shapes and poorly for the fine noise in photographs. A photo saved as PNG is often several times larger than the same photo as JPG or WebP.

WebP has two modes. Lossless WebP stores pixels exactly, like PNG, but usually in fewer bytes. Lossy WebP discards detail that is hard to see, like JPG, and is the mode that gives the big savings on photos. Both modes support transparency.

How much smaller is WebP?

Google's WebP documentation reports that lossless WebP images are 26% smaller than PNGs, and that lossy WebP images are 25 to 34% smaller than comparable JPEGs at equivalent quality (measured with the SSIM index). Those are averages across Google's test images. Your own results will vary: simple graphics may barely change, while photographic PNGs can shrink far more than 26% when converted to lossy WebP, because you are also switching from lossless to lossy.

The only reliable way to know is to try your own files and compare sizes and appearance.

Quality and transparency

Lossless WebP and PNG are both exact. Lossy WebP at a high quality setting looks the same as the original at normal viewing sizes for most photos, but sharp text and thin lines can soften slightly, and colour edges can blur. That is why screenshots and logos are better kept lossless.

Both formats store a full alpha channel, so soft shadows and anti-aliased edges keep their partial transparency. JPG cannot do this, which is the main reason to choose PNG or WebP for cut-out images.

Compatibility

Current versions of Chrome, Edge, Firefox and Safari all display WebP, and most content systems accept it. Some older desktop software, email clients and upload forms still do not. If you must support them, keep a PNG or JPG copy, or serve WebP with a fallback using the HTML <picture> element.

Converting in practice

Image York's PNG to WebP converter uses your browser's WebP encoder, which writes lossy WebP (at quality 0.9 on that page) and keeps transparency. That suits photos and large illustrations. For logos where every edge must stay exact, keep the PNG. Going the other way, WebP to PNG is useful when a program will not open WebP; note that the PNG files Image York writes are limited to a few thousand colours, which is fine for graphics but can cause slight banding in photos.

Common mistakes

• Saving photographs as PNG for a website, which makes pages heavy for no visible benefit.
• Converting a crisp logo to lossy WebP at low quality and getting soft edges.
• Forgetting that dimensions matter more than format: a 4000 px image shown at 800 px wastes bytes in any format. Resize first with the Image Resizer.