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.

<!-- No code needed — use squoosh.app in your browser -->
<!-- Settings to start with:
  Quality: 75 (good balance)
  Effort: 4 (compression effort, higher = smaller but slower)
  Lossless: OFF for photos, ON for graphics/logos with flat colors

  Rule of thumb: start at quality 75, lower to 65 if file size still too large,
  only go below 60 if the result is acceptable at full zoom
-->

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.

<!-- Modern picture element with fallbacks -->
<picture>
  <!-- Serve WebP to supporting browsers -->
  <source srcset="hero.webp" type="image/webp">
  <!-- Fallback for older browsers -->
  <img src="hero.jpg" alt="Hero image description"
       width="1200" height="600" loading="lazy">
</picture>

<!-- With multiple sizes (responsive) -->
<picture>
  <source
    type="image/webp"
    srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
    sizes="(max-width: 600px) 100vw, 1200px">
  <source
    srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
    sizes="(max-width: 600px) 100vw, 1200px">
  <img src="hero-1200.jpg" alt="Hero" width="1200" height="600">
</picture>

WordPress & CMS: Automatic Conversion

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

<!-- WordPress plugins that auto-convert to WebP:
  - Smush (EWWW Image Optimizer)
  - ShortPixel
  - Imagify
  - Cloudflare (if proxying — handles conversion at edge)

  These generate both original + WebP versions and serve
  WebP via picture element or HTTP Accept header detection.
-->

<!-- Next.js: automatic WebP conversion built-in -->
import Image from 'next/image'

export function Hero() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero"
      width={1200}
      height={600}
      priority
      // Next.js automatically serves WebP/AVIF based on browser support
    />
  )
}

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 at ~94% 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.