How to Convert PNG to WEBP (and When You Should)

WEBP is an image format developed by Google that usually produces smaller files than PNG or JPG at similar visual quality. If your website serves a lot of images, switching can make pages load noticeably faster. But WEBP is not always the right answer, and converting carelessly can leave you with a worse image or a file a client cannot open. This guide covers when to convert, how to do it, and what to check before you publish.

Why WEBP files are smaller

WEBP offers two modes. Lossy WEBP works like JPG, discarding detail the eye does not notice, but uses a more modern compression method. Lossless WEBP keeps every pixel, like PNG, but encodes them more efficiently. Google has published figures of roughly 25 to 34 percent smaller files than JPG at comparable quality, and around 26 percent smaller than PNG for lossless images. Results depend heavily on the picture, so treat those as typical rather than guaranteed. Screenshots with large flat areas often shrink a great deal, while a noisy photograph may shrink only a little.

When converting makes sense

• Images on your own website or blog. Every kilobyte saved speeds up the page, particularly on mobile connections.
• Transparent graphics that are too large as PNG. WEBP keeps the alpha channel, so a logo or product cut-out can stay transparent while shrinking.
• Large batches of images. A product catalogue with hundreds of PNG files can save a meaningful amount of bandwidth.

When to leave it as PNG

• Files you will edit later. Keep a PNG or the original design file as your master and create WEBP copies for publishing.
• Anything going to print, email attachments or office software. Many programs and some older systems still do not accept WEBP.
• Upload forms. Government sites, job portals and marketplaces often accept only JPG or PNG. Check the form first.

Step by step with the PNG to WEBP tool

1. Open the PNG to WEBP converter and drop in your file, or choose it from your device.
2. Press Convert. The image is decoded and re-encoded inside your browser tab, so it is not uploaded to our servers.
3. Compare the preview with your original, paying attention to thin lines, small text and soft gradients.
4. Download the result and compare file sizes. If the WEBP is not clearly smaller, keep the PNG.

If you have a whole folder, the bulk image converter can produce WEBP, PNG or JPG for many files at once and hand them back as a zip.

What to check before you publish

Transparency. Place the WEBP on a dark and a light background. Edges that look clean on white sometimes show a pale halo on dark, which was already in the PNG but becomes noticeable once you display it somewhere new.

Text and fine lines. Zoom to 200 percent. Lossy compression can soften small text. If it does, use a PNG for that image, or accept a larger WEBP.

The actual file type. Browsers decide the output format by what they support. Chrome, Edge and Firefox can encode WEBP from a canvas. Some versions of Safari have historically not done so, and when they cannot, the browser silently produces a PNG instead. If your downloaded file is not smaller, or its details say PNG, try the conversion in another browser.

Metadata. Because conversion happens by redrawing the image, embedded metadata such as camera details or location is not carried over. That is usually a privacy benefit, but if you rely on embedded copyright notes, add them again elsewhere.

Serving WEBP on a website

All current mainstream browsers can display WEBP, so for most sites you can simply use the new file. If you need to support very old browsers or email clients, wrap the image in a picture element, listing the WEBP source first and a PNG or JPG fallback inside the img tag. Always set explicit width and height attributes so the page does not jump while images load.

Also remember that format is only one factor. A photograph that is 4000 pixels wide will be heavy in any format when it is displayed in a 800 pixel column. Resize first with the image resizer, then convert. Our guide on compressing images for websites covers that workflow in detail.

A sensible workflow

Keep your PNG or design file as the master. Resize to the largest size the page will actually display, convert to WEBP, check the preview at full size, then upload the WEBP. If you ever need to edit, go back to the master rather than editing the WEBP, since lossy WEBP loses detail every time it is re-saved, just like JPG.

What results to expect by image type

Savings vary a great deal with content. Flat graphics with large areas of one colour, such as interface screenshots and simple logos, usually shrink the most. Photographs saved as PNG shrink dramatically because WEBP compresses them with a photographic method instead of storing every pixel. Images with fine noise or film grain shrink the least, since that detail is expensive to encode. The only reliable way to know is to compare the two files you actually have, so keep a short note of the before and after sizes for your first batch and use it to decide whether the extra step is worth doing for the rest.