Will my PNG transparency survive the conversion?

Yes. WebP supports a full 8-bit alpha channel — exactly the same as PNG. Every transparent pixel, including soft anti-aliased edges and gradient transparency, is preserved during conversion.

Should I use lossy or lossless WebP for my PNG?

If the PNG is photographic (continuous tone, gradients), lossy WebP at quality 80–85 dramatically reduces file size with no visible quality loss. If the PNG is a logo, icon, screenshot, or any content with hard edges and flat colour fills, use lossless WebP (quality 100) to avoid artefacts.

How much smaller will the WebP be?

For lossless conversion of typical PNG content: 20–30% smaller. For lossy conversion of photographic PNGs: often 70–90% smaller. The biggest wins come from photographic PNGs that were lossless when they didn't need to be — many sites carry 'PNG-as-photo' images that are massively oversized.

Will my files be uploaded?

No. Conversion happens entirely in your browser via the Canvas API. Your PNG files never leave your device. This works on enterprise networks, on metered connections, and offline once the page is loaded.

Does WebP work in all browsers?

WebP is supported in every major browser still under vendor support: Chrome 32+, Firefox 65+, Safari 14+ (macOS Big Sur, iOS 14), Edge 18+. Global browser coverage is ~97%. For the remaining percentage, use a element with PNG fallback.

Can I batch-convert multiple PNGs at once?

Yes. Drop or select multiple PNG files; each is converted with the same quality setting and tracked individually. Download per file once conversion completes.

What if my PNG is an animated PNG (APNG)?

Only the first frame is converted. WebP supports animation, but Canvas-API conversion doesn't read APNG frame data. For animated source content, use a different format (animated GIF or convert via a dedicated tool).

Will the conversion change image quality?

Lossless WebP preserves the source exactly — bit-perfect for the visible pixels. Lossy WebP discards some information, but at quality 80+ the loss is rarely visible on photographic content. For graphics with text or hard edges, always use lossless.

What's the maximum file size?

No artificial limit. Browser memory is the practical constraint — most modern browsers handle PNG files up to ~50 MB comfortably. Very large files (100 MB+) may slow on lower-end devices.

How do I display WebP on my site with PNG fallback?

Use a element: . Capable browsers get WebP; older browsers fall back to the PNG. See the WebP Browser Support guide for detail.

Convert PNG to WebP in your browser

20–30% smaller files at the same fidelity (lossless) — or up to 80% smaller for photographic PNGs (lossy). All conversion happens in your browser via the Canvas API.

Transparency preservedLossless or lossyClient-side onlyBatch upload

Click to select your PNG files

Multiple files supported. Files never leave your browser.

Quick start

Step 1
Select your PNG files
Click the upload area or drag and drop one or more PNG files. Multiple files supported in a single batch.
Step 2
Choose a quality setting
Use the slider after upload. 100 = lossless (use for logos/icons/screenshots). 80–85 = lossy (use for photographic PNGs).
Step 3
Convert and download
Click convert. Each PNG is decoded and re-encoded as WebP in your browser. Download each result individually.

How PNG-to-WebP conversion works

The browser decodes the PNG into RGBA pixels via the Canvas API, then re-encodes that pixel data as WebP. The encoder mode — lossless or lossy — is controlled by the quality slider. Quality 100 produces a lossless WebP that's bit-perfect identical to the PNG source. Anything below 100 uses WebP's VP8-based lossy encoder, which discards some information in exchange for dramatically smaller files.

For PNGs that are genuinely lossless content — logos, icons, screenshots with text, line art — keep quality at 100. The output WebP will be 20–30% smaller than the PNG with the same pixel data. There's no quality trade-off; you simply use a better compression algorithm.

For PNGs that contain photographic content — full-colour photos, gradients, continuous-tone imagery — the PNG was almost certainly the wrong format choice in the first place. Lossy WebP at quality 80–85 typically produces files 70–90% smaller than the PNG with no visible quality loss. This is where the largest performance wins live.

Transparency travels through unchanged. WebP supports the same 8-bit alpha channel as PNG, including soft anti-aliased edges and gradient transparency. You can also encode lossy RGB with lossless alpha — useful for product photos with clean cut-out backgrounds. See Lossy vs Lossless Compression for the systematic decision framework, and WebP vs PNG for the detailed comparison.

When to convert PNG to WebP

Site-wide performance audit

Auditing a site that mixes PNG and JPG often reveals PNG-as-photo content that's 5–20× larger than it needs to be. Converting those to lossy WebP is one of the largest single-step performance wins available.

