Batch Converting Images to WebP at Scale

Batch conversion turns an entire directory or build step into WebP automatically, rather than one image at a time. The right approach depends on your stack: shell loops for ad-hoc jobs, parallel runners for large libraries, and Node or build-tool plugins for automated pipelines. This guide compares the practical options with working examples.

For single-image work, use cwebp or the browser tools PNG to WebP and JPG to WebP. For the format, see What is WebP?.

How do you batch convert a folder to WebP?

Loop a directory through cwebp with a shell for loop. The loop runs cwebp once per file, writing a .webp beside each source. This is the simplest batch method and needs only libwebp installed.

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

${f%.*} strips the original extension so photo.jpg becomes photo.webp. Keep the originals — a <picture> fallback needs them.

How do you convert images recursively?

Use find with -exec to walk subdirectories and convert every matching image. This handles nested asset folders that a flat loop misses, producing a .webp next to each source throughout the tree.

find . -type f \( -iname '*.jpg' -o -iname '*.png' \) \
  -exec sh -c 'cwebp -q 80 -m 6 "$1" -o "${1%.*}.webp"' _ {} \;

The quoting (${1%.*}) keeps the directory path intact, so files stay in their original folders.

How do you speed up large batches?

Run conversions in parallel with GNU parallel or xargs to use every CPU core. cwebp processes one file per invocation, so parallelism comes from running many invocations at once — the biggest speed win for large libraries.

find . -iname '*.jpg' | parallel cwebp -q 80 -m 6 {} -o {.}.webp

{.} is parallel's token for the input without its extension. For thousands of images this is several times faster than a serial loop.

How do you batch convert to WebP in Node.js?

Use the sharp library to convert images programmatically in a Node build step. sharp wraps libwebp, is fast, and integrates with asset pipelines. It is the standard choice for JavaScript projects.

import sharp from "sharp";
import { glob } from "glob";

for (const file of await glob("src/images/**/*.{jpg,png}")) {
  await sharp(file).webp({ quality: 80 }).toFile(file.replace(/\.\w+$/, ".webp"));
}

sharp and imagemin both rely on the behaviour described in libwebp Library: Installation and API Reference.

Can you batch convert with ImageMagick?

ImageMagick converts directories to WebP with mogrify -format webp, which writes a WebP copy of every matching file in place. It is convenient where ImageMagick is already installed, though cwebp gives finer control over WebP-specific parameters.

mogrify -format webp -quality 80 *.jpg

For the WebP-specific options ImageMagick does not expose, fall back to cwebp.

How do you automate WebP in a build pipeline?

Add a WebP step to your bundler so conversion happens on every build. Plugins exist for the major build tools, generating WebP variants from source images automatically and keeping them in sync.

The common integrations are:

Vite — vite-plugin-image-optimizer or vite-imagetools.
webpack — image-minimizer-webpack-plugin with the WebP option.
Next.js — automatic via next/image; see How to Implement WebP in Next.js with next/image.
Gulp — gulp-webp.

Build-time generation pairs with the <picture> element or CDN negotiation at serve time — see How to Serve WebP Images in HTML Using the picture Element.

Where to go from here

Batch conversion scales WebP across a whole project. Use a shell loop or parallel for one-off jobs, and sharp or a build plugin to keep generated WebP in sync automatically.