How to Bulk Convert Images to WebP: Speed Up Your Website

Why WebP Is the Standard for Web Images in 2026

Website speed directly impacts revenue and user experience. Google's research shows that a one-second delay in mobile page load time reduces conversion rates by up to 20%. Images account for 40-60% of total page weight on most websites. Converting those images from PNG and JPG to WebP typically reduces their size by 25-35% (lossless) or 60-80% (lossy) with no visible quality difference.

WebP is no longer a "future format" -- it is the present. Browser support exceeds 97% globally in 2026, covering Chrome, Firefox, Safari, Edge, and all major mobile browsers. Every major CDN, CMS, and web framework supports WebP generation and delivery. The remaining 3% of users can be served traditional formats via <picture> fallbacks.

If your website still serves PNG and JPG exclusively, you are leaving significant performance gains on the table. This guide covers how to bulk convert your entire image library to WebP, integrate WebP generation into your build process, and serve WebP efficiently.

File Size Savings: Real-World Benchmarks

Here is what to expect when converting typical website images to WebP:

Image Type	Original Format	Original Size	WebP Size	Savings
Hero image (photograph)	JPG Q85	350 KB	180 KB	49%
Product photo	JPG Q90	450 KB	220 KB	51%
Blog post image	JPG Q80	180 KB	95 KB	47%
Logo (transparent)	PNG	120 KB	35 KB	71%
Screenshot	PNG	800 KB	280 KB	65%
Icon/illustration (flat)	PNG	45 KB	18 KB	60%
Infographic	PNG	1.2 MB	400 KB	67%
Thumbnail grid (20 images)	JPG Q85	3.5 MB total	1.8 MB total	49%

Across a typical website with 50-200 images, converting to WebP reduces total image payload by 40-60%, translating to measurably faster page loads and better Core Web Vitals scores.

For a comprehensive comparison of WebP against other formats, see our WebP conversion guide and what is WebP format guide.

Choosing WebP Quality Settings

The quality setting has the biggest impact on file size and visual quality:

Quality	File Size vs JPG Q85	Visual Quality	Best For
Lossless	Often larger than JPG but smaller than PNG	Pixel-perfect	Screenshots, diagrams, text-heavy images
Q90-100	20-30% smaller	Indistinguishable from source	Photography portfolios, hero images
Q75-89	40-55% smaller	Excellent (minor differences at 200% zoom)	Standard web images, blog photos
Q60-74	55-70% smaller	Good (visible softness on close inspection)	Thumbnails, background images
Q40-59	70-80% smaller	Acceptable for small display sizes	Low-bandwidth contexts, placeholders

The recommended starting point for most websites is quality 80. This produces files that are 45-55% smaller than equivalent JPGs with quality differences that are imperceptible at normal viewing distances.

Method 1: Online Bulk Conversion

The fastest way to convert a batch of images to WebP is our WebP converter:

1. Upload multiple images (PNG, JPG, GIF, BMP, TIFF -- all supported)
2. Configure quality settings (default 80 is recommended)
3. Download all converted WebP files as a ZIP archive

For broader format conversions, the image converter handles batch operations across all supported formats.

