How to Convert Images to WebP (Complete Guide)

WebP vs Other Formats: File Size Reality Check

Method 1: Browser-Based (Squoosh)

Squoosh (squoosh.app) is a free Google tool that converts images in the browser with no upload to a server. Drag in your image, select WebP on the right panel, and drag the quality slider while watching the file size change in real time.

Method 2: Command Line with cwebp

cwebp is Google's official WebP encoder. Install it from developers.google.com/speed/webp/download, then use it for fast batch processing.

# Single file conversion
cwebp -q 75 input.jpg -o output.webp

# -q 75    quality (0-100, default 75)
# -lossless    use lossless compression (for logos/graphics)
# -resize 800 0    resize to 800px wide (0 = auto height)

# Batch convert all JPGs in a folder
for f in *.jpg; do
  cwebp -q 75 "$f" -o "${f%.jpg}.webp"
done

# Animated WebP from GIF
gif2webp -q 75 animation.gif -o animation.webp

# Check output info
webpinfo output.webp

HTML: Always Provide Fallbacks with picture

Even though WebP has 97%+ browser support in 2026, use the <picture> element to serve WebP to supporting browsers and JPEG/PNG to older ones.

WordPress & CMS: Automatic Conversion

Most modern WordPress plugins and CMSes handle WebP conversion automatically on upload.

import Image from 'next/image'

export function Hero() {
  return (
    
  )
}

Common WebP Conversion Mistakes

• Converting WebP back to PNG for editing — each lossy conversion degrades quality. Always keep original PNG/TIFF source files, only export WebP as the final delivery format.
• Not setting explicit dimensions on img tags — converted images should still have width/height attributes to prevent layout shift (CLS).
• Using WebP for logos/icons — SVG is better for logos and icons (infinitely scalable, much smaller). WebP is best for photographs and complex illustrations.
• Lossless WebP for photos — lossless WebP is actually larger than lossy for photographs. Use lossless only for graphics with flat colors, text, or transparency that needs pixel-perfect quality.

Frequently Asked Questions

What quality setting should I use for WebP?

Start at 75. For product images where detail matters, 80–85. For background images or decorative photos, 65–70. Below 60 is usually visually noticeable. Use Squoosh to compare side-by-side at your target quality.

Should I use WebP or AVIF in 2026?

AVIF is now at 97%+ browser support and delivers 30–50% smaller files than WebP. Use picture to serve AVIF first, WebP as second source, JPEG as final fallback. The extra source element is worth it for the file size savings.

Does WebP support transparency?

Yes — WebP supports both lossy and lossless transparency (alpha channel). It's smaller than PNG for transparent images. This makes it a direct replacement for both JPEG and PNG.

Will converting to WebP break my CMS?

Converting files and renaming them to .webp may break references in your CMS. The safer approach is to use a plugin that generates WebP variants alongside originals and serves them via picture or server-side content negotiation, keeping the original filenames intact.