Convert PNG to WebP
Same transparent background, now in WebP: convert the PNG logos, cutouts and screenshots on your site, one file or a whole folder.
Your images
Settings
Generated images
- Nothing uploaded
- Free, no sign-up
- Strips EXIF
- Batch files
A speed report on your site flags the logo, the hero graphic and every product cutout as images to serve in a modern format, and all of them are PNGs, because PNG was the only format your designer trusted with a transparent background. WebP has an alpha channel too, which is why the report keeps pointing at those files.
The gap comes from how the two formats work. PNG is lossless by definition, so a product photo exported as PNG is heavy. WebP has a lossless mode that, in the words of Google's 2017 study of 12,000 PNGs crawled from the web, compresses 42% better than libpng and 23% better than ZopfliPNG, plus a lossy mode that keeps the transparency. What this page writes is whatever your browser's encoder produces at the quality you pick, so read the size before and after on each card; WebP and AVIF for websites has the conditions of the study.
Add the whole images folder's worth of files at once. Each comes back with the same base name and a .webp extension, so swapping references in your HTML, CSS or theme is a find-and-replace on .png. The sections below also cover the two cases where WebP is the wrong move: tiny indexed icons and anything headed into an email.
How it works
WebP is preselected on the format bar, so the only real decision is the quality number, and that depends on whether the PNG is a photo or a graphic.
Add the PNGs
Drag the files in, click Choose images, or press Ctrl+V to paste a screenshot. There is no file-count limit; the batch runs on your own processor, so on a modest laptop send a few hundred large PNGs in two rounds.
Pick a quality
The slider opens at 82, a starting point for photographic cutouts. Move it to 90–95 for logos, text and flat illustration, and higher if the edge still looks dirty in Compare. If your browser has no WebP encoder, the WebP button is grayed out and the page delivers PNG and tells you so.
Generate, compare, download
Press Generate images. Every card prints the size before and after with the percentage saved, Compare shows both versions over a checkerboard, and the files leave one at a time or all together as livreimage.zip.
The transparency is kept; check the color under the edge
WebP has an alpha channel, so transparent and semi-transparent pixels in the PNG come through, soft drop shadows included. How the alpha is stored is up to the browser's encoder; this page hands it the pixels and the quality number, nothing more.
Lossy compression changes color, including the pixels right under that edge. On a flat logo or thin outline, a low setting can leave a faint fringe that only shows once the image sits on a background unlike the one it was designed for; MDN recommends lossless encoding for logos and line art for that reason. Convert at 82, open Compare, and regenerate at 95 if the edge looks dirty.
How much smaller: read the card, because no single figure holds
The only measured figures cited here are the ones above, and they are for lossless WebP. For the lossy files the slider produces, the saving swings with the content, and the card prints it per file. What to look at, by type of PNG:
| PNG content | What to check |
|---|---|
| Photo or 3D render exported as PNG | The size on the card; nothing else |
| Screenshot, chart, flat illustration | Small text; go to 90+ if it softens |
| Logo or cutout with transparency | Fringe on a contrasting background |
| Icon with a handful of flat colors | Whether it grew: Google's WebP FAQ warns that a PNG with few colors can come out larger as lossy WebP |
Where the .webp files can and cannot go
Browsers display WebP from Chrome 32, Edge 18, Firefox 65 and Safari 14 on, per caniuse (September 2026); the friction is in whatever receives the upload.
- WordPress has accepted .webp since 5.8 (July 2021), provided the server's image library (Imagick or LibGD) supports the format, as the 5.8 developer note puts it. Ask the host before you upload the folder.
- Squarespace's help center (checked September 2026) lists .webp among the file types it accepts. For any other platform, theme or form builder, test one file before converting the library.
- Favicons are a job for the favicon generator, which writes the .ico file from your PNG.
- Email is out. In caniemail's tests (2021), Outlook for Windows (2007 through 2019) does not display WebP and Gmail converts the file to JPG; signature and newsletter graphics stay PNG or JPG.
What the browser's encoder decides for you
- On load, the page asks your browser for a test image in WebP. If what comes back is not WebP, the WebP button is disabled, output falls back to PNG and a notice says so. The page keeps no list of browsers; the button is the answer.
- An animated PNG (APNG) comes out as a still of its first frame. WebP can be animated, but this page never builds a sequence.
- Text chunks, the embedded color profile and any EXIF are dropped: only pixels are re-encoded.
- Sides over 10,000 px are downscaled before encoding.
Frequently asked questions
Does converting PNG to WebP keep the transparent background?
Yes. WebP has an alpha channel, so fully and partially transparent pixels come through. Check the color under the edge in Compare: that is where a low quality setting shows.
Is the WebP this page makes lossy or lossless?
Treat it as lossy. The page passes the slider value (30 to 100) to your browser's WebP encoder, and what an encoder does at 100 is the browser's decision, not this page's. If you need a file that is guaranteed lossless, keep the PNG.
Why did my WebP come out bigger than the PNG?
Google's WebP FAQ describes the case: a PNG with few colors, such as an icon, a chart or a UI element, can come out larger as lossy WebP. Compare the two sizes on the card and keep the PNG if it wins.
What quality should I use for a logo?
Start at 90 and inspect the edge in Compare. If the logo was designed for a light background, drop the WebP onto a dark one and look for a halo; if you see one, raise the slider and regenerate. 82 is the starting point for photographic cutouts.
WordPress says the WebP file cannot be processed. Why?
WordPress itself has accepted WebP since 5.8, but the developer note for that version ties it to the server: the host's image library (Imagick or LibGD) has to support WebP. Ask the host whether it does, or upload the PNG.
Why did I get PNG files instead of WebP?
Your browser did not return a WebP in the test this page runs on load. When that happens the page grays out the WebP button, warns you and delivers PNG. Open the page in another browser and look at the button again; the test runs on every load.
Do the file names change?
Only the extension: header-logo.png becomes header-logo.webp, inside the .zip as well, so updating references in HTML and CSS is a find-and-replace on .png.
I'm converting an unreleased brand kit. Does any of it leave my computer?
No. Decoding, WebP encoding and the .zip are all done by your browser on your own machine. No PNG or WebP is sent anywhere, and there is no account or upload history to clear afterward.