WebP for WordPress: Convert, Serve, and improve Images

WebP images are 25-35% smaller than equivalent JPGs, which translates directly into faster page loads, better Core Web Vitals scores, and lower server bandwidth costs. For WordPress site owners, the question is not whether to use WebP, but how to implement it correctly so all visitors get the right format regardless of their browser.

WordPress WebP Support Timeline

Even on modern WordPress, uploading WebP is only part of the picture. WordPress does not automatically convert your existing image library to WebP, nor does it automatically serve WebP to supporting browsers while falling back to JPG for others. That requires an image optimization plugin or server-side configuration.

Approach 1: Image Optimization Plugins

These plugins convert images on upload (or in bulk) and handle smart format serving automatically.

Approach 2: Server-Side WebP Serving (Without Plugins)

If you prefer not to use a plugin, you can configure your web server to automatically serve WebP when the browser supports it. This requires uploading both versions of each image (JPG/PNG and WebP) and adding rewrite rules.

Apache (.htaccess)

<IfModule mod_rewrite.c>
 RewriteEngine On

 # Check if browser accepts WebP
 RewriteCond %{HTTP_ACCEPT} image/webp

 # Check if WebP version exists
 RewriteCond %{DOCUMENT_ROOT}/$1.webp -f

 # Serve WebP
 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>

nginx

map $http_accept $webp_ext {
 default "";
 "~*webp" ".webp";
}

server {
 location ~* \.(jpe?g|png)$ {
 add_header Vary Accept;
 try_files $uri$webp_ext $uri =404;
 }
}

Approach 3: Using the HTML picture Element

If you want full control without server configuration, use the HTML <picture> element in your templates:

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

The browser uses the first <source> it supports. Browsers with WebP support use image.webp; others fall back to image.jpg. The <img> tag serves as the final fallback and carries the alt, width, and height attributes.

Converting Existing Images to WebP

If you need to generate WebP versions of your existing image library without a plugin, ImageMagick handles batch conversion efficiently:

# Convert all JPG files to WebP (quality 80)
magick mogrify -format webp -quality 80 *.jpg

# Convert PNG files to WebP
magick mogrify -format webp *.png

# Recursive conversion (Linux/macOS)
find wp-content/uploads -name "*.jpg" -exec magick {} {}.webp \;

After generating WebP files, upload them alongside the originals and use the server-side rewrite rules or picture element to serve the right version.

When to Convert WebP Back to JPG for WordPress

Occasionally the opposite problem arises: you have a WebP source image that you want to upload to WordPress as JPG (perhaps for a client who needs JPG, or for use in contexts where WebP thumbnails do not generate correctly).

WebP Impact on Core Web Vitals

The primary SEO benefit of WebP on WordPress is its effect on Largest Contentful Paint (LCP) — one of Google's three Core Web Vitals. LCP measures how quickly the largest visible content element (often an image) loads.

• A hero image that downloads in 1.2 seconds vs 1.8 seconds (after WebP conversion) can shift LCP from "Needs Improvement" to "Good"
• Images account for the majority of page weight on typical WordPress sites
• Google's PageSpeed Insights specifically recommends "Serve images in next-gen formats" (meaning WebP or AVIF)

Related Guides

• Why Google Uses WebP
• Batch Convert Multiple WebP Files
• WebP to JPG Without Quality Loss
• Bulk WebP Conversion for Designers

---

---

Frequently Asked Questions

Does WordPress support WebP images?

Yes, WordPress 5.8 (released July 2021) and later support WebP uploads natively. For automatic conversion of new uploads and bulk conversion of existing images, you need an image optimization plugin like Imagify or ShortPixel.

Should I use WebP images on my WordPress site?

Yes. WebP images are typically 25-35% smaller than equivalent JPGs, which speeds up page loads and improves Core Web Vitals LCP scores. This can have a positive SEO effect on image-heavy sites.

What happens when a browser does not support WebP?

Properly configured plugins or server rules check the browser's Accept header and serve JPG/PNG as a fallback. All modern browsers (Chrome, Firefox, Edge, Safari 14+) support WebP, so the fallback mainly applies to very old browser versions.

Which WordPress plugin is best for WebP conversion?

Imagify and ShortPixel are the most popular, with automatic conversion on upload, bulk processing, and smart format serving. WebP Express is a solid free alternative for servers with cwebp installed.

Can I upload WebP images directly to WordPress?

Yes, on WordPress 5.8 and later. Navigate to Media > Add New and upload the WebP file — it appears in the Media Library and can be inserted into posts like any other image.

More Free Chrome Tools by Peak Productivity

Pomodoro Technique Timer

25-minute focus timer with breaks

YouTube Looper Pro

Loop any section of a YouTube video

Citation Generator

Generate APA/MLA/Chicago citations

PDF Merge & Split

Merge and split PDFs locally

Auto Refresh Ultra

Auto-refresh pages at custom intervals

Screen Recorder Pro

Record your screen or tab with audio