WebP vs PNG for transparent images

Both WebP and PNG store a transparent background. PNG is lossless and works almost everywhere, including design and print tools. WebP is usually smaller on the web and is supported by current browsers. On this site, the free previews are WebP and the paid full-size files are PNG.

What each format is

PNG is a lossless format with full alpha transparency. MDN's image file type guide describes it as widely supported by all major browsers and as a good choice when you need transparency or a precise copy of a source image.

WebP was made for the web and can be lossless or lossy. The WebP project's overview page says both its lossless and lossy modes support transparency. Lossless WebP stores the image with no change. Lossy WebP gives up some detail to save bytes.

Transparency in both

You do not have to choose a format to keep a transparent background. Both carry an alpha channel, which stores how opaque each pixel is. That is what lets a soft edge, such as fur, blend into any color behind it.

JPEG is the one to avoid for transparent images, because it has no alpha channel. MDN states this directly in the guide linked above.

File size

The WebP project's overview gives these figures from its own tests:

• Lossless WebP files are 26% smaller than PNG files.
• Lossless WebP supports transparency at a cost of 22% additional bytes.
• Lossy WebP with transparency is typically about three times smaller than PNG.

These are the project's numbers for its test images. They are a guide, not a promise for your image. An illustration with flat colors and an image with fine texture compress differently, so compress a few of your own files and measure.

A trade-off follows. Lossy WebP is the smallest, but the loss is permanent. If you edit an image many times, start from a lossless file, and export a small WebP only at the end.

Browser support

The caniuse page for WebP lists first full support in Chrome 32, Firefox 65, Edge 18 and Safari 16.0, with partial support in earlier Chrome versions (9 to 31) and in Safari 14 to 15.6. It reported global usage of about 97% when this guide was written. MDN's guide notes that Safari on macOS needs Safari 14 or later and macOS Big Sur or newer for WebP.

PNG is supported by all major browsers.

If you must serve very old browsers, use a fallback with the picture element, as MDN's picture page shows:

<picture>
  <source srcset="dog.webp" type="image/webp" />
  <img src="dog.png" alt="Dog seen from the side" />
</picture>

A browser that cannot read WebP skips the first line and loads the PNG.

Outside the browser

Support is thinner outside web pages. Some print tools, older office software, and some design or game tools expect PNG, and some do not open WebP at all. Check the format list of the tool you need. If a WebP file does not open, convert it, for example with the WebP project's dwebp command, whose manual shows PNG as the default output:

dwebp dog.webp -o dog.png

When to pick which

What this site serves

Dog Image API serves both, for different jobs:

• Free previews are transparent WebP files at 512 x 512 and 1024 x 1024 pixels. They are free with a visible credit link and can be hot-linked.
• Full-size files are transparent PNG files at 2048 x 2048 pixels, with RGBA color in sRGB. They are about 1 to 7 MB each and come with a paid plan.

The previews suit web pages. The PNG suits editing, print and tools that require it. See pricing for the plans, and the guide to transparent dog PNG images for saving and converting files.