How to Bulk Convert Images to WebP: Speed Up Your Website
Learn how to bulk convert PNG, JPG, and other image formats to WebP for faster website loading. Covers quality settings, build tool integration, CDN automation, and performance benchmarks.
Emma Wilson·February 19, 2026·10 min read
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.
Website performance dashboard showing speed improvement after WebP conversion
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.
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.
Pro Tip: Different image types benefit from different quality settings. Photographs can go lower (Q75-80) because the eye is forgiving of compression in complex scenes. Screenshots, diagrams, and text-heavy images should use lossless or Q90+ to keep sharp edges clean. Rather than a single quality setting for your entire site, use two presets: one for photographs (Q80) and one for graphics (Q90 or lossless).
Method 1: Online Bulk Conversion
The fastest way to convert a batch of images to WebP is our WebP converter:
# 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)
Build pipeline diagram showing WebP generation integrated into deployment workflow
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} />;
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
Pro Tip: If your CDN supports automatic WebP conversion, you may not need to generate WebP files at build time at all. Upload original JPGs and PNGs, and let the CDN handle conversion and caching. This simplifies your build process and ensures every image is served in the optimal format for each visitor's browser.
Monitoring the Impact
After converting to WebP, measure the performance improvement:
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
Before and after PageSpeed Insights scores showing improvement from WebP conversion
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.
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.
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.
