Convert PNG to WebP

Lossy or lossless: what Quality does

WebP has two ways of storing a picture, and the Quality slider decides which one Octoolo uses:

• Quality below 100 makes a lossy WebP. Like a JPG, it leaves out detail you are unlikely to notice, and the file gets much smaller. Transparency is kept even so.
• Quality 100 makes a lossless WebP. Every pixel comes back exactly as it was in the PNG, and the file is usually still smaller than the PNG.

For photos and soft illustrations, lossy at 80 to 90 is a good balance. For pixel art, interface screenshots and diagrams, where a single changed pixel matters, use 100. The same rule holds in the Photo Editor's Export, where Quality runs from 30 to 100 and 100 is lossless too.

Why not use lossless for everything? Because a photo stored losslessly is still large, in WebP as in PNG: every pixel of grain and texture has to be kept. A lossy WebP of the same photo at 85 is usually a small fraction of that and looks the same on a page. Try both in the Convert tool; the size beside the result tells you at once which one is worth it.

Checking the result like a web developer

Before a WebP goes on a site, a few checks save trouble later:

• Edges against the page. Logos with soft, partly see-through edges keep them, so they blend into any background color. Both previews in the Convert tool sit on a light checkerboard, so you can see that the clear areas survived.
• Dimensions. The Convert tool keeps the PNG's pixel size exactly. If the picture is displayed smaller, a narrower copy loads faster (see below).
• Metadata. Nothing like location, camera or date is written, so the file is lean and gives nothing away.
• Name. The suggested name is the PNG's, ending in .webp, which keeps asset names tidy.

Every current browser shows WebP, so on the page itself there is little reason to fall back to PNG. Older programs are another matter (see the last section).

Several widths for one picture

Responsive pages often serve the same picture at a few widths, so a phone does not download what a large monitor needs. The Photo Editor's Export helps here. Open the PNG, press Export, choose WebP, and pick a width under Size: 1920, 1280, 1080, 800 or 512 pixels, among others, whenever the picture is wider than that, or any width in the W box. Save, then export again at the next width.

Each export is one file, and the name starts as the picture's own, so rename each one in the Windows Save window to something like hero-1280.webp. Export remembers WebP and your quality, so each next width is a couple of clicks.

If your site's software makes its own smaller copies on upload, you can skip this: upload the widest WebP you need and let it do the rest.

When to leave a PNG alone

WebP is not an upgrade for every file:

• Tiny icons and simple graphics are already small as PNG, and the saving may be a few hundred bytes.
• Pictures other people will edit are easier to hand over as PNG, since every editor opens it.
• Print and documents: print shops and many office workflows expect PNG or JPG.
• Email newsletters: support for WebP in email programs is uneven, so a PNG is the safer attachment or inline picture.
• Your master files: keep the PNG as the source and make WebPs from it, rather than editing the WebP and saving it again.

The Convert tool makes the trade-off visible: if the result shows only a small saving, keep the PNG. A plus sign next to the percentage means the WebP came out larger, which happens now and then with tiny or very simple graphics.