Convert PNG to WebP

How to convert PNG to WebP

1. Choose one or more PNG images — drag them in or use the file picker.
2. Set the WebP quality if you want a smaller file or sharper output.
3. Download the WebP — a single file, or a zip if you converted several at once.

One .webp extension holds two codecs, and the top of the quality setting switches between them

Lossy and lossless WebP are not two settings on one encoder but two separate schemes under a shared extension. The lossy kind is the intra-frame coding of VP8, the video codec Google open-sourced on 19 May 2010 alongside WebM: a still is treated like a video keyframe, converted to YUV, transformed and quantised. The lossless kind, announced on 18 November 2011, instead uses spatial prediction, a subtract-green and colour-indexing transform, then Huffman codes over LZ77 back-references. Only the second returns a PNG’s exact pixels.

Which one lands on disk here is decided by the quality setting. At any position below 100 the canvas writes lossy VP8, and a PNG’s pixels come back approximated — VP8 also codes colour at 4:2:0, half resolution each way, so red text on a blue panel returns with its colour boundary smeared across the letter edges. Pushed to exactly 100, the browser passes quality 1.0 and silently switches to lossless VP8L, which returns an 8-bit PNG’s pixels unchanged.

The container names which codec it holds in a four-character tag: a plain lossy file carries ’VP8 ’ with a trailing space, a lossless one carries ’VP8L’. Because the setting drives the choice, a PNG re-encoded on this page has a predictable tag — ’VP8 ’ at every setting from 40 to 99, and ’VP8L’ only when the setting reads exactly 100. The extension alone never tells you which of the two you were handed.

A PNG’s transparency survives the trip to WebP even where its colour does not

Transparency reached WebP in the same 2011 update that added the lossless mode, and it was handed to the lossy encoder as well. When this page writes a lossy VP8 file — any setting below 100 — a PNG’s alpha is split into its own ALPH chunk, coded apart from the colour and, by libwebp’s default, without loss: a full 8-bit-per-channel value, the same 256 opacity levels the source PNG held. A drop shadow’s fade to nothing therefore comes across as the PNG drew it.

What survives cleanly is the opacity ramp, not the whole edge. The alpha channel is coded on its own, but the RGB beneath a half-transparent or anti-aliased edge still runs through VP8’s lossy quantiser and the same chroma subsampling. So a PNG’s crisp cut-out mask stays crisp, while the colour just inside that mask — the very place a soft edge blends two hues — is where the setting shows. Only at the very top of the scale, where the file turns lossless, is that colour preserved as well.

In the lossless file that setting 100 produces, the alpha rides inside the VP8L bitstream rather than a separate chunk, so a transparent PNG needs no wrapper to keep it. Either way the cut-out arrives intact: a logo or product shot exported here drops onto whatever background a page later gives it, exactly as it did as a PNG — the one thing about the source that the quality setting can never take away.

Questions