Method 2: cwebp (Google's Official CLI)

Google's cwebp tool provides the most direct conversion path:

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

# Lossless conversion (for PNGs with text/screenshots)
cwebp -lossless input.png -o output.webp

# Near-lossless (visually lossless, smaller than lossless)
cwebp -near_lossless 60 input.png -o output.webp

Batch Conversion Script

#!/bin/bash
# Bulk convert all images to WebP
INPUT_DIR="./images"
OUTPUT_DIR="./images-webp"
QUALITY=80

mkdir -p "$OUTPUT_DIR"

# Convert JPGs (lossy)
for f in "$INPUT_DIR"/*.{jpg,jpeg,JPG,JPEG}; do
  [ -f "$f" ] || continue
  filename=$(basename "$f" | sed 's/\.[^.]*$//')
  cwebp -q "$QUALITY" "$f" -o "$OUTPUT_DIR/${filename}.webp"
  echo "Converted: $(basename "$f") -> ${filename}.webp"
done

# Convert PNGs (lossless for transparency, lossy for photos)
for f in "$INPUT_DIR"/*.{png,PNG}; do
  [ -f "$f" ] || continue
  filename=$(basename "$f" | sed 's/\.[^.]*$//')

  # Check if PNG has transparency
  has_alpha=$(magick identify -format '%A' "$f")
  if [ "$has_alpha" = "True" ]; then
    cwebp -lossless "$f" -o "$OUTPUT_DIR/${filename}.webp"
    echo "Converted (lossless): $(basename "$f")"
  else
    cwebp -q "$QUALITY" "$f" -o "$OUTPUT_DIR/${filename}.webp"
    echo "Converted (lossy): $(basename "$f")"
  fi
done

# Summary
orig_size=$(du -sh "$INPUT_DIR" | cut -f1)
webp_size=$(du -sh "$OUTPUT_DIR" | cut -f1)
echo "Original: $orig_size -> WebP: $webp_size"

Method 3: Sharp (Node.js)

For web applications and build pipelines:

const sharp = require("sharp");
const fs = require("fs");
const path = require("path");

async function convertToWebp(inputPath, outputPath, options = {}) {
  const { quality = 80, lossless = false } = options;

  await sharp(inputPath)
    .webp({
      quality: quality,
      lossless: lossless,
      nearLossless: false,
      effort: 6, // 0-6, higher = smaller file but slower
    })
    .toFile(outputPath);
}

async function bulkConvert(inputDir, outputDir, options = {}) {
  const files = fs.readdirSync(inputDir).filter((f) => /\.(jpg|jpeg|png|gif|bmp|tiff)$/i.test(f));

  await Promise.all(
    files.map(async (file) => {
      const input = path.join(inputDir, file);
      const output = path.join(outputDir, file.replace(/\.[^.]+$/, ".webp"));
      await convertToWebp(input, output, options);
      console.log(`Converted: ${file}`);
    }),
  );
}

// Convert all images in a directory
await bulkConvert("./public/images", "./public/images", { quality: 80 });

Method 4: ImageMagick

# Single conversion
magick input.jpg -quality 80 output.webp

# Batch conversion with parallel processing
find ./images -name "*.jpg" -o -name "*.png" | \
  parallel magick {} -quality 80 {.}.webp

# With specific dimensions (resize during conversion)
magick input.jpg -resize '1920x>' -quality 80 output.webp

Method 5: Python (Pillow)

from PIL import Image
import os
import glob
from concurrent.futures import ThreadPoolExecutor

def convert_to_webp(input_path, output_dir, quality=80):
    filename = os.path.splitext(os.path.basename(input_path))[0]
    output_path = os.path.join(output_dir, f"{filename}.webp")

    with Image.open(input_path) as img:
        # Preserve alpha channel for PNGs
        if img.mode in ("RGBA", "LA"):
            img.save(output_path, "WEBP", quality=quality, lossless=True)
        else:
            img.save(output_path, "WEBP", quality=quality, method=6)

    return output_path

def bulk_convert(input_dir, output_dir, quality=80, workers=8):
    os.makedirs(output_dir, exist_ok=True)
    files = glob.glob(os.path.join(input_dir, "*.jpg")) + \
            glob.glob(os.path.join(input_dir, "*.png"))

    with ThreadPoolExecutor(max_workers=workers) as executor:
        futures = [
            executor.submit(convert_to_webp, f, output_dir, quality)
            for f in files
        ]
        for future in futures:
            print(f"Converted: {future.result()}")

bulk_convert("./images", "./images-webp", quality=80)

Integrating WebP into Your Build Process

Next.js (Built-In)

Next.js automatically converts images to WebP (or AVIF) when using the <Image> component:

import Image from "next/image";

// Next.js automatically serves WebP/AVIF based on browser support
<Image src="/photos/hero.jpg" alt="Hero" width={1920} height={1080} />;

Webpack (via image-minimizer-webpack-plugin)

// webpack.config.js
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");

module.exports = {
  optimization: {
    minimizer: [
      new ImageMinimizerPlugin({
        generator: [
          {
            preset: "webp",
            implementation: ImageMinimizerPlugin.sharpGenerate,
            options: {
              encodeOptions: {
                webp: { quality: 80 },
              },
            },
          },
        ],
      }),
    ],
  },
};

Vite (via vite-plugin-image-optimizer)

// vite.config.js
import { imageOptimizer } from "vite-plugin-image-optimizer";

export default {
  plugins: [
    imageOptimizer({
      webp: { quality: 80 },
      avif: { quality: 50 },
    }),
  ],
};

Gulp

const gulp = require("gulp");
const webp = require("gulp-webp");

gulp.task("webp", () => {
  return gulp
    .src("src/images/**/*.{jpg,png}")
    .pipe(webp({ quality: 80 }))
    .pipe(gulp.dest("dist/images"));
});

