How to Convert Images to WebP in WordPress

Plugins

November 4, 2025

How to Convert Images to WebP in WordPress

Using the modern WebP format can dramatically improve your site’s loading speed and Google PageSpeed Insights score. WebP images are smaller than JPEG and PNG files without visible quality loss — making them ideal for optimizing LCP (Largest Contentful Paint) and overall Core Web Vitals. In this guide, you’ll learn several ways to convert and serve WebP images in WordPress safely and efficiently.

What Is WebP?

WebP is an image format developed by Google that provides superior compression compared to traditional formats:

🖼 Up to 30–40% smaller file sizes than JPEG or PNG.
⚡ Faster page loading and better Core Web Vitals (especially LCP).
🌐 Supported by all modern browsers (Chrome, Edge, Firefox, Safari 14+).

Step 1: Check for Native WebP Support

Since WordPress 5.8, WebP is supported natively. You can upload and use .webp images just like JPEG or PNG.

Go to Media → Add New.
Upload a .webp image file.
If the upload succeeds and the image displays, your hosting supports WebP.

If you see an error message, your server’s GD or Imagick library may not support WebP. Contact your host to enable it or use a plugin that handles conversion automatically.

Step 2: Convert Images to WebP Using a Plugin

Most users will want an automatic solution that converts existing images to WebP and serves them to compatible browsers. Below are the best plugins for this task.

1) LiteSpeed Cache (Recommended)

If your server uses LiteSpeed, this plugin handles WebP conversion and delivery seamlessly.

Install and activate LiteSpeed Cache.
Go to LiteSpeed Cache → Image Optimization.
Click Request Key to connect to the optimization server.
Click Send Optimization Request to start converting images.
Enable Create WebP Versions and Replace Images with Optimized Versions.

LiteSpeed will generate WebP copies automatically and serve them to browsers that support it.

2) EWWW Image Optimizer

Works with any hosting environment (Apache, Nginx, LiteSpeed).

Install and activate EWWW Image Optimizer.
Go to Settings → EWWW Image Optimizer → WebP Conversion.
Enable WebP Conversion and JS WebP Rewriting.
Click Save Changes → Bulk Optimize to convert existing images.

EWWW will automatically serve WebP images when supported and fall back to JPEG/PNG for older browsers.

3) ShortPixel Image Optimizer

Install and activate ShortPixel Image Optimizer.
Enter your API key (free up to 100 images/month).
Go to Settings → ShortPixel → Advanced.
Enable WebP Versions and Deliver the WebP versions of the images in the front-end.
Run Bulk Optimization to process your Media Library.

ShortPixel can also compress existing images and store backups automatically.

Step 3: Serve WebP Images Correctly

After conversion, the plugin must serve WebP images only to browsers that support them. The best plugins handle this automatically with .htaccess rules or JavaScript rewrites.

If you want to do it manually, add this to your .htaccess file (for Apache):

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
  RewriteCond %{REQUEST_FILENAME}.webp -f
  RewriteRule ^(.*)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

This rule tells your server to serve .webp images automatically if the browser supports them.

Step 4: Use CDN Support (Optional)

If your site uses a CDN like Cloudflare or BunnyCDN, enable WebP delivery in your CDN settings for global optimization:

Cloudflare: Activate “Polish” (Pro plan) → Choose “WebP.”
QUIC.cloud: Automatically handles WebP through LiteSpeed Cache.
BunnyCDN: Enable “Optimize Images” → “Serve WebP automatically.”

Step 5: Test Your WebP Images

To confirm that your site is serving WebP correctly:

Open your site in Chrome or Edge.
Right-click → Inspect → Network tab.
Reload the page and click on an image file.
Check the Content-Type header — it should say image/webp.

You can also verify with Google PageSpeed Insights — the “Serve images in next-gen formats” warning should disappear.

Step 6: Optimize Image Delivery

WebP works best when combined with other image optimizations:

📏 Resize images before upload to fit your layout.
🕒 Lazy-load off-screen images (built into WordPress 5.5+ or via LiteSpeed/Autoptimize).
🧩 Add width and height attributes to prevent layout shifts (CLS).
⚙️ Preload hero images using fetchpriority="high" for better LCP.

<img src="hero.webp" width="1200" height="600" loading="eager" fetchpriority="high" alt="Hero image">

Step 7: Bulk Convert with Command-Line Tools (Advanced)

If you manage a large WordPress site and prefer server-side control, you can convert all images to WebP using command-line tools like cwebp:

# Install WebP utilities (Ubuntu)
sudo apt install webp

# Convert all JPEGs in uploads directory
find /var/www/html/wp-content/uploads -type f -name "*.jpg" -exec cwebp -q 80 {} -o {}.webp \;

This is ideal for developers managing multiple sites with large media libraries.

Best Practices for WebP

✅ Use WebP for photos, graphics, and backgrounds.
❌ Use PNG for transparency-heavy graphics or logos if quality is critical.
✅ Always keep a backup of the original images.
✅ Combine WebP with CDN caching and lazy loading for maximum speed.

Conclusion

Converting images to WebP in WordPress is one of the easiest and most effective ways to improve performance and Core Web Vitals. Whether you use LiteSpeed Cache, EWWW, or ShortPixel, the process is fully automated and requires no technical maintenance. Once configured, your visitors will enjoy faster page loads, reduced bandwidth, and a smoother experience across all devices.

Summary: Install optimization plugin → Enable WebP conversion → Serve WebP automatically → Test delivery → Combine with lazy loading and CDN caching for best results.

🔌 Looking for more? Check out our WordPress Plugins Hub to discover recommended tools and how to use them.