Convert PNG to WebP
This is the conversion that pays best on a real website. A PNG records every pixel exactly, so anything photographic saved as one is carrying several times the bytes it needs, and WebP keeps the transparency that made you choose PNG in the first place. The interesting question is not whether to do it — it is which of your PNGs are worth doing at all.
Nothing is uploaded. Every image stays in this browser tab —here is how that works.
Which of your PNGs are actually worth converting
Sort them by what is in the picture rather than by how big the file is.
Photographs, and screenshots with photographs in them, are where the money is. A PNG of a photograph is the most inflated file on most websites, and this is the case where the difference is not close.
Interface screenshots, charts and flat illustrations shrink too, usually by half or better — and this is where to look closely at the result, because flat colour and thin lines are the material a lossy encoder handles least gracefully.
Icons, small logos and anything under a couple of kilobytes are frequently not worth converting. Every WebP carries container overhead, and below a few kB that overhead is a meaningful share of the file: turning a 900-byte PNG into a 1.2 kB WebP is an entirely ordinary outcome. If those files are logos or icons, the format you want is SVG, which beats both and never needs a second size.
Transparency survives, and it is compressed too
The alpha channel comes through, which is the main reason to prefer WebP over JPG for site graphics. What is less obvious is that WebP compresses the transparency as well as the colour, so a soft edge is approximated rather than stored exactly as it was.
You will never see this on a hard-edged cut-out. You can occasionally see it on a large, soft shadow fading to nothing across a flat background, as faint stepping in the fade. If that image is one where the shadow is the design, push the quality up to 90 and compare, or leave that single file as a PNG and convert the rest.
What to set for a batch of site images
Cap the width first, at the widest that image will ever be drawn, doubled for high-density screens. It is the single biggest lever on any web image and it costs nothing visually.
Then choose a quality. 80 is reasonable for photographs; flat graphics and screenshots containing text usually want more, because the artefacts land on the very edges you are reading. And if the constraint is a performance budget rather than an appearance one — every hero under 150 kB, say — set max file size in kB instead and let the encoder find the quality that fits it.
Swapping them into a site that is already live
Converting the files is the easy half. The page still points at hero.png, and until something changes that reference every visitor keeps downloading the old one. In a CMS this usually means uploading each WebP as a new asset and re-selecting it everywhere it appears — a media library will not swap a file underneath its own URL. On a hand-built site it is a find-and-replace across the templates, plus a look through your CSS for background images with the old extension.
Two things worth doing while you are in there: check that any width and height attributes still match, if you capped the dimensions on the way through, and clear the CDN cache afterwards, because a proxy holding the old response will keep handing out the file you just replaced for as long as its TTL allows.
What changes when you convert PNG to WebP
This is the first lossy step for these pixels — Trade-off
The encoder discards detail it judges you will not miss, and the quality slider decides how much. That trade is what buys the size reduction, and it is irreversible — converting back later restores the format, never the detail. Start at the default and lower it only until you can see the difference, then go one step back.
WebP cannot exceed 16,383 pixels on a side — Trade-off
That is a hard limit in the format, not a setting. An image wider or taller than 16,383 pixels — a long screenshot, a panorama, a scanned map — has to be scaled down to fit, and the tool does that automatically rather than failing. If you need the full resolution, JPEG or PNG will take it.
WebP is roughly 25–35% smaller than JPEG, and every current browser reads it — Benefit
WebP is the safe modern default for the web: meaningfully smaller than JPEG at the same visual quality, with real transparency, and supported by every browser released in the last several years. Older desktop software is a different question — some image viewers and editors still will not open one.
Your PNG is pixel-exact, so this is the first loss it has seen — Note
PNG stores every pixel exactly as it was written, which means the file you are starting from is the best version that has ever existed. Anything lossy you convert it to is a one-way step — keep the PNG if it is a master copy and treat the output as a distribution format.
Camera and location metadata are not carried over — Note
EXIF is dropped: the camera model, the exposure settings, the timestamp, and — the one that matters — the GPS coordinates of where the photo was taken. That is a privacy improvement for anything you are about to publish and a loss if you were relying on it for cataloguing. Orientation is the exception: it is applied to the pixels, so the image stays the right way up.
Output is sRGB — Note
Everything this tool writes is in sRGB, the colour space the web assumes. That is what makes the result look the same in a browser, a chat app and a photo viewer without an embedded profile to carry around.
Questions people ask about this conversion
Is WebP smaller than PNG for logos and icons?
Usually, but not always, and rarely by enough to matter below a few kilobytes. For a flat logo the honest answer is SVG — a drawing rather than a grid of pixels, so it is smaller than either and stays sharp on any screen. Convert to WebP when you have a raster you cannot replace.
Does the transparency survive?
Yes. WebP has a full alpha channel just as PNG does, so cut-outs, rounded corners and soft shadows all come through intact. The only thing worth inspecting is a very large, very gradual fade, where compressing the alpha channel can leave faint stepping in the gradient.
Why is my converted file bigger than the PNG was?
Two likely reasons. Either the PNG was tiny to begin with, and WebP’s container overhead is a real share of a file that small. Or the picture is flat colour and hard edges — a screen of interface, a simple diagram — which is the one thing PNG compresses better than almost anything. Keep the PNG in both cases.
Can I convert hundreds of files at once?
Yes. There is no file-count limit because there is no server to impose one. The work is done by your own CPU cores, several images at a time, and the ZIP is written as files finish rather than held in memory. A few hundred web-sized images is a couple of minutes.
Related
Other things you can turn a PNG into
Try it with your own file
Drop an image in and see the result before you download anything.