How do I convert PNGs to WebP for my site?

You can convert PNGs to WebP in a few easy ways, depending on your setup.

1) Command line with cwebp (best for batch jobs)

Install WebP tools, then run:

cwebp input.png -o output.webp

For better compression:

cwebp -q 80 input.png -o output.webp

• -q 80 = quality setting (0–100)
• Lower = smaller file, more loss
• Higher = better quality, larger file

Convert many PNGs

for f in *.png; do cwebp -q 80 "$f" -o "${f%.png}.webp"; done

2) ImageMagick

If you already use ImageMagick:

magick input.png output.webp

Or with quality:

magick input.png -quality 80 output.webp

3) Online converters

Good for quick one-offs, but avoid for sensitive images or large batches.

4) Build tools / automation

If you’re running a website, you can automate conversion during your build process with:

• Node.js scripts
• Gulp/Webpack/Vite plugins
• CI/CD steps

Important notes

• Transparency: WebP supports alpha transparency, so transparent PNGs usually convert well.
• Lossless vs lossy: PNG is lossless; WebP can be either. If the image is graphics/text-heavy and you want to preserve exact pixels, use lossless WebP:

  cwebp -lossless input.png -o output.webp
  

• Browser support: WebP is widely supported in modern browsers, but it’s still smart to provide a PNG fallback for older browsers.

Serving WebP on your site

Use <picture> so browsers can fall back automatically:

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.png" alt="Description">
</picture>

If you want, I can also give you:

• a batch conversion script
• a WordPress setup
• or a Node/Python script to convert all your PNGs automatically.