shadcn.io— 1,000s of shadcn/ui blocks
Skip to content

Why I convert PNG to WebP (and the one time I don't)

I keep a folder on my desktop called to-shrink. For years it was where screenshots went to die — 2 MB PNGs of dashboards and half-finished mockups that I'd email to people who very much did not need 2 MB of my screen. One afternoon I actually opened the folder and did the arithmetic: it was larger than the app I'd shipped that same week. That's the quiet thing about PNG. It's a wonderful format that wastes an astonishing amount of space, and most of us never notice, because bandwidth is cheap and the file "opens fine."

So let me make the case I wish someone had made to me a lot earlier. If a PNG is headed for a website — anywhere it's going to be looked at rather than edited — it should almost certainly be a WebP instead.

What PNG is genuinely good at

PNG is lossless. Every pixel you put in comes back out, exactly, every time. That is a real virtue — for a master file. It's why your design tool exports PNG, why screenshots are PNG, why anything with crisp edges and transparency reaches for it. Lossless means you can open it, tweak it, and re-save it a hundred times without degrading a thing.

The catch is that "store every pixel perfectly" is a promise you pay for in bytes. Save a photograph as PNG and it faithfully records gradients, sensor noise, and subtle color shifts your eye will never miss if they're merely approximated. You're paying full retail for detail nobody can see.

What WebP does that PNG can't

WebP was Google's answer to a simple question: what if we just made a better format? It does two things PNG cannot. It can compress lossily when you want — discarding the imperceptible stuff the way JPEG does, but more cleverly — and it keeps a full alpha channel while doing it. That second part is the quiet miracle. For years the trade was "transparency or a small file, pick one." WebP is both at once.

In practice, converting a photographic or screenshot-heavy PNG at a sensible quality lands somewhere between 60% and 90% smaller. Not 10%. A 1.8 MB screenshot becomes roughly 250 KB, and placed side by side you cannot tell which is which. I've run that test on myself more times than I'd like to admit, certain I'd catch the WebP out. I never do.

The comparison that made me a believer

Rough numbers from a batch I converted last month:

Source PNGAs WebP
A UI screenshot — 1.8 MB~240 KB
A hero photo — 3.1 MB~380 KB
A flat two-color logo — 42 KB~30 KB

Look at the logo. It barely moved — and that's the footnote that matters.

When I don't bother converting

Simple graphics — flat colors, a handful of them, hard edges — are exactly what PNG was built to compress, and it does the job about as well as anything. A two-color icon, a line-art diagram, a QR code: leave them as PNG, or better still ship them as SVG if you have the vector. WebP won't hurt those files, but it won't meaningfully help either, and you've added a step for nothing.

The other time I don't convert is the master. I never touch the only copy of something. WebP's lossy mode is a one-way door: the detail you drop, you don't get back. So here's the single rule I never break — convert the copy you publish, keep the original where you edit. On my machine that's literally two files: the PNG stays in the project folder, the WebP goes to the site. Cheap insurance, and I've never once regretted it.

"But does it actually work everywhere?"

This used to be the real objection, and it just isn't anymore. Every browser people actually use has supported WebP since around 2020 — Chrome, Safari, Firefox, Edge, all of them. Email clients are still spotty and some old enterprise software is weird about it, so for a newsletter I'll still reach for JPEG. But for the open web? Serving WebP with no fallback stopped being a brave choice years ago.

How I'd actually do it

The honest reason I built the PNG-to-WebP converter on this site is that I got tired of dragging screenshots into random web tools to shrink them, never quite sure where my files ended up afterward. So the version I'd recommend is the boring, private one: convert on your own machine, in the browser, where the file never leaves your device. Drop the PNGs in, watch the size column drop, download the WebP.

But the tool is beside the point. The point is the habit. Once "PNG to edit, WebP to ship" becomes automatic, you stop sending 2 MB screenshots to people, your pages get faster for free, and that to-shrink folder on your desktop finally stays empty. Mine has, for about a year now. Small victory — I'll take it.

Related posts


All posts