How to Convert an Image to WebP

If you run a website, images are almost certainly the heaviest thing on your pages, and WebP is the closest thing to a free win available. Converting is a drag-and-drop job: JPG to WebP for photos, PNG to WebP for graphics and anything with transparency.

The interesting question isn't how. It's whether, and at what setting.

What you actually gain

WebP generally produces smaller files than JPG at comparable visual quality, and smaller files than PNG for flat-colour graphics — while supporting transparency, which JPG can't do at all. So it collapses two formats into one and makes both lighter.

For a page carrying a dozen images, that's the difference between a fast load and a slow one, and page speed feeds Core Web Vitals. It's rare to get a change this cheap.

The quality setting

Both converters give you a quality slider from 0.4 to 1, defaulting to 0.85. That default is well chosen and you can mostly leave it alone.

Worth understanding what it does, though. Above roughly 0.9 you're spending bytes on detail almost nobody can see. Below about 0.7 you start finding softness in fine texture. 0.85 sits where the savings are large and the losses aren't visible — and if you're converting a graphic with sharp edges rather than a photograph, nudging it up costs little because flat colour compresses well anyway.

The lossless setting hiding at the top of the slider

Here's the part worth knowing: push the quality slider all the way to 1 and Chromium-based browsers switch the encoder into WebP's lossless mode. The output is pixel-identical to your source — not "very good", genuinely identical — and for a PNG it usually still beats the original on file size.

Anything below 1 is a lossy re-encode, including 0.99. It's a switch, not a gradient: there's no partial credit at the top end. So if you want a lossless WebP, 1 is the only setting that gives you one, and the slider does land on it exactly.

One honest caveat: that behaviour is the browser's encoder, not ours. Chrome and Edge do it. Other browsers may not make the same switch, so if a pixel-identical master is a hard requirement rather than a nice-to-have, check the output rather than trusting the setting.

Transparency survives

This is the part people don't expect. PNG's alpha channel comes through intact — a transparent logo stays transparent, at a fraction of the size. That makes PNG to WebP the natural next step after removing a background, if the result is going on the web rather than into a document.

The one real reason not to

Compatibility, and it's narrower than it used to be. Every current major browser renders WebP natively. What still trips is everything outside a browser: some email clients, older desktop software, print workflows, and upload forms that whitelist .jpg and .png by name.

So the rule is roughly: WebP for your website, JPG or PNG for anything you hand to another human or another system. If you've been on the receiving end of that mismatch, our guide on WebP files that won't open is the other side of this coin.

The proper answer for a site is to serve both — a <picture> element with a WebP source and a JPG fallback lets modern browsers take the small file and everything else take the safe one, with no duplicate download. That's a template change rather than an image change, but it's the version with no downside.

Format isn't a substitute for size

Converting a 4000px hero image to WebP gives you a smaller 4000px hero image that's still far bigger than the 1200px slot it's displayed in. Resize to the dimensions you actually render at first — our resizing guide covers what to target — and convert second. The two together beat either alone by a wide margin.

Already on WebP and still too heavy? Compress WebP takes it down further. WebP being efficient doesn't mean every WebP is well optimised — one exported at maximum quality has plenty of room left.

FAQ

Is WebP better than JPG and PNG?
For web delivery, generally yes — smaller files at comparable quality, with transparency support. For compatibility outside a browser, no; JPG and PNG still go everywhere.

What quality should I use?
The 0.85 default is a good balance. Push it higher for graphics with sharp edges, lower only if you're chasing a specific size target. Set it to exactly 1 for a lossless WebP in Chrome or Edge.

Can WebP be lossless?
Yes. At quality 1, Chromium-based browsers (Chrome, Edge) encode lossless WebP — pixel-identical to the source, and typically still smaller than the original PNG. Any setting below 1 is lossy. Other browsers may not make that switch, so verify the output if it matters.

Will my transparent background survive?
Yes. WebP has a full alpha channel, so PNG transparency converts cleanly.