Serve WebP in WordPress (with safe JPEG/PNG fallbacks)

Serve WebP in WordPress (with safe JPEG/PNG fallbacks)

Serving WebP images in WordPress improves site speed and reduces bandwidth by delivering smaller, optimized images. However, not all browsers support WebP, so it’s essential to provide safe JPEG/PNG fallbacks. This tutorial shows you how to configure your WordPress site to serve WebP images with fallback support using .htaccess rules.

Quick Fix: Serve WebP with JPEG/PNG Fallbacks via .htaccess

1. Generate WebP versions of your images (using a plugin or external tool).
2. Upload WebP images alongside original JPEG/PNG files in your WordPress uploads folder.
3. Add the provided .htaccess code snippet to your WordPress root directory.
4. Test your site in different browsers to confirm WebP images load where supported, and JPEG/PNG fallback loads otherwise.

Why This Happens

WebP is a modern image format offering superior compression compared to JPEG and PNG, resulting in faster page loads. However, older browsers or some niche browsers do not support WebP. Without fallback images, unsupported browsers will fail to display images, breaking your site’s appearance.

WordPress by default does not serve WebP images automatically or provide fallbacks. You must configure your server to detect browser support and serve the appropriate image format. Using .htaccess rewrite rules on Apache servers is a common and efficient method to achieve this without changing your theme or plugins.

Requirements

• Apache web server with mod_rewrite enabled.
• Access to your WordPress root directory to edit or add a .htaccess file.
• WebP versions of your images stored alongside original JPEG/PNG files.
• Basic familiarity with FTP or file manager to upload files and edit .htaccess.

Step-by-step: Serve WebP with JPEG/PNG Fallbacks in WordPress

1. Create WebP images: Use a plugin like Imagify, EWWW Image Optimizer, or an external tool to generate WebP versions of your JPEG/PNG images. Ensure WebP files are saved in the same folder as the originals.
2. Backup your current .htaccess file: Before making changes, download a copy of your existing .htaccess file from your WordPress root directory.
3. Edit your .htaccess file: Add the following code snippet near the top of your .htaccess file, before the WordPress rules block:

# Serve WebP images with JPEG/PNG fallback
<IfModule mod_rewrite.c>
  RewriteEngine On

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

  # Check if WebP version of the requested image exists
  RewriteCond %{REQUEST_FILENAME}.webp -f

  # Serve WebP image instead
  RewriteRule ^(wp-content/.+.(jpe?g|png))$ $1.webp [T=image/webp,E=accept:1]
</IfModule>

# Add correct content type for WebP images
<IfModule mod_headers.c>
  <FilesMatch ".webp$">
    Header set Content-Type "image/webp"
  </FilesMatch>
</IfModule>

# Ensure WebP images are served with proper caching
<IfModule mod_expires.c>
  ExpiresByType image/webp "access plus 1 month"
</IfModule>

4. Save and upload the updated .htaccess file.
5. Clear your site and browser cache.
6. Test your site: Open your website in a WebP-supporting browser (Chrome, Firefox, Edge) and verify images are served as WebP (use browser developer tools → Network tab → check image content-type). Then test in a non-WebP browser (Safari older versions, IE) to confirm JPEG/PNG images load instead.

Common Pitfalls

• WebP files missing: The rewrite rule only works if the WebP version exists. Make sure WebP images are generated and uploaded correctly.
• mod_rewrite not enabled: The rules require Apache’s mod_rewrite module. Confirm it is enabled on your server.
• Incorrect .htaccess placement: The .htaccess file must be in your WordPress root directory (where wp-config.php is located).
• Conflicts with other plugins: Some caching or image optimization plugins may conflict with manual .htaccess rules. Test carefully and disable conflicting plugins if needed.
• Browser caching: Old cached images may prevent you from seeing changes immediately. Clear cache or test in incognito mode.

Works on

FAQ

Q: How do I generate WebP images for my existing WordPress media library?

A: Use plugins like Imagify or EWWW Image Optimizer that automatically convert and save WebP versions of your images in the uploads folder.

Q: Will this method slow down my website?

A: No. The rewrite rules are efficient and only redirect requests if a WebP version exists and the browser supports it, improving load times by serving smaller images.

Q: What if my server uses