March 24, 20264 min read

PNG to WebP — Shrink Screenshots and Graphics by 26% (Losslessly)

Convert PNG to WebP for smaller files with identical quality. Lossless conversion that actually saves space — here's how and why it works.

png to webp lossless webp image optimization web performance png compression

The Only Image Conversion That's Genuinely Free

Most image format conversions involve a tradeoff — you either lose quality, lose features, or gain file size. PNG to lossless WebP is the rare exception: you get a smaller file with zero quality loss and full transparency support.

Google's own testing showed that lossless WebP images are 26% smaller than PNG on average. Our testing with real-world images (screenshots, UI mockups, logos, game sprites) confirms this: savings range from 15% to 40% depending on the image content.

Why Does This Work?

PNG uses DEFLATE compression (the same algorithm behind ZIP files, dating to 1996). WebP's lossless mode uses a more modern prediction-based compression that's better at finding patterns in image data. It's essentially a newer, smarter compression algorithm applied to the same pixel data.

Compression	Algorithm	Era
PNG	DEFLATE + filtering	1996
WebP lossless	Predictive + entropy coding	2010
AVIF lossless	AV1 intra-frame	2018

Real-World Size Comparisons

We converted 50 typical web assets:

Image Type	PNG Size	WebP (Lossless)	Savings
Screenshots (UI)	420 KB avg	290 KB avg	31%
Logos with transparency	35 KB avg	25 KB avg	29%
Game sprites	180 KB avg	130 KB avg	28%
Icons (32-64px)	4 KB avg	3 KB avg	25%
Diagrams/charts	85 KB avg	65 KB avg	24%
Photo-like PNGs	3.2 MB avg	2.4 MB avg	25%

Screenshots and UI elements — the bread and butter of documentation and blog posts — see the biggest improvements because they contain large areas of flat color that WebP's prediction model handles especially well.

Lossy vs Lossless: Which Should You Choose?

WebP supports both modes. For PNG originals:

Lossless WebP: Pixel-perfect, zero quality loss. 15-40% smaller than PNG. Lossy WebP (quality 90+): Visually imperceptible changes. 60-80% smaller than PNG. The quality setting controls how aggressively the encoder compresses.

For screenshots with text, lossless is safer — lossy compression can introduce artifacts around sharp text edges that look fine at 100% zoom but become visible when the image is scaled or displayed on high-DPI screens.

For photos that were saved as PNG (common in some CMS workflows), lossy WebP at quality 85 is a dramatic improvement — you might go from a 5 MB PNG to a 200 KB WebP.

How to Convert

Online

MyPDF's image converter handles PNG to WebP in both lossy and lossless modes. Squoosh gives you a side-by-side preview to compare settings visually.

Command Line

# Lossless (pixel-perfect)
cwebp -lossless input.png -o output.webp

# Lossy at quality 90 (visually lossless for most content)
cwebp -q 90 input.png -o output.webp

# Batch lossless conversion
for f in *.png; do cwebp -lossless "$f" -o "${f%.png}.webp"; done

Build Tools (For Web Developers)

Most build tools have WebP plugins:

Webpack: image-webpack-loader or imagemin-webp
Vite/Rollup: vite-plugin-imagemin
Next.js: Built-in next/image with automatic WebP serving
Gatsby: gatsby-plugin-image handles it automatically

Transparency: It Just Works

Both PNG and lossless WebP support full 8-bit alpha transparency. The conversion preserves every transparency value perfectly. Semi-transparent pixels, smooth gradients, feathered edges — all identical.

For lossy WebP, transparency is also supported, but the alpha channel may be slightly compressed. At quality 90+, the difference is imperceptible.

Frequently Asked Questions

If WebP is always smaller, why does PNG still exist?

Compatibility. Some email clients, print workflows, older apps, and design tools still expect PNG. Also, PNG is an ISO standard (ISO/IEC 15948) and has been around for nearly 30 years — it's deeply embedded in every system. WebP is getting there but isn't quite universal yet.

Can I batch convert my entire website's images?

Yes. For static sites, convert during the build step. For WordPress, plugins like ShortPixel auto-convert on upload. For manual batch conversion, MyPDF's batch converter or desktop tools like XnConvert handle entire folders.

Does Next.js/Nuxt/Gatsby automatically serve WebP?

Yes — all modern frameworks include image optimization that serves WebP (or AVIF) to supported browsers with PNG/JPG fallback. If you're using one of these frameworks, you may not need to manually convert at all.

Convert Image — Any format to any format
Compress Image — Further optimize after conversion
Batch Convert Images — Convert entire folders
SVG to PNG — For vector to raster conversion first