PNG vs WebP: when does WebP actually save space?

PNG has one mode: lossless. WebP has two, chosen at encoding time. Its lossless mode competes with PNG on PNG's own terms, exact pixels, using different tools (a colour cache, backward references and several transforms) on top of its own entropy coding. Its lossy mode with an alpha plane does something PNG cannot: it lets the colour data be approximated while keeping transparency, which is often what a web graphic actually needs.

MDN's guide says lossless WebP is typically about a quarter smaller than PNG. This page's measurement agrees for the photo and disagrees for the graphic, where the browser's lossless WebP came out larger than its PNG. Averages describe many images; your image is one, which is why the measurement is shown rather than the average alone.

For opaque images, completely: the photo came back pixel-identical from both PNG and lossless WebP. Semi-transparent pixels are the exception. In this measurement the lossless WebP of the graphic changed some pixels slightly, and every one of them was semi-transparent in the original; no fully opaque pixel changed. The measurement records where the changes are, not why. For most uses they are invisible, but if you need bit-exact transparency, compare the output with the original before replacing it.

PNG remains the format every editor, document tool and upload form understands, and it is the safe choice for an image that will be edited and saved repeatedly. WebP is well supported in browsers, but less predictably outside them. A sensible split: keep masters as PNG, publish WebP on your own pages, and convert WebP back to PNG (not JPG) when a WebP with transparency has to go into software that does not read WebP.