PNG vs WebP — Which Should You Use?

Choose PNG when

When the file leaves the web — into a print workflow, an old design tool, an email attachment somebody will open in whatever they have. PNG is understood by everything written in the last twenty-five years.

Choose WebP when

For anything served to a browser. WebP does lossless like PNG and lossy like JPG, and its lossless mode is usually a quarter smaller than the same PNG for no visible difference at all.

The thing that catches people out

WebP has two modes and they behave nothing alike. Lossless WebP replaces PNG; lossy WebP replaces JPG and will soften a screenshot exactly as JPG does.

What PNG to WebP actually does

A generated landscape with a low sun and three ridges, used to show what JPEG does to continuous tone. Shown as PNG. — A photographic scene — smooth gradients, soft edges, grain. This is the case WebP is designed for or against, and the figures show which. Both images are drawn in code and encoded by the same converter that runs on this page, so the sizes are this site's own output.

A generated landscape with a low sun and three ridges, used to show what JPEG does to continuous tone. Shown as WebP. — A photographic scene — smooth gradients, soft edges, grain. This is the case WebP is designed for or against, and the figures show which. Both images are drawn in code and encoded by the same converter that runs on this page, so the sizes are this site's own output.

A generated badge: a circular gradient on a transparent background with a white bar across it, used to show what each format does with transparency and with hundreds of shades. Shown as PNG. — A transparent background and a gradient across the shape. WebP either keeps both, keeps one, or fills the transparency with a solid colour — which is the difference that catches people out. Both images are drawn in code and encoded by the same converter that runs on this page, so the sizes are this site's own output.

A generated application window with a sidebar, a table and a bar chart, used to show what JPEG does to flat colour and hard edges. Shown as PNG. — Flat colour and hard edges, as in an interface, a chart or a logo. Very different behaviour from the photograph above, and the reason the answer is "it depends what is in the file". Both images are drawn in code and encoded by the same converter that runs on this page, so the sizes are this site's own output.

A generated application window with a sidebar, a table and a bar chart, used to show what JPEG does to flat colour and hard edges. Shown as WebP. — Flat colour and hard edges, as in an interface, a chart or a logo. Very different behaviour from the photograph above, and the reason the answer is "it depends what is in the file". Both images are drawn in code and encoded by the same converter that runs on this page, so the sizes are this site's own output.

Side by side

	PNG	WebP
Full name	Portable Network Graphics	WebP Image
Extension	.png	.webp
Media type	image/png	image/webp
Compression	Lossless — nothing is discarded	Either, depending on the setting
This site can write it	Yes	Yes

Decided? Convert it here

Where these figures come from

The claims this page makes about PNG and WebP are checkable, and these are the documents that settle them.

Portable Network Graphics (PNG) Specification, Third Edition
W3C — PNG’s lossless compression and its alpha channel
WebP Container Specification
Google — WebP’s lossy and lossless modes in one container