BlogImage Compression

PNG to WebP: When It Saves Space and When It Does Not

Learn when PNG-to-WebP conversion reduces bytes, when PNG is already the better choice, and how to compare transparency, quality, and compatibility safely.

By LessMB Editorial Team · Reviewed by LessMB Technical Editor

Updated: August 1, 2026

Short answer: Convert a copy of the PNG to lossless WebP, compare the byte size and pixel output, and keep the smaller file. Use lossy WebP only for photo-like graphics where small visual changes are acceptable. Tiny flat-color icons, exact screenshots, and restricted upload destinations may still favor PNG.

PNG-to-WebP conversion is not a guaranteed “save space” button. PNG can already be extremely efficient for a small palette, simple icon, or pixel-exact screenshot. WebP can win when the PNG contains complex transparency, gradients, photographic detail, or dimensions much larger than the page needs.

The Conversion Decision Table

PNG contentFirst testWhy
Logo or icon with flat colorsLossless WebPIt may reduce bytes while keeping exact pixels; PNG can still win for tiny files.
Screenshot with textLossless WebPAvoids JPEG-style artifacts; inspect text and compare pixel output.
Photo exported as PNGLossy WebPThe photo may benefit from a lossy web codec much more than from PNG’s lossless storage.
Transparent product cut-outLossy WebP, then lossless WebPLossy can be smaller; lossless is safer for fine edges and shadows.
Small favicon or tiny iconKeep PNG or use SVGContainer overhead can erase a format saving.
Print or editing masterKeep the original PNG or source fileWebP should be a delivery derivative, not the only source.

What the Reference Data Says

Google’s WebP documentation reports that lossless WebP is about 26% smaller than PNG on average in its reference data. Its lossy transparency examples can be much smaller than PNG, but an average is not a promise for a specific asset. Google’s WebP documentation also explains that WebP supports both lossy and lossless modes and alpha transparency.

The correct question is not “What is the average saving?” It is “Did this particular output get smaller while retaining the pixels or visual detail the destination needs?”

Lossless Conversion: Preserve Pixels First

Lossless WebP is the safe first experiment for logos, screenshots, diagrams, and transparent graphics. It should reconstruct the visible pixels exactly, but keep in mind that a file can carry metadata or hidden color values that are not obvious in a visual comparison.

With Google’s cwebp tool:

cwebp -lossless input.png -o output.webp

For design and test assets where the RGB values beneath fully transparent pixels matter, use the encoder’s exact option when supported by your installed version:

cwebp -lossless -exact input.png -o output.webp

Then compare the byte sizes. If output.webp is larger than the optimized PNG, keep the PNG. A conversion is successful only when it meets the destination’s format requirements and gives a practical benefit.

Lossy Conversion: More Savings, More Inspection

Lossy WebP is appropriate for photo-like content where a small change in pixel values is acceptable. A starting command might be:

cwebp -q 80 input.png -o output.webp

Quality 80 is only a test point. It does not mean the same visual result as JPEG quality 80, and it will not produce a predictable file size for every image. Export several candidates, then inspect:

  • text and small labels;
  • straight lines and high-contrast edges;
  • shadows and semi-transparent gradients;
  • color accuracy in product imagery;
  • the image on the actual page background;
  • the file at normal display size and at 100%.

If a transparent cut-out shows a halo, raise quality, switch to lossless WebP, adjust the export matte, or retain PNG. Do not judge transparency only against the editor’s checkerboard.

Why a PNG May Not Shrink

PNG can remain smaller when:

  1. the image is tiny and WebP’s container overhead matters;
  2. the graphic has few colors and PNG’s palette compression is already excellent;
  3. the PNG has been optimized with tools such as oxipng or zopfliPNG;
  4. the WebP export uses a quality setting that is too conservative;
  5. the original dimensions are already close to the display size;
  6. the destination’s fallback or upload requirements make a second format unnecessary.

Do not delete the PNG simply because a browser can display WebP. Keep both until you have checked byte size, visual output, destination compatibility, and the ability to regenerate the asset later.

Browser Delivery with a PNG Fallback

For a website, the conversion is most useful when the page can deliver the WebP copy without breaking clients:

<picture>
  <source srcset="diagram.webp" type="image/webp" />
  <img
    src="diagram.png"
    width="1200"
    height="800"
    alt="Workflow diagram showing the compression steps"
  />
</picture>

Use srcset and sizes if the diagram is delivered at multiple widths. Add width and height to the fallback so the browser reserves layout space. If a CDN performs format negotiation, inspect the response Content-Type and cache behavior rather than trusting the URL extension.

A Browser-Based Workflow for One File

For a single image, a browser compressor can be quicker than installing a command-line tool:

  1. Open the original PNG and keep a local copy.
  2. Confirm whether the tool processes locally or uploads the file.
  3. Export a lossless WebP first.
  4. Compare the downloaded file size with the PNG.
  5. Check transparency, text, and edges on the intended background.
  6. Try lossy WebP only if the destination needs a larger reduction.

“Online” describes where the interface is, not necessarily where processing happens. For private design files or client assets, inspect the Network panel or use a tool whose local-processing behavior you can verify. Do not upload sensitive files simply to test a format conversion.

Batch Conversion Without Losing the Originals

For a repeatable folder workflow, generate delivery copies into a separate directory:

mkdir -p webp
for file in originals/*.png; do
  name=$(basename "$file" .png)
  cwebp -lossless "$file" -o "webp/$name.webp"
done

Then compare the output sizes and spot-check the most important assets. A batch command should not overwrite the source or assume that one mode is correct for every image. Add a report of original size, WebP size, dimensions, and any failed conversion so a larger output does not silently replace a smaller PNG.

Three Example Decisions

A 12 KB flat icon: keep PNG or switch to SVG if a vector source exists. WebP’s container overhead may erase the saving.

A 2 MB screenshot: crop unused browser chrome, resize if the destination displays it smaller, then test lossless WebP. If the file remains large, consider a readable responsive image rather than aggressive lossy compression.

A 1.5 MB transparent product photo: test lossy WebP and inspect the edge on light and dark backgrounds. Keep lossless WebP or PNG if the halo affects the product outline.

A Practical Conversion Checklist

  • Keep the original PNG.
  • Check whether the PNG is already optimized.
  • Measure the original dimensions and the real display width.
  • Try lossless WebP first for exact graphics.
  • Try lossy WebP only for content that can tolerate a visual trade-off.
  • Compare bytes, pixels, transparency, and background edges.
  • Check the destination’s accepted formats and email or webview support.
  • Add a PNG fallback for public web delivery when the audience is mixed.
  • Retain the smaller, acceptable file instead of following a format rule blindly.

Related LessMB Guides

Sources