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

Troubleshooting Imagify WebP Display Issues with Cloudflare

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

Content

Many WordPress users rely on the 'Imagify Image Optimization – Optimize Images | Compress Images | Convert WebP | Convert AVIF' plugin to serve next-gen formats like WebP. However, a common and frustrating issue arises when these optimized images fail to display correctly, especially for sites using the Cloudflare content delivery network (CDN). This guide will explain why this happens and walk you through the most effective solutions.

Why Do WebP Images Fail to Show with Cloudflare?

The core of the problem is a fundamental conflict between how Imagify delivers WebP images and how Cloudflare caches them. Imagify offers two primary methods for displaying WebP images:

  1. Use <picture> tags (preferred): This method alters your site's HTML to wrap images in <picture> elements, allowing the browser to choose the WebP version if it supports it.
  2. Use rewrite rules: This method uses server-level rules (in an .htaccess file) to silently serve the WebP image instead of the original when a supporting browser is detected. The HTML code itself remains unchanged.

When Cloudflare is in the picture, the "Use rewrite rules" method becomes unreliable. Cloudflare caches the first version of an image it sees. If the first visitor uses a WebP-capable browser, Cloudflare caches and serves the WebP version to all subsequent visitors, including those using Safari, which does not support WebP. This leads to broken images for a segment of your audience.

Common Solutions and Workarounds

1. Use the <picture> Tags Method (Recommended for Cloudflare Users)

This is the primary solution recommended by the Imagify team for Cloudflare users. Since this method changes the HTML and not the image URL, it avoids the caching conflict with Cloudflare.

How to configure it:

  1. In your WordPress dashboard, go to Settings > Imagify.
  2. Navigate to the Display images in WebP format section.
  3. Select the option Use <picture> tags.
  4. Save your changes.

Important Limitations: The <picture> tag method has its own limitations. It will not work for:

  • Background images loaded via CSS.
  • Images that have not been successfully converted to WebP format.
  • Images whose HTML is loaded by JavaScript after the page has initially rendered.
  • Images hosted on external domains.

2. Leave the CDN URL Field Blank

If you are using Cloudflare's Free or Pro plan, you do not need to enter a URL in the "If you use a CDN" field within Imagify's settings. This field is intended for custom CDN setups with a unique CNAME. Cloudflare's standard setup does not require this.

3. Verify WebP Generation and Display

Sometimes the issue is not display-related but conversion-related. First, confirm that WebP versions of your images actually exist. You can do this by taking a known image URL and appending .webp to the end (e.g., your-image.jpg.webp). If the image loads, WebP conversion was successful.

To check if WebP images are being served on your site, use your browser's developer tools (Inspector). Even with the <picture> tag method active, the inspector might still show the original .jpg or .png filename in the HTML source code. You need to check the network tab to see which image format is actually being downloaded by the browser.

4. Check for Plugin or Theme Conflicts

In some cases, your theme or another plugin might be affecting how images are output, preventing Imagify from doing its job. A common troubleshooting step is to:

  1. Temporarily switch to a default WordPress theme (like Twenty Twenty-Four).
  2. Deactivate all other plugins except Imagify.

If the WebP images display correctly after this, reactivate your themes and plugins one by one to identify the source of the conflict.

Conclusion

The most reliable way to display WebP images while using Cloudflare is to use Imagify's "Use <picture> tags" option. While this method has some limitations, it effectively avoids the caching issues caused by Cloudflare's interaction with server rewrite rules. Always ensure your images are being converted correctly and be mindful of how your theme and other plugins might be affecting image display.

Related Support Threads Support