How to Convert PNG to WebP (and When You Should)

When converting makes sense

PNG is a great working and archive format. It’s lossless, widely supported, and handles transparency. But it’s heavy for delivery, especially for anything with gradients, shadows, or photographic content. WebP was designed for the web and supports everything a PNG on a web page usually needs, including transparency, at a much smaller size.

Convert PNG to WebP when:

• The image will be shown on a website or in a web app, such as hero graphics, product cutouts, illustrations, or UI screenshots in documentation.
• Page speed matters and the PNGs are among your largest files.
• You need transparency and JPG isn’t an option.

Keep the PNG when:

• It’s your editing master. Convert copies, not originals.
• The destination requires PNG, such as some app stores, print workflows, or older software.
• The file is going to someone who may open it in an older image editor. WebP support in desktop software is good now, but PNG still opens everywhere.

Lossless vs. lossy WebP

WebP has two distinct compression modes. Knowing the difference helps you predict the result.

	Lossless WebP	Lossy WebP
Pixels	Identical to the PNG	Slightly changed, controlled by quality
Typical size vs. PNG	Often around 20–30% smaller	Often 60–80% smaller for photos and soft graphics
Transparency	Kept exactly	Kept, with the alpha channel compressed separately
Best for	Pixel art, sharp UI, images you may edit again	Product photos, illustrations with gradients, hero images

Pixellin’s PNG to WebP converter uses a quality slider with a default of 85. That’s a visually high setting that keeps edges and text clean in most images while making files far smaller than the PNG. For flat graphics with hard edges, such as text, icons, or diagrams, check the preview. If you see softness around lettering, raise the quality to 90–95.

Transparency stays transparent

A common worry is that the background will turn white or black. With WebP it doesn’t. Transparent and semi-transparent pixels, including soft shadows and anti-aliased edges, are carried over. This is the main reason to choose WebP over JPG when converting a PNG for the web, since JPG has no transparency and fills it with a solid color.

Step by step: convert PNG to WebP

1. Open the PNG to WebP converter.
2. Drop your PNG files onto the page, choose them, or paste one from the clipboard. You can add up to 200 files.
3. Leave quality at 85, or adjust it. Use 90–95 for text-heavy graphics and 75–80 for photographic PNGs.
4. Select Process. Each file shows its original size, new size, and how much was saved.
5. Download files individually, or select Download all to get a ZIP.

The conversion runs in your browser. Your images aren’t uploaded. If you have a mix of formats to convert, such as JPG, PNG, and HEIC, Convert to WebP accepts them all in one batch.

A few things to know about the output:

• Metadata isn’t carried over, and colors are converted to sRGB, the standard color space for browsers.
• If you later want an even smaller file, Compress WebP can re-encode at a lower quality. Ideally, convert again from the original PNG instead, so you don’t stack two lossy passes.

Serving WebP with a fallback

Every current major browser displays WebP, so for most sites a plain <img src="image.webp"> is fine. If you need to support very old browsers or embedded webviews you can’t test, use the <picture> element. The browser takes the first <source> it supports and falls back to the <img> otherwise:

<picture>
  <source srcset="/images/product-cutout.webp" type="image/webp">
  <img
    src="/images/product-cutout.png"
    alt="Blue ceramic mug on a transparent background"
    width="800"
    height="800"
    loading="lazy">
</picture>

Some notes on this snippet:

• The type="image/webp" attribute lets a browser skip the source without downloading it if it can’t decode WebP.
• width and height describe the intrinsic size. They let the browser reserve space before the image loads, which prevents layout shift.
• The alt text, loading, and other attributes go on the <img>, not on <source>.
• Remove loading="lazy" if this is the main image at the top of the page.

For CSS backgrounds, image-set() offers a similar fallback:

.hero {
  background-image: url("/images/hero.png");
  background-image: image-set(
    url("/images/hero.webp") type("image/webp"),
    url("/images/hero.png") type("image/png")
  );
}

The first declaration is used by browsers that don’t understand image-set() with type().

What size savings to expect

Results depend heavily on what’s in the PNG:

• Photos saved as PNG shrink the most, often by 80% or more at quality 85.
• Illustrations and product cutouts with gradients and soft shadows commonly drop by 50–75%.
• Simple flat graphics with few colors may shrink only a little, because PNG already handles them efficiently. For these, also try Compress PNG, which reduces the color palette and keeps the PNG format.

If a converted WebP isn’t meaningfully smaller, keep the PNG. Smaller isn’t guaranteed for every image, and there’s no benefit in switching formats for a few bytes.

WebP or AVIF?

AVIF can be smaller again than WebP at similar quality, and it also supports transparency, but it encodes more slowly. For a broader comparison, see AVIF vs. WebP. WebP remains the safe, fast default for converting transparent PNGs for the web.