By AsiaGB  ·  August 16, 2026

WordPress WebP Images: Speed Up Your Site with Smaller Image Files

Images are often the single largest contributor to page weight on a WordPress site. If your images are still in JPEG or PNG format, you are almost certainly serving files larger than they need to be. WebP — the modern image format developed by Google — delivers the same visual quality at 25–34% smaller file sizes, making it one of the highest-impact performance improvements you can make with minimal effort. This guide walks you through everything: what WebP is, how it compares to other formats, which plugins to use, and how to configure your server for automatic WebP delivery.

What Is WebP?

WebP is a modern image format developed by Google and released in 2010. It was designed as a universal replacement for JPEG, PNG, and GIF — offering smaller file sizes without a perceptible drop in image quality. The format takes its name from "Web Picture," which signals its purpose: images optimised specifically for the web.

WebP supports two compression modes:

• Lossy compression — similar to JPEG, best for photographs and complex imagery. A WebP lossy file is typically 25–34% smaller than an equivalent JPEG.
• Lossless compression — similar to PNG, best for graphics, logos, and screenshots with solid colours. A WebP lossless file is typically 26% smaller than an equivalent PNG.

Beyond compression, WebP offers several capabilities that older formats lack:

• Alpha channel transparency — like PNG, but with far smaller file sizes
• Animation support — like GIF, but dramatically smaller and with higher colour depth
• Broad browser support — more than 95% of browsers in active use support WebP as of 2026

File extension is .webp. MIME type is image/webp.

Why Use WebP on WordPress?

Most WordPress sites are image-heavy. A typical blog post contains anywhere from 3 to 15 images. A WooCommerce store might have thousands. Every kilobyte saved per image multiplies across every page load, and the cumulative effect on site speed is significant.

Impact on Core Web Vitals

Google uses Core Web Vitals as a ranking factor. The metric most directly affected by image weight is LCP (Largest Contentful Paint) — the time it takes for the page's primary content element to become visible. The hero image on most pages is the LCP element. Replacing a 200 KB JPEG hero with a 130 KB WebP equivalent can shave hundreds of milliseconds off LCP, which often moves a site from "Needs Improvement" to "Good."

Real Bandwidth Savings

Consider a site serving 50,000 page views per month, each with a hero image that is 150 KB as JPEG versus 100 KB as WebP. That difference alone saves 2.5 GB of bandwidth per month — without touching any code, layout, or content.

No Visible Quality Loss

At a WebP quality setting of 80–85, the difference is imperceptible to the human eye in the vast majority of images. Visitors get the same visual experience faster.

WebP vs JPEG vs PNG: Full Comparison

Here is a side-by-side comparison of the three most common web image formats across the dimensions that matter most for WordPress performance:

Relative file size comparison for the same photograph at equivalent quality:

Best WordPress Plugins for WebP

The plugin ecosystem for WebP on WordPress is mature. Here are the four most reliable options, each suited to different hosting environments and budgets:

How to Use Converter for Media (Step-by-Step)

Converter for Media is the best free starting point for most WordPress sites. It converts on your server, needs no API key, and handles both new uploads and existing media. Here is the complete setup process:

1. In WordPress Admin, go to Plugins → Add New. Search for "Converter for Media". Click Install Now then Activate.
2. Navigate to Settings → Converter for Media to open the plugin configuration page.
3. Under the General tab, confirm that "Convert images on upload" is enabled. This ensures all future uploads are automatically converted to WebP.
4. Set your desired Quality level. A value of 82 is a strong default — it is visually indistinguishable from a JPEG at full quality while keeping file sizes minimal.
5. Choose your serving method. The "Use .htaccess rewrite rules" option is fastest if your server runs Apache with mod_rewrite enabled. PHP-based rewriting works on any server but is slightly slower.
6. Click the Bulk Convert tab. Here you will see a count of existing images that have not yet been converted. Click "Convert all" to start the batch process.
7. Wait for the progress bar to reach 100%. For a site with hundreds of images this may take several minutes. The plugin converts images progressively so it will not time out.
8. Once complete, the plugin automatically serves .webp files to supporting browsers while falling back to the original JPEG or PNG for browsers that do not support WebP.

