🖼️ PNG to WEBP Converter, Compress PNGs to WEBP Online
By Shihab Mia · Updated 2026-07-27
Pick a .png file. It stays on your device and is never uploaded.
Higher quality keeps more detail but makes a larger file. WEBP keeps transparency at any quality setting.
Choose a PNG image to get started.
This tool converts a PNG image to WEBP entirely in your browser: choose a file, adjust the quality slider, and it re-encodes the image and shows you the new file size next to the original. Transparency is preserved because WEBP, like PNG, supports an alpha channel, so logos, icons, and cutout graphics keep their see-through areas. Nothing is uploaded; the whole conversion happens on your device using the canvas API, so it works offline once the page has loaded and your image never touches a server.
What is the PNG to WEBP Converter?
PNG is a lossless format built for sharp edges and flat colour, which is why screenshots, logos, and icons look crisp as PNGs. The tradeoff is file size: because PNG cannot throw away any pixel data, a PNG of a photo or a texture-heavy graphic is often several times larger than it needs to be for how it will actually be viewed. WEBP was designed by Google specifically to solve this. It supports the same lossless mode PNG uses, but it also supports lossy compression, similar in spirit to JPEG, while still keeping full alpha transparency. That combination, transparency plus lossy compression, is something JPEG has never been able to offer, which is why WEBP is now the default recommendation for transparent images on the modern web.
Under the hood, this converter loads your PNG into an HTMLImageElement using an object URL, draws it onto an HTML canvas at its natural pixel dimensions, and calls canvas.toBlob with the "image/webp" MIME type and a quality argument between 0 and 1. The browser image encoder does the actual compression work; this page just orchestrates it and measures the resulting blob. Because the quality argument only affects lossy encoding, a value of 1.0 is not guaranteed to be perfectly lossless in every browser, but in practice at quality 0.9 to 1.0 the visual difference from the source PNG is imperceptible while the file is usually smaller than the original PNG already, since the WEBP lossy encoder is simply more efficient than the PNG lossless one for anything with gradients, photographic detail, or soft shadows.
WEBP is not universally supported by older software. Every browser released since roughly 2020 (Chrome, Edge, Firefox, Safari, and their mobile equivalents) reads and displays WEBP without a plugin, and this has been true since Apple added support in Safari 14 in 2020. Where it can still cause friction is outside the browser: some older desktop image viewers, some print workflows, and some legacy content management systems do not accept a .webp upload directly. If you are targeting one of those systems, check that it accepts WEBP before replacing your PNGs sitewide, or keep the original PNG as a fallback.
One honest limitation worth stating plainly: canvas.toBlob("image/webp", quality) depends on the browser you are using to encode the file, and a small number of older browser builds (mainly very old Safari versions before WEBP encoding support landed) will return a blob in a different format, typically PNG, instead of WEBP, or fail to produce a blob at all. This tool checks the returned blob type and tells you honestly if that happens rather than pretending the conversion succeeded, and you can switch to a current version of Chrome, Edge, or Firefox to complete the conversion.
When to use it
- Shrinking transparent PNG logos, icons, and UI graphics before uploading them to a website, to cut page weight without losing the see-through background.
- Converting screenshots that were saved as PNG into much smaller WEBP files for documentation, help centers, or ticket attachments.
- Preparing product cutout images (with transparent backgrounds) for an online store where WEBP is accepted and every kilobyte affects page speed.
- Reducing the size of app or game assets exported as PNG before bundling them, when the target platform reads WEBP.
- Meeting a website performance budget (Core Web Vitals, PageSpeed Insights) by replacing oversized PNGs with right-sized WEBP equivalents.
- Archiving a batch of design exports at a smaller size while still being able to reopen them with an intact alpha channel.
How to use the PNG to WEBP Converter
- Click "Choose a PNG image" and select a .png file from your device.
- The tool loads it automatically and runs a first conversion at the default 85% quality so you can see a real result immediately.
- Drag the quality slider to trade off file size against visual fidelity; the percentage label updates live as you move it.
- Click "Convert to WEBP" to re-encode at the current slider position and see the updated size, the size change, and the pixel dimensions.
- Click "Download WEBP" to save the file, or "Copy result summary" to copy the size comparison as text.
Formula & method
Worked examples
A 480,000 byte (about 469 KB) PNG screenshot with a lot of flat colour is converted at 85% quality and the resulting WEBP blob is 96,000 bytes.
- difference = 480,000 - 96,000 = 384,000 bytes
- percent saved = 384,000 / 480,000 x 100
- percent saved = 0.80 x 100 = 80%
Result: The WEBP file is 384,000 bytes smaller than the PNG, an 80% reduction, a typical result for flat-colour graphics.
A small 12,000 byte transparent PNG icon is converted at 100% quality and the WEBP blob comes back at 13,500 bytes.
- difference = 12,000 - 13,500 = -1,500 bytes
- percent change = -1,500 / 12,000 x 100
- percent change = -0.125 x 100 = -12.5%
Result: The WEBP is 1,500 bytes (12.5%) larger than the original for this very small, already-tiny file; lowering the quality slider slightly or keeping the PNG would be the better choice here.
Choosing a quality setting for PNG to WEBP conversion
| Quality | Typical result | Best for |
|---|---|---|
| 0.9 to 1.0 | Visually identical to the source, modest saving | Logos, UI icons, screenshots with text |
| 0.75 to 0.85 | No visible difference at normal size, strong saving | General website images, most everyday use |
| 0.6 to 0.7 | Slight softening visible on close inspection | Large background images, thumbnails |
| 0.4 to 0.5 | Noticeable softness or banding in gradients | Very small previews where size matters most |
PNG versus WEBP at a glance
| Property | PNG | WEBP |
|---|---|---|
| Compression | Lossless only | Lossless or lossy (your choice) |
| Transparency | Yes (alpha channel) | Yes (alpha channel, at any quality) |
| Typical file size | Larger, especially for photos | Smaller, often 25 to 80% less |
| Browser support | Universal | All browsers since 2020, some older tools lag |
Common mistakes to avoid
- Assuming quality 1.0 always beats the original PNG. For very small or already-flat images, the WEBP lossy encoder can occasionally produce a slightly larger file than a well-optimised PNG. Always check the size comparison this tool shows rather than assuming WEBP always wins; if it comes out larger, try a lower quality or keep the PNG.
- Uploading .webp to a system that only accepts common upload formats. A handful of older content management systems, print services, and desktop tools still reject or mishandle .webp uploads. Confirm the destination accepts WEBP before replacing all your PNGs, especially for anything going to print.
- Expecting this tool to resize the image. This converter changes format and compression only; it draws the canvas at the PNG's natural width and height, so the pixel dimensions stay exactly the same. If you also need smaller dimensions, resize the image first, since fewer pixels usually saves far more than quality changes alone.
- Not noticing when a browser fails to produce a real WEBP blob. A small number of old Safari builds do not support WEBP encoding through canvas.toBlob and may silently hand back a different format or nothing at all. This tool checks the blob's actual MIME type and shows an honest error if WEBP export is not supported, rather than offering a file that is not really a WEBP.
Glossary
- WEBP
- An image format developed by Google that supports both lossless and lossy compression plus an alpha (transparency) channel, usually producing smaller files than PNG or JPEG at similar visual quality.
- Alpha channel
- The part of an image format that stores transparency information per pixel, allowing a see-through background. Both PNG and WEBP support it.
- Lossy compression
- A compression method that permanently discards some image detail to shrink the file. The quality slider in this tool controls how much detail WEBP keeps.
- Lossless compression
- A compression method that shrinks a file without discarding any detail, so the original pixels can be reconstructed exactly. PNG only offers this mode.
- Canvas.toBlob
- A browser API that renders the contents of an HTML canvas element into an image file (as a Blob object) in a chosen format and quality, entirely on the user's device.
- Object URL
- A temporary local browser reference (blob:) that points to a file or blob in memory, used here to load the chosen PNG and to offer the WEBP result for download without any upload.
Frequently asked questions
Does converting a PNG to WEBP lose quality?
It can, but only if you choose a quality setting below 1.0. This tool defaults to 85%, which is visually indistinguishable from the original for almost every image while cutting the file size substantially. Move the slider toward 1.0 for maximum fidelity or lower for a smaller file.
Will my PNG transparency be kept after converting to WEBP?
Yes. WEBP supports a full alpha channel just like PNG, and this tool draws the image without any background fill, so transparent areas stay transparent in the WEBP output at every quality level.
Is my image uploaded anywhere during conversion?
No. The whole conversion happens in your browser using the canvas API. The PNG is loaded from your device into memory, converted locally, and never sent to a server, which keeps it private and makes the result available instantly.
Why is my WEBP file bigger than the original PNG?
This mostly happens with very small images or icons that were already tightly optimised as PNG. Try lowering the quality slider slightly and reconverting; if the WEBP still comes out larger, the original PNG was already efficient for that particular image and you can keep it as is.
What quality setting should I use?
Start at the default 85%. For logos, icons, and screenshots with text, 90 to 100% avoids any visible softening. For photographic or gradient-heavy images destined for a web page, 70 to 85% usually gives the best balance of small file size and good appearance.
What if the tool says my browser cannot export WEBP?
A very small number of older browser versions, mainly old Safari builds, cannot encode WEBP through the canvas API. This tool checks the actual result and tells you honestly rather than offering a broken file; updating to the latest Chrome, Edge, Firefox, or Safari will resolve it.