PNG vs WebP: The Transparency Question

Both formats keep transparency, so the choice for a logo comes down to a single trade: WebP is smaller, PNG opens everywhere. Here's which to reach for.

Flat vector illustration in deep plum of a designer's desk: a monitor showing a round logo on a grey-and-white transparency checkerboard, with a pencil cup, stylus, coffee mug and hanging plants around it

PNG and WebP both keep a transparent background, so for a logo or cut-out the choice isn't about transparency at all — it's about smaller files versus works-everywhere. WebP wins on size, often by a lot. PNG wins on compatibility, still. Which matters more depends entirely on where the image is going.

This is a narrower question than JPG vs PNG, because JPG is out of the running the moment transparency is involved — it has no alpha channel, so a transparent logo saved as JPG comes back with a white box around it. Both formats here can do the job. The question is which does it better for your case.

What they share

Both carry a full alpha channel, so partial transparency — the soft edge on a cut-out, a drop shadow fading to nothing — survives in either. Both are the right answer for logos, icons, product cut-outs, and anything with see-through areas. If you're not sure what that channel actually is, our guide on alpha transparency is the place to start.

Where they differ

PNG and WebP compared on transparency, file size and compatibility A comparison matrix. Both PNG and WebP keep transparency. WebP produces a smaller file; PNG does not. PNG opens in essentially all software; WebP does not open in some older software. So both keep transparency, WebP is smaller, and PNG is more compatible. Keeps transparency Smaller file Opens everywhere PNGWebP yes no yes yes yes not quite
The two green columns are why it's a real decision: WebP is smaller, PNG is universal, and both keep the transparency JPG can't.

Choose WebP when it's for the web

A transparent PNG can be surprisingly heavy — lossless compression has little to work with once an image has photographic or shaded content. WebP stores the same transparent image at a fraction of the size, which is exactly what a fast-loading page wants. PNG to WebP converts a logo or a whole folder, and because WebP also has a lossless mode (push the quality slider to 1), you can get a pixel-identical copy that's usually still smaller than the PNG — see lossless compression for why that's possible. Our WebP explainer covers the format in full.

Choose PNG when it has to work everywhere

Some older design tools, certain print and print-on-demand services, a few CMS uploaders, and the occasional email client still won't take a WebP. If the file is going somewhere you don't control — a client's machine, a print shop, a marketplace listing — PNG remains the safe default. If you've been handed a WebP logo and your software rejects it, WebP to PNG gets you back to the universal format with its transparency intact.

First, make sure it's actually transparent

Neither format can preserve transparency that isn't there yet. If your logo or subject still sits on a solid background, you need to cut it out first — Remove Background does that on your device and outputs a genuine alpha channel, and our guide on removing a background is blunt about the most common way people then lose the cut-out: saving it as JPG. Whichever of PNG or WebP you land on, don't let the file pass through JPG on the way.

And if the PNG you already have is simply too big, Compress PNG shrinks it without touching the alpha channel — a middle path when switching formats isn't an option.

FAQ

Does WebP support transparency like PNG?
Yes — WebP has a full alpha channel, including partial transparency, so soft edges and fades come through exactly as they would in PNG.

Is a transparent WebP smaller than a transparent PNG?
Usually, and often by a wide margin. Even WebP's lossless mode tends to beat PNG on size while staying pixel-identical.

Should I use PNG or WebP for a logo on my website?
WebP, for the smaller file — with a PNG fallback if you need to support very old browsers or hand the logo to software that might reject WebP.

← Back to all guides