Convert PNG to WebP
Same transparent background, a fraction of the bytes: turn the PNG logos, cutouts and screenshots on your site into WebP, one file or a whole folder.
Your images
Settings
Generated images
- Nothing uploaded
- Free, no sign-up
- Strips EXIF
- Batch files
The Lighthouse report on your site flags the logo, the hero graphic and every product cutout under Serve images in next-gen formats, and all of them are PNGs, because PNG was the only format your designer trusted with a transparent background. WebP carries the same 8-bit alpha channel and stores the picture in far fewer bytes, which is why the audit keeps pointing at those files.
The gap comes from how the two formats work. PNG is lossless by definition, so a 1,600-pixel product photo exported as PNG can weigh 3 MB. WebP has a lossless mode that Google measures at about 26% smaller than PNG, plus a lossy mode that keeps the transparency and routinely lands 50–90% below the original. This page writes either one; the quality slider decides which.
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, right for photographic cutouts. Move it to 90–95 for logos, text and flat illustration, or to 100 for a lossless WebP. 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 exactly; the slider only touches the color under it
WebP has a full alpha channel, so every transparent and semi-transparent pixel in the PNG comes through, soft drop shadows included. In lossy WebP the alpha plane is compressed separately from the color, and the browser's encoder stores it without loss: the shape of the cutout is identical at 30 and at 100.
The slider changes the color right under that edge. On a photo cutout the loss disappears into the detail; 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. Convert at 82, open Compare, and regenerate at 95 if the edge looks dirty.
How much smaller: 100 is lossless, 82 is where the big savings are
At 100 the browser switches to WebP's lossless mode: no compression loss, typically 25–35% under the PNG. From 30 to 99 it writes lossy WebP, and how far that drops depends on what the PNG holds:
| PNG content | Typical WebP at 82 | What to check |
|---|---|---|
| Photo or 3D render exported as PNG | 80–90% smaller | Nothing to check |
| Screenshot, chart, flat illustration | 40–70% smaller | Small text; go to 90+ if it softens |
| Logo or cutout with transparency | 50–80% smaller | Fringe on a contrasting background |
| Indexed icon under 5 KB | 0–30%, sometimes larger | Usually not worth converting |
Where the .webp files can and cannot go
Every current browser displays WebP, Safari included; the friction is in whatever receives the upload.
- WordPress has accepted .webp since 5.8 (2021). If it says the file cannot be processed, the host's PHP image library (GD or Imagick) lacks WebP support: ask the host to enable it, or upload the PNG and let a plugin convert server-side.
- Shopify, Squarespace, Wix and Webflow take WebP. Some older store themes and form builders still reject the extension, so test one file before converting the library.
- Favicons stay ICO or PNG: WebP as a site icon is inconsistent across browsers. The favicon generator writes the sizes you need.
- Email is out. Classic Outlook for Windows renders messages with Word's engine, which cannot show WebP; signature and newsletter graphics stay PNG or JPG.
What the browser's encoder decides for you
- Safari has no WebP encoder, on a Mac and in every iPhone or iPad browser, since they all run WebKit: the WebP button is disabled, output falls back to PNG and a notice says so. Chrome, Edge and Firefox on desktop, and Chrome on Android, write real .webp files.
- 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; the output is plain sRGB.
- 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 8-bit alpha channel like PNG, so fully and partially transparent pixels come through, and the encoder stores the alpha plane without loss. Only the color under the edge is affected by the quality setting.
Is the WebP this page makes lossy or lossless?
Both, depending on the slider. From 30 to 99 the browser writes lossy WebP, which is where the 50–90% savings come from. At 100, Chrome, Edge and Firefox switch to WebP's lossless mode: no compression loss (semi-transparent edges can shift slightly through the canvas) and usually 25–35% smaller.
Why did my WebP come out bigger than the PNG?
The PNG was almost certainly an indexed image with a handful of flat colors, such as an icon, a chart or a UI element. Those are already tiny, and lossy WebP spends bytes on the noise it adds around every edge. Try 100 for lossless, or simply keep the PNG.
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; 95 costs almost nothing on a small graphic and removes it. 82 is fine for photographic cutouts.
WordPress says the WebP file cannot be processed. Why?
WordPress itself has accepted WebP since 5.8; that error means the host's PHP image library lacks WebP support, so it cannot generate thumbnails. Ask the host to enable WebP in GD or Imagick, or upload the PNG and let an image plugin serve WebP to visitors.
Why did I get PNG files instead of WebP?
Your browser has no WebP encoder, which today means Safari on a Mac and every browser on an iPhone or iPad. The page grays out the WebP button, warns you and delivers PNG. Open it in Chrome, Edge or Firefox on a desktop, or Chrome on Android, to get .webp.
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.