PNG to WebP

Drop PNG images here and get WebP copies back in this tab. The browser decodes each PNG, draws it onto a canvas at its own size and encodes it as WebP at the quality you pick — so the picture is compressed again, but the file is usually a fraction of the PNG's weight. WebP carries an alpha channel, so transparent pixels stay transparent; there is no matte colour to choose. Each card reads the PNG header first and tells you the bit depth, colour type, whether it was a palette image or an animated PNG. Nothing is uploaded.

Drop PNG images here

or choose files · up to 30 at a time · batch or single

PNG in, WebP out · up to 30 files per batch · quality 30–100 · transparency kept · no upload · no account · no watermark

PNG to WebP: Where the Bytes Go, and the Setting That Gives Them Back

A PNG becomes a WebP in two steps: the browser decompresses the PNG's pixels onto a canvas, then encodes that canvas again. The picture keeps its width and height. What changes is how many bytes it takes to describe those pixels — and that depends entirely on what is in the picture.

A photograph gains the most. A 12-megapixel PNG of 7,801,255 bytes left this page at 773,732 bytes at quality 85, 90% smaller. A flat two-colour logo went the other way: 1,964 bytes in, 7,124 bytes out. The same encoder, the same setting, opposite directions. The card under each file gives you the number before you download it.

What the browser actually writes

Each output here is four parts: a 12-byte RIFF header, a 10-byte VP8X chunk carrying the canvas flags, a 456-byte ICCP chunk holding an sRGB profile, and the encoded image. That is 502 bytes of container before the first pixel is stored. In lossy mode the picture sits in a VP8 chunk. At quality 100 the encoder switches to VP8L, the lossless codec, and the file becomes pixel-identical to the canvas.

Transparency travels in a separate chunk. A lossy WebP keeps its alpha plane in an ALPH chunk, compressed without loss at every quality setting. Colour and alpha are two streams in one file, which is why the slider can degrade the first and never touch the second.

The PNG's own chunks stay behind. Gamma, chromaticity, text and EXIF data live beside the pixels; a canvas exposes pixels and nothing else, so those chunks end at the decode.

Five PNGs, one setting, two directions

Every file below went through this page at quality 85. PSNR compares the WebP with the pixels the canvas held; "changed" counts pixels where any colour channel moved. For the transparent logo, both figures cover the 42% of pixels that are visible at all.

File	Pixels	PNG	WebP q85	Change	PSNR	Pixels changed
Screenshot of this site at 2×	2560 × 1800	286,385 B	191,278 B	−33%	35.3 dB	52.7%
Photograph	4032 × 3024	7,801,255 B	773,732 B	−90%	42.5 dB	95.6%
Logo with transparency	800 × 800	89,120 B	28,032 B	−69%	40.2 dB	91.8%
Flat two-colour logo	600 × 600	1,964 B	7,124 B	+263%	38.6 dB	52.1%
16-bit grey gradient	4096 × 256	2,807 B	2,538 B	−10%	56.2 dB	16.4%

The screenshot is the row to read twice. It loses a third of its bytes and a third of its edge definition with them: 52.7% of its pixels changed by up to 119 levels, because a lossy WebP spends bits on smooth areas and treats a one-pixel step as noise. The photograph, at the same setting, changes almost every pixel — 95.6% of them — yet never by more than 18 levels, which is why it looks untouched.

The flat logo argues against converting at all. PNG's filter plus deflate stream stores long runs of one colour almost for free; a lossy WebP re-encodes every block and leaves approximations behind. The 2,672 distinct RGBA values in the output, against 2 in the input, are that residue, and it costs 5,160 extra bytes.

The quality dial is not a straight line

The same 12-megapixel photograph, six settings:

Quality	Bytes	vs the PNG	PSNR	Largest channel change	Pixels changed
40	297,072	−96%	37.5 dB	36	97.7%
60	407,888	−95%	39.1 dB	32	97.0%
75	495,876	−94%	40.1 dB	25	96.5%
85	773,732	−90%	42.5 dB	18	95.6%
95	1,491,406	−81%	46.8 dB	9	92.5%
100	6,238,352	−20%	lossless	0	0%

Two segments break the pattern. From 75 to 85 the file grows 56% (495,876 → 773,732) for 2.4 dB. From 95 to 100 the codec changes: 1,491,406 bytes of lossy data become 6,238,352 bytes of lossless data, 4.75 MB more, and every pixel comes back exactly.

That last step is the one people miss when they read quality as a 0–100 scale. In Chrome and Edge, 100 is not "very high lossy"; it is lossless WebP, and on a detailed picture it can end up larger than the PNG. Here it stayed 20% smaller only because this PNG was an uncompressed photographic export.

