PNG to WebP Converter

It depends on what’s in the image. PNG never discards anything, so photos and screenshots saved as PNG are far bigger than a web page needs, while a small icon is already tiny. Measured with this converter in Chrome:

Photos gain the most, and screenshots and logos still shrink by more than half. Text in the test screenshot stayed crisp at 85%. Tiny, simple images are the exception: a WebP made in Chrome carries a colour profile of about half a kilobyte that a small PNG does without, so an icon of a few hundred bytes gets bigger. The results list marks those with a plus sign; keep the PNG for them.

WebP stores transparency, so logos, icons and cut-out product photos keep their see-through areas, including soft edges and drop shadows. In the logo test above, all 31,718 partly transparent pixels kept exactly the same transparency, at 85% as well as at 100%. At 85% only the colours are compressed; the transparency itself is stored without loss.

To cut the empty margin around a logo first, use Trim Transparent Images, then convert the result here.

WebP has two modes. Lossy, used at any setting below 100%, discards detail you’re unlikely to notice and gives the big savings in the table. Lossless discards nothing, like PNG, and is usually still smaller.

There’s no separate switch: in Chrome, Edge and Firefox, setting the slider to 100% makes a lossless WebP. In Safari and every browser on iPhone and iPad, this converter makes lossy WebP even at 100%, so use Chrome, Edge or Firefox on a computer when you need lossless.

Lossless suits diagrams and screenshots that must stay pixel-perfect. For anything that just needs to look right on a web page, 85% is the better trade.

All current browsers display WebP, including Safari since 2020 (iOS 14 and macOS Big Sur), so for most sites you can upload the WebP and use it wherever the PNG was. WordPress has accepted WebP uploads since version 5.8 in 2021.

To give very old browsers the PNG instead, put both in a picture element. Browsers that understand WebP load it; the rest skip the source line and load the img:

<picture>
  <source srcset="logo.webp" type="image/webp">
  <img src="logo.png" alt="Company logo" width="400" height="300">
</picture>

Keep the width and height on the img so the page doesn’t jump while images load. And before converting a large image, resize it to the size it’s shown at: a 4000-pixel-wide PNG shown at 800 pixels carries 25 times the pixels it needs, which no format can make up for.

• Files you’ll edit again: keep the PNG as your master copy and convert a copy for the web.
• Email, documents and upload forms: older software and some upload forms only accept PNG or JPG. WebP is meant for web pages.

If a WebP ever needs to go back, the WebP to PNG converter keeps its transparency, though not any detail a lossy WebP left out.