Convert PNG to WebP online, free

When the converter reads those values off the Canvas and writes them into WebP, every gradient of opacity carries across. You get the same clean edge against a dark navbar, a white card, or a photo behind it. A one-bit format that only knew fully on or fully off would leave a jagged staircase on every curve, which is exactly the artifact WebP avoids.

Because the conversion is a Canvas redraw, the pixel grid stays exactly as the PNG defined it. The tool does not resample, crop, or shift colors on its own. A 512 by 512 icon comes out 512 by 512. That predictability lets you convert a whole icon set in one batch and trust that every file lines up as before.

Lossless WebP versus lossy WebP for graphics

WebP has two encoding modes, and the choice between them is the most important decision for transparent graphics. Lossless WebP rebuilds every pixel exactly, the same guarantee PNG gives, and still lands smaller. For typical graphics it comes out around 25 to 34 percent smaller than the source PNG while holding identical pixels.

Reach for lossless when a single wrong pixel would show: brand logos, flat-color icons, screenshots with crisp text, anything with hard edges between solid color regions. These images are mostly flat areas and sharp lines, the exact pattern lossless compression handles best, so you give up nothing and still shed bytes.

Lossy WebP with alpha takes a different path. It compresses the color data the way it would for a photo, while keeping the transparency mask separate and sharp. The savings climb well past what lossless can reach, often halving a file or better, in exchange for a small drop in color fidelity. A quality slider controls how hard it pushes, and dropping from 90 to 80 usually buys a large size cut for a difference you have to hunt for.

On a soft, photographic, or gradient-heavy graphic the eye rarely catches that drop. On a hard-edged logo it can show up as faint banding or fuzz around a sharp color boundary. The edge stays crisp because the alpha mask is stored apart from the color, so the fuzz appears in the color, not the cut-out shape.

The rule: hard edges and exact color favor lossless, soft and decorative content favors lossy. A two-color SVG-style icon should go lossless, where the cost of lossy is real and the size win is modest anyway. A large translucent texture or an illustrated scene with smooth shading is a strong lossy candidate, because that is where lossy WebP pulls far ahead.

When you are unsure, convert once at a high quality and check the edges closely before committing a whole batch. One careful look at a representative file saves you from re-exporting dozens later. If the lossy result looks clean at full zoom, the size win it offers is worth taking; if it does not, the lossless pass is still smaller than your PNG.

The two scenarios, in plain numbers

Scenario one is the pixel-perfect UI asset. Picture 24 navigation icons, each a 48 by 48 PNG at roughly 4 KB, totaling about 96 KB. Converted to lossless WebP they typically land near 65 to 70 KB combined, a cut of close to a third, with not a single pixel altered.

Multiply that across an interface with hundreds of icons and the saved bytes turn into faster first paints and a lighter cache. The win compounds on repeat visits too, because a smaller file is cheaper to revalidate and quicker to pull from the browser cache.

Scenario two is the large decorative transparent image. A marketing illustration exported as a 1600-pixel-wide PNG with a transparent background can easily hit 300 KB. Lossless WebP might bring that to roughly 210 KB, a useful cut on its own.

Lossy WebP at quality 80, keeping the alpha channel crisp, often drops the same image under 100 KB. That is a two-thirds reduction on one asset. Because the image is decorative rather than precise, the quality trade is invisible in normal viewing. On a hero section that one swap can shave a noticeable slice off the page weight.

Those two cases cover most of what lands here. The deciding question is never the file format alone, it is what the image is for. Precision work takes the smaller lossless win and keeps every pixel. Decorative work takes the much larger lossy win and accepts a trade nobody will see.

Pick the lane that matches the asset and the numbers take care of themselves. There is no global setting that wins for both, which is why it pays to sort your files before you convert.

Where these WebP files earn their keep

