PNG vs WebP for websites: which should your images be?

WebP vs PNG is a choice most websites no longer need to agonise over: WebP does everything PNG does on a web page, including a transparent background with soft edges, in a smaller file, and every current browser displays it. The cases where PNG is still the better choice are real but specific: files people download, images in emails, platforms that refuse WebP uploads, and the master copy you keep for editing.

This guide compares PNG vs WebP on the points that matter for a site: file size, transparency, visible quality, browser and platform support, and how to switch without breaking anything. Browser support was checked on caniuse.com on 16 September 2026. For the three-way comparison including JPG, getSVG has a companion guide, WebP vs PNG vs JPG.

PNG vs WebP at a glance

The size figures are from Google’s WebP documentation, which says lossless WebP images are 26 percent smaller than PNGs and that lossy WebP with transparency typically gives files three times smaller than PNG. Real savings depend on the picture: flat graphics save less, photographic cutouts save more.

File size: where WebP wins

PNG compresses losslessly with an algorithm designed in the 1990s. Lossless WebP keeps every pixel exactly too, but uses newer techniques: better prediction of each pixel from its neighbours, a colour cache for repeated colours, and transforms that separate colour information more efficiently. The same picture comes out around a quarter smaller with no difference at all in the pixels.

Lossy WebP goes further by rounding off fine detail the eye does not notice, like JPG. For a photographic image with a transparent background, such as a product cutout, that is where the big saving is. A transparent product photo saved as lossy WebP at a quality around 80 commonly comes out at a third of the PNG’s size or less, with no difference visible on a shop page.

On a page with twenty product images, that is the difference between a page that loads in a moment on a phone and one that visibly fills in. Image weight is typically the largest part of a page’s download, which is why speed tools such as Google’s PageSpeed Insights flag images not served in modern formats.

Transparency: the same on both

This is the question that usually decides it, and the answer is reassuring. WebP carries a full alpha channel, 256 levels of opacity per pixel, in both lossless and lossy modes. A hair edge that fades softly into transparency in a PNG fades the same way in a WebP. What a transparent background actually is explains alpha if the term is new.

In lossy WebP the colour and the alpha are compressed separately. Google’s cwebp encoder stores the alpha losslessly by default (its -alpha_q setting defaults to 100), so the outline of a cutout stays exactly where it was even when the colours inside it are compressed. That is a real advantage over tricks like putting a JPG on a matching background colour, which breaks the moment the page background changes.

Two things to watch. Lossy WebP stores colour at half resolution, like JPG, so a thin, saturated red or blue line can look slightly soft; for logos and interface graphics with fine coloured detail, use lossless WebP. And if a WebP cutout shows a pale fringe, it was almost certainly in the PNG it came from; white halos around a cutout explains the cause.

Browser support for WebP

Every current browser displays WebP. From caniuse.com on 16 September 2026:

• Chrome from version 32, and Chrome for Android.
• Edge from version 18.
• Firefox from version 65.
• Safari from version 14, on iPhone and iPad (iOS 14) and on the Mac, with full support from Safari 16.

caniuse.com put support at about 97 percent of browsers in use. The remainder are browsers that also struggle with much of the modern web, such as Internet Explorer. For nearly every site, a PNG fallback is no longer necessary; if yours has an unusual audience, the fallback pattern below costs very little.

Where PNG is still the better choice

• Files people download. A logo pack, a press kit, a sticker or a printable. People open those in Word, PowerPoint, older editors and print shop upload forms, where PNG is far more dependable.
• Email. Email apps are much less consistent than browsers, and some do not display WebP. For newsletter images PNG or JPG is the safe choice.
• Platforms that reject WebP. Some marketplaces, form builders and older CMS setups accept only JPG and PNG. Check the upload rules; product photos on a white background covers what the big marketplaces ask for.
• Link previews and icons. The image shown when a page is shared on social networks and messaging apps is fetched by each platform’s own crawler, and those vary; many sites keep that one image as PNG or JPG to be safe. Favicons have their own conventions too.
• The master copy. Keep the original PNG you exported WebP from. Converting WebP back to PNG later works, but a lossy WebP cannot give you back what it rounded off.
• Very large images. WebP cannot exceed 16,383 pixels on a side. That rarely matters on a web page, but it does for panoramas and huge maps.

What your CMS or platform does

Before converting by hand, check whether your platform already does it for you. Many hosted shop and site builders and most image CDNs convert uploaded PNGs and JPGs to WebP (or AVIF) automatically for browsers that support it, in which case uploading a well-made PNG is exactly right and converting first gains nothing.

WordPress has accepted WebP uploads since version 5.8 and AVIF since 6.5, the latter only when the server’s image library supports it. Whether it serves WebP in place of an uploaded PNG depends on your theme, host and plugins. What is AVIF covers the format that goes one step beyond WebP, and whether it is worth adding.

How to switch a site from PNG to WebP

1. Keep your PNG originals in a folder of masters. Every later change starts from them.
2. Resize first. Export each image at the largest size it is displayed at, doubled for high-density screens. This often saves more than the format change; how to reduce a PNG’s file size goes through it.
3. Convert. For photographic images and cutouts, lossy WebP at quality 75 to 85. For logos, icons, screenshots and anything with text, lossless WebP.
4. Compare by eye at 100 percent, especially edges and gradients, then compare the file sizes.
5. Replace the images on the site, or use a picture element if you want a fallback for very old browsers:

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

For converting, Squoosh (squoosh.app, from Google Chrome Labs) does it in the browser tab and, according to its documentation, does not send the image to a server. On the command line, Google’s cwebp does the same: cwebp -q 80 in.png -o out.webp for lossy, or cwebp -lossless in.png -o out.webp for lossless. Many online converters upload each file instead; how to check a website is not uploading your photos shows how to tell.

The short answer, by image type

• Product cutouts and photos with transparency: lossy WebP.
• Photos without transparency: lossy WebP, or AVIF if your platform handles it.
• Logos, icons and screenshots: lossless WebP, or SVG for logos and icons that exist as vectors.
• Downloads, email, print and link preview images: PNG or JPG.
• Your archive: the PNG masters.

More on which format suits which picture outside websites is in the photo file formats guide.

Questions

Is WebP better than PNG?

For images on a web page, usually yes: it supports the same transparency and is smaller, often much smaller. PNG is better as a universal file to share, download, edit or print, because more apps outside the browser open it.

Does WebP support transparency like PNG?

Yes. WebP has a full 8-bit alpha channel with soft edges in both lossless and lossy modes. In lossy WebP made with Google's cwebp tool the alpha is stored losslessly by default, so a cutout's edge stays precise even when the colours are compressed.

Do all browsers support WebP?

All current ones do: Chrome, Edge, Firefox and Safari, on desktop and mobile. caniuse.com put support at about 97 percent of browsers in use in September 2026; the rest are very old versions such as Internet Explorer and Safari before version 14.

Should I convert all my PNGs to WebP?

For images shown on your site, yes, unless your platform already does it automatically. Keep the original PNGs as masters, and keep PNG for files people download and for images in emails.

Is WebP lossless?

It can be either. Lossless WebP keeps every pixel exactly, like PNG, in a smaller file. Lossy WebP rounds detail off like JPG and is much smaller again. You choose when you export.

Is WebP bad for SEO?

No. Google created WebP, and its Lighthouse speed audits have long recommended modern image formats. Smaller images load faster, which helps the page experience; the image's file name, alt text and surrounding content matter far more than its format.