Serving WebP with Fallbacks

Not every client supports WebP. Serve it progressively:

HTML <picture> Element

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="Description" loading="lazy" width="800" height="600" />
</picture>

Nginx Auto-Detection

Serve WebP automatically based on browser Accept headers:

# /etc/nginx/conf.d/webp.conf
map $http_accept $webp_suffix {
    default "";
    "~*webp" ".webp";
}

server {
    location ~* ^/images/.+\.(jpg|jpeg|png)$ {
        try_files $uri$webp_suffix $uri =404;
    }
}

This serves image.jpg.webp if it exists and the browser accepts WebP, otherwise serves the original image.jpg.

Apache (.htaccess)

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} \.(jpg|jpeg|png)$
  RewriteCond %{REQUEST_FILENAME}.webp -f
  RewriteRule ^(.+)\.(jpg|jpeg|png)$ $1.$2.webp [T=image/webp,L]
</IfModule>

CDN-Level Conversion

Major CDNs offer automatic WebP conversion:

• Cloudflare -- Polish (Pro+) automatically converts to WebP
• AWS CloudFront -- Use Lambda@Edge for on-the-fly conversion
• Fastly -- Image Optimizer converts dynamically
• Imgix / Cloudinary -- URL-based format negotiation

Monitoring the Impact

After converting to WebP, measure the performance improvement:

Core Web Vitals Impact

• LCP (Largest Contentful Paint) -- Smaller hero images load faster, directly improving LCP
• CLS (Cumulative Layout Shift) -- No change (WebP does not affect layout stability)
• INP (Interaction to Next Paint) -- Smaller images reduce network contention, potentially improving INP

Tools for Measurement

• Google PageSpeed Insights -- Tests individual pages and reports image optimization opportunities
• WebPageTest -- Detailed waterfall charts showing image load times
• Chrome DevTools > Network tab -- Filter by "Img" to see format and size of each image
• Lighthouse -- Reports "Serve images in next-gen formats" if non-WebP images are detected

Should You Use AVIF Instead?

AVIF offers even better compression than WebP (20-40% smaller), but there are trade-offs:

• AVIF encoding is slower -- 5-20x slower than WebP encoding, which impacts build times
• AVIF browser support is lower -- 93% vs 97% for WebP
• AVIF has dimension limits -- Some implementations cap at 8192x8192 pixels

The pragmatic approach is to serve AVIF first (with WebP and JPG/PNG fallbacks), using the <picture> element shown above. This way, browsers that support AVIF get the smallest files, while others get WebP.

For a detailed comparison, see our AVIF vs WebP vs JPEG XL guide.

Common Mistakes

Mistake 1: Converting Everything to Lossy WebP

Screenshots, diagrams, and text-heavy images should use WebP lossless mode. Lossy compression blurs sharp edges and text.

Mistake 2: Not Providing Fallbacks

While WebP support is 97%+, the remaining 3% includes some corporate environments and older devices. Always provide a JPG or PNG fallback.

Mistake 3: Using Quality 100

WebP at quality 100 produces files that are often larger than the original JPG. Quality 80 is the sweet spot for most content.

Mistake 4: Not Preserving Transparency

When converting PNGs with transparency to WebP, use lossless mode or ensure the alpha channel is preserved with quality 100 alpha:

cwebp -q 80 -alpha_q 100 transparent.png -o transparent.webp

Mistake 5: Ignoring Animated GIFs

Animated GIFs can also be converted to animated WebP for significant savings:

gif2webp -q 80 animation.gif -o animation.webp

For more on this topic, see our how to convert GIF to PNG guide for static extraction, or convert animated GIFs to MP4 using the GIF to MP4 tool for even greater savings.

Summary

Bulk converting images to WebP is one of the highest-impact performance optimizations for any website. Expect 40-60% reduction in total image payload with no visible quality loss at quality 80. Use our WebP converter for quick batch conversions, integrate Sharp or cwebp into your build pipeline for automated conversion, and serve WebP with <picture> fallbacks for universal compatibility.

For further web performance optimization, see our optimize images for website guide, best image format for web SEO guide, and image compression guide. And for bulk processing other file types, check our how to batch convert files tutorial.

If your source images need resizing before conversion, use the resize image tool. For compressing images that cannot be converted to WebP, try the image compressor or compress JPEG tool. And if you want to take compression even further, our AVIF converter produces files 20-40% smaller than WebP.