Ecommerce product imagery

Product photos with cut-out white backgrounds historically needed PNG for the transparency. WebP handles the same transparency at a fraction of the size.

Brand assets and logos

Lossless WebP for site delivery; keep the PNG original for distribution outside the browser. Use the <picture> pattern to ship both.

CMS or migration handoff

When moving content into a modern CMS or static site generator, batch-convert the PNG library to WebP as part of the migration step.

Core Web Vitals optimisation

LCP regressions on image-heavy pages frequently trace back to oversized hero PNGs. Convert the LCP image first; see Core Web Vitals & Images.

Bandwidth-sensitive audiences

For mobile-first audiences or geographies with metered connections, the WebP conversion compounds across every page load.

Quality settings and file size

The right quality setting depends on the content type:

Content type	Quality	Mode	Why
Logos, icons, line art	100	Lossless	Hard edges artefact at any lossy quality
Screenshots, charts, diagrams	100	Lossless	Text legibility critical; lossy adds ringing
Photo, hero / above-the-fold	82	Lossy	Visually indistinguishable from source
Photo, body / product	80	Lossy	Sweet spot for most photographic web delivery
Photo, thumbnail	70	Lossy	Aggressive compression invisible at small render size

Approximate size relationships, holding image content constant:

Content	Source PNG	Output WebP	Reduction
Logo (240×80, lossless)	8 KB	6 KB	25%
App icon (512×512, lossless)	45 KB	32 KB	29%
UI screenshot (1440×900, lossless)	320 KB	220 KB	31%
Product cutout (800×800, lossy+alpha)	480 KB	65 KB	86%
Hero photo (1600×900, lossy)	2.1 MB	110 KB	95%

The dramatic wins come from PNG-as-photo content moved to lossy WebP. The smaller wins (20–30%) come from genuinely lossless content. Both are pure upside for browser delivery.

For systematic encoder guidance, see WebP Compression Settings.

Common issues and solutions

Output WebP is barely smaller than the PNG

You converted a lossless-eligible PNG (logo, icon, screenshot) — the 20–30% saving is normal. The dramatic wins (70–90%) come from converting photographic PNGs to lossy WebP. If your PNG is a photo, switch the quality slider down to 80–85.

Hard edges look fuzzy in the output

You used lossy compression on graphics content. Logos, icons, charts, and screenshots produce ringing artefacts under lossy WebP. Re-convert at quality 100 (lossless).

Transparency is lost in old browsers

WebP transparency works in all browsers that support WebP at all (Chrome 32+, Firefox 65+, Safari 14+, Edge 18+). If you're targeting older browsers, use a <picture> fallback with the PNG inside.

Animated PNG (APNG) only converts the first frame

Canvas-API conversion only reads the first frame of an APNG. WebP supports animation but requires dedicated animated-WebP encoding tools. For animated content workflow, the typical pattern is animated GIF as source.

I want lossy RGB but lossless alpha

The Canvas API encodes both together at the same quality. For separate alpha control, use a dedicated WebP encoder like cwebp or Sharp with -alpha_q 100. Detail in WebP Compression Settings.

Some files were skipped on upload

The file's MIME type isn't 'image/png'. Check the file extension matches its actual format — a renamed file may not be a real PNG.

Colours look slightly different

Could be one of two things: lossy compression at low quality is introducing visible loss (try lossless), or the source PNG carried an embedded ICC profile the Canvas API ignores. For colour-critical work, verify in a dedicated image tool.

Conversion is slow on large files

Very large files (50 MB+) stress browser memory. Try processing one at a time, or reduce the source dimensions before conversion.

I get a 'Conversion failed' error

Usually means the source file is corrupted or uses an unusual PNG profile. Re-export from the source application and retry.

I want to convert WebP back to PNG

Use the reverse direction: WebP to PNG converter. PNG output is universal across design tools, email, and non-browser contexts.

Frequently asked questions

Reverse direction

WebP to PNG Converter →

Convert WebP back to PNG for distribution outside the browser (design tools, email, documents).

Format comparison

WebP vs PNG: full comparison →

Side-by-side spec table, file size benchmarks, and decision framework for when each format wins.

Format detail

WebP format overview →

Container structure, codec details, browser support, and implementation patterns.

Format detail

PNG format overview →

Lossless compression, alpha transparency, when PNG remains the right choice in 2026.

Guide

WebP Optimisation →

Encoder settings, responsive delivery, lazy loading, and Core Web Vitals impact for WebP.