Skip to content
JFIF.IO
Tutorials

How to Convert PNG to WebP (and Keep Transparency)

A step-by-step guide to converting PNG images to WebP — lossy or lossless — with transparency intact, plus how to use the result on your website.

By JFIF.IO TeamPublished 2 min read

How to Convert PNG to WebP (and Keep Transparency)

PNG is the go-to format for graphics with transparency, but PNG files are large. WebP supports the same transparency with far smaller files, which makes PNG → WebP one of the most useful conversions for anyone building a website.

Lossy or lossless?

WebP has two separate modes:

  • Lossless WebP keeps every pixel exactly. For graphics it is typically around a quarter smaller than an optimised PNG. Choose this for logos, icons, UI elements and anything you may edit again.
  • Lossy WebP discards detail the eye does not notice. For photographs and complex illustrations saved as PNG, it can be many times smaller than the original. Transparency is still supported — the alpha channel is compressed separately.

When in doubt, try both and compare the sizes.

Convert PNG to WebP in the browser

  1. Open the PNG to WebP converter.
  2. Drop your PNG files onto the page (or paste them with Ctrl/⌘+V). You can add many at once.
  3. Open Settings:
    • Turn Lossless on for pixel-perfect output, or leave it off and pick a quality (around 80 is a good starting point).
    • Optionally resize, and keep Remove metadata enabled.
  4. The files convert immediately. Each result shows the new size and how much you saved.
  5. Download files individually or all at once as a ZIP.

Nothing is uploaded: the conversion runs on your device using your browser’s image engine and a WebAssembly build of libwebp.

Using WebP on a website

All current browsers display WebP, so for most sites you can simply use the .webp file in an <img> tag:

<img src="/images/logo.webp" alt="Company logo" width="240" height="80">

If you must support very old browsers, keep the PNG as a fallback:

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

Always include width and height attributes so the browser can reserve space and avoid layout shift.

Common questions

Will the transparent background stay transparent? Yes, in both modes.

Why is my lossless WebP bigger than the PNG? Rare, but it happens with already heavily optimised PNGs or tiny images. Keep whichever is smaller — or reduce colours with Compress PNG first.

Can I convert back? Yes: WebP to PNG. Converting lossy WebP back to PNG preserves what is left but cannot restore discarded detail.

What about AVIF? AVIF can be even smaller than WebP for photographic content. Compare with PNG to AVIF.