BugWP logo BugWP
Back to Community
Home / Community / Plugin → Imagify image optimization – optimize images | compress images | convert webp | convert avif

Troubleshooting Guide: Why Your WebP Images Aren't Displaying with Imagify

30 threads Sep 7, 2025 Plugin → Imagify image optimization – optimize images | compress images | convert webp | convert avif

Content

Many WordPress users encounter a common issue after installing the 'Imagify Image Optimization – Optimize Images | Compress Images | Convert WebP | Convert AVIF' plugin: their WebP images aren't being served to visitors' browsers. This can be frustrating, especially after going through the optimization process. Based on community support threads, we've compiled the most frequent reasons for this problem and their solutions.

Why WebP Images Might Not Be Displaying

The issue typically falls into one of two categories: the WebP files were never created, or they were created but aren't being delivered correctly. Here are the most common culprits.

1. The WebP Version Was Never Created

Sometimes, the optimization process might skip certain images. You can verify this by appending .webp directly to an image's URL in your browser. If you get a 404 error, the WebP version doesn't exist.

Solution: Find the problematic images in your Media Library (using the list view is easiest) and use the 'Re-optimize' feature to generate the WebP version.

2. Using the Wrong Display Method for Your Setup

The plugin offers two primary methods to serve WebP images: 'Use <picture> tags' and 'Use rewrite rules'. Choosing the wrong one for your hosting environment is a leading cause of failure.

  • Rewrite Rules: This method adds server-level rules to silently serve WebP images. It does not work if you use a CDN (like Cloudflare), certain cache services (like Varnish), or some managed hosting configurations. It also requires manual configuration for NGINX servers.
  • Picture Tags: This method alters your page's HTML code to use <picture> elements. It can conflict with lazy loading scripts and will not work for background images defined in CSS.

Solution: If you use a CDN or Cloudflare, you must use the 'Use <picture> tags' option. If you are not using a CDN and the picture tags cause issues, try switching to 'Use rewrite rules'. For NGINX users, ensure your host has manually added the required rewrite rules to your nginx.conf file.

3. Conflicts with Other Plugins and Themes

Certain types of images and site elements are not compatible with WebP delivery methods.

  • Lazy Load Scripts: A very common conflict occurs when a lazy loading plugin or theme feature loads images after the Imagify plugin has already scanned the page's HTML. This can prevent the <picture> tags from being applied.
  • Background Images: Images set as CSS background images cannot be converted to WebP using the <picture> tag method.
  • External Images: The plugin can only optimize and serve WebP versions of images hosted on your own server.
  • Specialized Pages: AMP pages and other non-standard templates often have limitations with the <picture> tag method.

Solution: For lazy load conflicts, try temporarily disabling the other lazy load feature to test. For background images, the only potential solution is the rewrite rules method. For AMP, the 'Imagify Image Optimization – Optimize Images | Compress Images | Convert WebP | Convert AVIF' team often suggests using the rewrite rules method if possible.

4. Caching Issues

Server-level caching, plugin caching, browser caching, and CDN caching can all serve old, non-WebP versions of your images long after you've made changes.

Solution: After changing your WebP display method or re-optimizing images, clear all layers of cache—your WordPress caching plugin, your CDN cache, and your server cache (if applicable). Then, do a hard refresh in your browser (Ctrl+F5 or Cmd+Shift+R).

How to Check if WebP is Actually Working

It's important to verify correctly. If you are using the 'rewrite rules' method, your page's HTML source code will not change; the conversion happens silently on the server. The proper way to check is to use your browser's Developer Tools:

  1. Open the page you want to check.
  2. Right-click and select Inspect to open DevTools.
  3. Go to the Network tab.
  4. Reload the page.
  5. In the network log, look at the list of loaded files and filter by Img.
  6. Click on an image file. In the headers panel that appears, look for the Content-Type header. If it says image/webp, the WebP is being served correctly, even if the filename in the HTML shows .jpg.

By systematically checking these common issues, most users can resolve their WebP display problems and start benefiting from faster-loading images.

Related Support Threads Support