Icon sets are the clearest payoff. A WebP icon library loads faster than the PNG version, and individual WebP files are small enough to serve directly without the maintenance a sprite atlas demands. You skip the build step that stitches icons into one sheet and the CSS that slices them back apart. Transparent overlays are another natural fit: badges, ribbons, notification dots, and frame decorations all need an alpha channel and all benefit from the smaller payload.

Marketing and landing pages lean hard on transparent graphics, the floating product shots and layered illustrations that give a page depth. Those are usually the heaviest images on the page, so converting them to WebP moves load time more than shrinking any photo would. Search engines reward the faster load, which makes the swap a quiet win for ranking as well.

App interfaces gain the same way. A web app or progressive web app that ships its UI graphics as WebP carries a lighter initial bundle, which shortens the time before the interface becomes usable. On a phone over a slow connection, those saved kilobytes are the difference between a screen that paints fast and one that stalls.

The common thread: all of these assets share PNG's transparency requirement and PNG's size problem. WebP solves the size problem without surrendering the transparency, which is why Google built it for the web and why it became the default delivery format for graphics. The format was designed around web delivery from the start, not adapted to it later, and that focus shows in how well it pairs alpha with small files. If you would rather stay lossless and lighter at once, you can compress the PNG instead and skip the format change.

When you should still keep a PNG

WebP is not the right delivery target everywhere, and it pays to know the gaps before you delete your source files. Some design tools and stock platforms reject WebP on import or upload and expect PNG. Operating system icon formats, the ones used for desktop icons and favicons in older pipelines, are built around PNG. A number of email clients still render WebP unreliably, so newsletter images are safer as PNG or a WebP with a PNG fallback.

Print is its own gap. Anything headed to a press or a PDF export usually wants the lossless PNG, since print pipelines care about exact pixels and have no bandwidth budget to defend. The same goes for source assets you will edit again, where you want the untouched original rather than a delivery copy.

The honest move is to treat WebP as your web delivery copy and keep the PNG as the archival original. You lose nothing by holding the source, and if a platform later refuses the WebP you have the PNG ready. Because the PNG was lossless to begin with, you can always regenerate a fresh WebP from it without stacking compression. When you only have a WebP and need to hand a PNG to a tool that demands one, you can turn WebP back into PNG and rebuild the alpha channel.

Browser support is the last caveat, and it is a small one. Every current version of Chrome, Firefox, Edge, and Safari renders WebP, including its transparency, without help. The exceptions are old browser builds and a few niche environments, the kind most modern sites no longer target.

If you must serve those, use the HTML picture element with a WebP source and a PNG fallback, so capable browsers take the small file and the rest get the PNG. The browser picks the first source it understands, which means no JavaScript and no extra request. For nearly every modern audience you can ship WebP directly and stop thinking about it.

A workflow that keeps quality honest

Start with the source PNG at its real export resolution, not a version already squeezed by another tool, since stacking compression steps degrades the result. Drop your files here, up to 100 at a time with each as large as 50 MB, which is enough headroom for full icon sets and high-resolution illustrations in a single pass. Files convert in parallel in your browser, then download together as a ZIP so a big batch stays organized.

If a PNG is far larger than the size it will display at, resize it before converting rather than after. A 4000-pixel export shown in a 1200-pixel slot wastes bytes no codec can recover, and shrinking it first lets WebP work on the pixels that actually ship.

Choose your mode by asset type before you run the batch. Group the hard-edged, precision graphics and convert them at the highest quality, treating that as your lossless-leaning pass. Group the soft, decorative, transparent images separately and let lossy WebP take a larger bite. Splitting the work this way means you are never forcing one setting onto two kinds of content that want opposite things, and each pass takes seconds.

After converting, inspect the edges on at least one file from each group at full zoom. Look where a colored shape meets transparency, the spot artifacts appear first, and confirm the alpha still fades cleanly with no white halo or hard fringe. If an edge looks soft on a logo, that file wanted lossless.

Once a sample passes, you can trust the rest of its group, since files exported the same way compress the same way. Keep your PNG originals filed away, ship the WebP, and you have a smaller, faster asset library with the transparency fully preserved.