PNG to WebP converter

Google's own measurements, from the WebP documentation:

Your own images will vary. Screenshots with large flat areas shrink less than photos, and tiny icons can even grow. That is why the tool shows the change on each file rather than promising a number.

The slider goes from 1 to 100 and maps to the 0 to 1 quality value of canvas.toBlob("image/webp", quality). Lower means smaller and blurrier. A practical way to choose:

• Photos, illustrations with gradients: 70 to 80.
• Screenshots, UI, text: 85 to 95, and zoom in on the text in the preview.
• Logos and icons: try 90+, or 100 for lossless WebP in Chromium browsers (the file list says which mode you got). If edges still look soft, use cwebp -lossless or keep the PNG.

Setting a max width often saves more than lowering the quality: a 4000 px screenshot shown at 1200 px wastes most of its bytes.

The browser picks the first <source> it supports and falls back to the <img>:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.png" alt="Product screenshot" width="1200" height="630">
</picture>

Keep the width and height on the <img> so the layout does not shift while it loads. In CSS, image-set() does the same job for backgrounds.

# libwebp: lossy at quality 80, or lossless
cwebp -q 80 logo.png -o logo.webp
cwebp -lossless logo.png -o logo.webp

# every PNG in the folder (bash)
for f in *.png; do cwebp -q 80 "$f" -o "${f%.png}.webp"; done

// Node.js with sharp
import sharp from 'sharp';
await sharp('logo.png').webp({ quality: 80 }).toFile('logo.webp');
await sharp('logo.png').webp({ lossless: true }).toFile('logo-lossless.webp');

# Python with Pillow
from PIL import Image
Image.open("logo.png").save("logo.webp", quality=80)        # lossy
Image.open("logo.png").save("logo.webp", lossless=True)     # lossless

Need the reverse for an app that cannot open WebP? Use WebP to PNG. For AVIF or JPG output, use the image converter. More on DevHunt: design tools.