The 640,000 values the slider never touches

The transparent logo is 800 × 800: 57% of its pixels fully clear, another 10% half-transparent. Three runs — quality 40, 85 and 95 — were compared with the source on the alpha channel alone. 0 of 640,000 alpha values changed at any of them. Colour moved; the mask did not.

The file shows what that guarantee costs. Its ALPH chunk is 15,737 bytes, larger than the 11,784 bytes of VP8 colour data beside it. On a cut-out with a soft edge, most of the file is the shape rather than the picture.

There is a second edge case in the same area: a PNG whose transparency is entirely binary can end up smaller in WebP's lossless mode, because VP8L stores transparent runs cheaply. It is worth trying both settings on a small graphic before assuming the lossy one wins.

A 16-bit PNG lands on an 8-bit canvas

The gradient file is 16 bits per channel, 4,096 pixels wide, brightest value 65,520. A canvas holds 8 bits per channel, so the browser keeps the high byte of every sample before the encoder is called. Against that 8-bit view the WebP was off by at most 1 level on 16.4% of pixels, with PSNR 56.2 dB and 220 distinct levels where the 8-bit view had 256.

For this picture the conversion is nearly transparent, and it also marks the ceiling: whatever the 16-bit file carried above eight bits is gone before WebP is involved. If that depth matters, keep the PNG.

How to convert PNG to WebP here

1. Add the files. Drop PNGs on the box above, choose files, or paste a screenshot. Up to 30 at a time, 80 MB and 100 megapixels per file.
2. Set the quality. The slider runs from 30 to 100 and starts at 85. It re-encodes about a fifth of a second after you stop moving it; there is no run button. Each card reports the new size against the old one.
3. Download. Every card has its own link, and the button under the panel packs the batch into one ZIP built in the tab.

What the controls do

The quality slider is the only setting. It maps straight onto the encoder's quality factor, so 85 sends 0.85 and 100 sends 1.0, which is the point where Chromium's encoder turns lossless. The number box beside it takes a typed value and stays in step with the slider. Batch order follows the order you added the files; names keep their stem and gain .webp. If your browser cannot encode WebP at all, the card says so instead of handing you a PNG with the wrong extension.

Why this page doesn't upload your PNG

The decode, the canvas and the encode all ship with the browser. A server would add a copy, a queue and a download, and none of those makes the picture smaller. Here the file is read into the tab and written back out of it.

Two checks are open to you. Open DevTools (F12), switch to Network, then convert a file: no request carries the image. The harder test is to load this page, disconnect the network and convert anyway. Two files went through with the connection off, and each came back with the same SHA-256 as the online run.

Check the result before you delete the PNG

• Compare the two numbers on the card. If the WebP is not smaller, there is nothing to gain.
• Zoom to 100% on the smallest text. Lossy WebP softens glyph edges first.
• Look at flat colour at 100%. Banding and mosquito noise appear around hard edges.
• Keep the PNG if you will edit the cut-out again: the alpha mask survived, but the colour beneath it did not.
• If exact pixels are the requirement, try quality 100 and confirm on the card that the file is still smaller before deleting anything.

Questions that come up

Does PNG to WebP always make the file smaller?

No. In the five-file test on this page a photograph fell 90% and a screenshot 33%, while a 1.9 KB flat logo grew to 7.1 KB. Flat art with few colours is what PNG was designed to store, and a lossy re-encode adds noise to it. Check the size on the card.

Does transparency survive low quality settings?

The alpha plane does. At quality 40, 85 and 95, all 640,000 alpha values of the test logo came back unchanged, because lossy WebP stores alpha in a separate lossless stream. What changes is the colour of the visible pixels, especially along soft edges.

Is quality 100 lossless?

In Chrome and Edge, yes: the encoder switches to the VP8L lossless codec and the output matched the canvas pixel for pixel in this test. In other browsers the mapping can differ, so compare the card's size and check a crop at 100% before relying on it.

What happens to an animated PNG?

Only the first frame is converted. The page reads the PNG header and warns you on the card when it finds an animation control chunk; the WebP written here is always a still image.

Can I convert the WebP back to PNG?

Yes, but not to the original file. A lossy WebP has already discarded colour detail, and decoding it writes those approximations into a new lossless PNG. If the PNG is your master copy, keep it rather than round-tripping.

Will the WebP open everywhere?

Every current browser displays WebP, including Safari from version 14. Some older image editors, office suites and email clients do not, which is the practical reason to keep the PNG beside the WebP rather than replace it.