PNG to WebP Converter Online

Shrink PNGs by 25–35% with WebP — quality slider, transparency preserved. All processing happens in the browser — your images never upload.

Quality0.85

Source PNG

cloud_upload

Drop a PNG file here, or click to browse

Processed locally — never uploaded

Converted WebP

image

Converted WebP will appear here.

What is a PNG to WebP converter?

A PNG to WebP converter re-encodes Portable Network Graphics images using Google's WebP format, which combines lossy or lossless compression with full alpha-channel support. WebP photos are typically 25–35% smaller than equivalent JPEGs and 50%+ smaller than equivalent PNGs at the same perceptual quality. For the modern web, WebP is the recommended next-gen format flagged by Google Lighthouse.

This converter uses the browser's built-in HTML5 Canvas toBlob API with the image/webp MIME type. The PNG is decoded, drawn to an off-screen canvas, and re-encoded as WebP at the quality you choose — including alpha. All processing happens in the browser — your images never upload.

How to convert PNG to WebP — 4 steps

Drop a PNG file. Drag a PNG into the drop zone or click to browse. Files are read locally with FileReader.
Pick quality. Slide between 0.5 (heavy) and 1.0 (max). Default 0.85 matches cwebp and Google's PageSpeed defaults.
Click Convert. Canvas re-encodes as WebP. Transparency is preserved automatically.
Download. Save with original base name and a .webp extension.

Sample input and what the tool produces

Input PNG

File:        hero.png
Format:      PNG (RGBA, 8-bit)
Dimensions:  1920 × 1080
File size:   2.4 MB
Transparent: Yes

Output WebP (quality 0.85)

File:        hero.webp
Format:      WebP (lossy + alpha)
Dimensions:  1920 × 1080
File size:   180 KB
Saved:       -92%

Quality Slider

Drag between 0.5 (heavy) and 1.0 (max). Default 0.85 matches cwebp and Google PageSpeed defaults.

Alpha Preserved

WebP supports full 8-bit alpha — your transparent PNG pixels stay transparent in the output.

Browser-Only

Files decode and re-encode in your browser. No upload — confidential mockups stay on your device.

Common use cases

check_circleImproving Lighthouse score by serving WebP instead of PNG/JPG via <picture> source
check_circleCutting page weight in half on image-heavy landing pages and product galleries
check_circleReducing CDN egress costs — WebP is 25–35% smaller than JPEG at the same quality
check_circleProducing sharper logos at lower size than PNG with semi-transparent shadows
check_circleOptimising hero images for mobile-first sites where bandwidth is the bottleneck
check_circleReplacing PNG screenshots in documentation sites for faster page loads
check_circleGenerating modern image assets for React, Next.js, Astro, or Gatsby projects
check_circlePreparing WebP variants for responsive image srcset definitions

PNG vs JPG vs WebP vs AVIF

Format	Compression	Transparency	Best for	Browser support
PNG	Lossless	Yes (alpha)	Logos, screenshots, line art	Universal
JPG	Lossy (DCT)	No	Photos, large opaque images	Universal
WebP	Lossy or lossless	Yes	Modern web (25–35% smaller than JPG)	Chrome, FF, Safari 14+
AVIF	Lossy (AV1-based)	Yes	Photos with smallest size (40–50% smaller than JPG)	Chrome 85+, FF 93+, Safari 16+

Need a different conversion?

Convert between PNG, JPG, WebP, or to/from Base64 — all browser-side, no upload.

WebP to PNG PNG to JPG Image to Base64

Frequently Asked Questions

Why convert PNG to WebP?

WebP, developed by Google, achieves 25–35% smaller files than JPEG and 50%+ smaller than PNG for the same perceptual quality. It supports both lossy and lossless modes, an alpha channel for transparency, and animation. For modern web pages, switching from PNG/JPG to WebP commonly cuts page weight in half. The Google Lighthouse "Serve images in next-gen formats" audit flags non-WebP/AVIF images specifically.

Does WebP preserve PNG transparency?

Yes. Unlike JPEG, WebP supports an 8-bit alpha channel (the same as PNG). Transparent and semi-transparent pixels are preserved exactly. The browser uses VP8L (lossless WebP) for fully transparent regions and VP8 (lossy) for opaque regions, blending the two when the source has both. The result is significantly smaller than PNG with no visible alpha-edge artefacts.

Is my image uploaded to your servers?

No. Conversion runs entirely in your browser using HTML5 Canvas and the native toBlob API with image/webp MIME. The PNG is read with FileReader, decoded by the browser, drawn to a canvas, and re-encoded as WebP. Open DevTools → Network and click Convert: zero requests are made. Logos, mockups, and proprietary art stay on your device.

Which browsers support WebP encoding?

Encoding via canvas.toBlob("image/webp") works in Chrome 32+, Edge 79+, Opera 19+, and Firefox 105+. Safari 14+ supports WebP decoding (display) but its toBlob() may silently fall back to PNG when asked for image/webp. The tool detects this fallback and reports an error if your browser does not actually produce WebP. For production WebP encoding, server-side libraries like sharp (libvips) or cwebp give the most reliable cross-platform results.

Lossless or lossy WebP?

This tool produces lossy WebP — the browser canvas WebP encoder defaults to VP8 lossy mode and accepts a quality parameter (0.5–1.0). Lossy WebP is what beats JPG by 25–35% for photos. For lossless WebP (which beats PNG by ~26% on average), you need a dedicated tool like cwebp -lossless or sharp({lossless: true}); browser canvas does not expose the lossless flag. If you need a lossless modern format from the browser, stay on PNG or use AVIF where supported.

What quality setting should I pick?

For photos: 0.80–0.85 is the WebP sweet spot — visually identical to lossless to most viewers at 50–70% smaller file size. For UI screenshots and graphics: stay at 0.90+ because text and sharp edges show artefacts faster than photographs do. For thumbnails, social previews, or background images: 0.65–0.75 is acceptable. The default 0.85 matches the cwebp default and Google PageSpeed recommendations.

How big a PNG can this tool handle?

Browser memory and the maximum canvas dimensions are the constraints. Most browsers support canvases up to 16,384 × 16,384 px (Chrome) or 11,180 × 11,180 px (Safari). A 4K (3840×2160) PNG at full RGBA is ~33 MB in memory and converts in well under a second on any modern device. There is no server-imposed file size limit because no upload happens.