Converting WebP via cwebp CLI

For developers and site administrators with SSH access, Google's cwebp command-line tool provides maximum control over the conversion process. This approach is ideal for batch-converting large directories of images before uploading them to WordPress, or for integrating WebP generation into a deployment pipeline.

Install cwebp on Ubuntu/Debian

sudo apt update && sudo apt install webp -y

# Verify installation
cwebp -version

Install on CentOS/AlmaLinux

sudo dnf install libwebp-tools -y

Convert a single image

# Lossy conversion at quality 82 (recommended for photos)
cwebp -q 82 photo.jpg -o photo.webp

# Lossless conversion (better for graphics with flat colours)
cwebp -lossless logo.png -o logo.webp

# Show compression stats
cwebp -q 82 -print_psnr photo.jpg -o photo.webp

Batch convert an entire directory

# Convert all JPEGs in the current directory
for f in *.jpg *.jpeg; do
  [ -f "$f" ] && cwebp -q 82 "$f" -o "${f%.*}.webp"
done

# Convert all PNGs
for f in *.png; do
  [ -f "$f" ] && cwebp -q 85 "$f" -o "${f%.*}.webp"
done

Recursively convert an uploads directory

find /var/www/html/wp-content/uploads -name "*.jpg" | while read f; do
  cwebp -q 82 "$f" -o "${f%.jpg}.webp"
done

Configuring .htaccess for Automatic WebP Serving

If you have pre-generated WebP versions of your images (either via cwebp CLI or a plugin that stores both versions), you can configure Apache to serve WebP files automatically to supporting browsers without modifying any HTML. This method is the most efficient because it happens at the server level before PHP is even involved.

Add the following to your .htaccess file

<IfModule mod_rewrite.c>
  RewriteEngine On

  # Serve WebP if the browser accepts it and a .webp file exists
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
  RewriteCond %1.webp -f
  RewriteRule ^ %1.webp [L,T=image/webp,E=webp:1]
</IfModule>

<IfModule mod_headers.c>
  # Tell caches that the response varies by Accept header
  <FilesMatch "\.webp$">
    Header set Vary "Accept"
  </FilesMatch>
</IfModule>

Here is what each rule does:

• Line 1 — Accept check: Only rewrite if the browser sends Accept: image/webp in the request header. Every modern browser does this automatically.
• Line 2 — Extension match: Only rewrite requests for .jpg, .jpeg, or .png files.
• Line 3 — File existence check: Only rewrite if the corresponding .webp file actually exists on disk. No broken images if conversion is incomplete.
• Line 4 — Rewrite: Serve the .webp file with the correct MIME type.
• Vary header: Critical for correct CDN and proxy caching behaviour. Without it, a cache might store the WebP version and serve it to a browser that cannot display WebP.

How to Verify WebP Is Working

After setting up WebP delivery — whether via plugin or .htaccess — always verify that WebP files are actually being served before considering the task complete.

Method 1: Chrome DevTools Network Tab

1. Open your website in Google Chrome.
2. Press F12 (or Ctrl+Shift+I on Windows, Cmd+Option+I on Mac) to open DevTools.
3. Click the Network tab, then reload the page (Ctrl+R).
4. Filter by type: click Img in the filter bar to show only image requests.
5. Click on any image request and open the Headers panel.
6. Under Response Headers, confirm Content-Type: image/webp.

Method 2: Google PageSpeed Insights

Visit pagespeed.web.dev and analyse your URL. If WebP is not being served, you will see an "Opportunities" item labeled "Serve images in next-gen formats." If that item is absent, WebP is working correctly.

Method 3: cURL Command Line

# Simulate a WebP-capable browser request
curl -sI -H "Accept: image/webp,image/*" \
  https://yourdomain.com/wp-content/uploads/2026/08/photo.jpg \
  | grep -i "content-type"

# Expected output if WebP is working:
# content-type: image/webp

Method 4: Browser Extension

The Web Vitals Chrome extension displays LCP and other Core Web Vitals in real time. After enabling WebP, compare the LCP value on a page with large hero images — you should see a measurable improvement within the same browsing session.

Frequently Asked Questions