Jono Alderson

<p>Edge Images automatically uses your edge transformation service (e.g., Cloudflare, Accelerated Domains, Imgix, etc.) to apply performance optimizations to <code><img></code> markup.</p>
<p>⚠️ <strong>Important</strong>: This plugin requires a supported edge provider with image transformation features enabled (e.g., Cloudflare Pro, BunnyCDN, etc). See the Requirements section for details.</p>
<h4>🚀 Why should I use Edge Images?</h4>
<ul>
<li><strong>Instant Performance Boost</strong>: Automatically optimize and serve images in modern formats (WebP/AVIF) through your existing CDN</li>
<li><strong>Zero Configuration</strong>: Works out of the box with your existing images and themes</li>
<li><strong>No Local Processing</strong>: All transformations happen at the edge – no server load or storage overhead</li>
<li><strong>Perfectly Sized Images</strong>: Automatically generates the exact image dimensions needed for every device and viewport</li>
<li><strong>Cost Effective</strong>: No need for expensive image optimization services or additional storage</li>
</ul>
<h4>🎯 Perfect For</h4>
<ul>
<li>Sites with lots of images that need optimization</li>
<li>Performance-focused developers and site owners</li>
<li>Anyone using Cloudflare, BunnyCDN, or similar services</li>
<li>Sites that want modern image formats without the complexity</li>
<li>Developers tired of managing multiple image sizes</li>
</ul>
<h4>💡 How It Works</h4>
<p>WordPress typically creates multiple copies of each uploaded image in different sizes. This approach is inefficient and often results in:</p>
<ul>
<li>Images that are too large or small for their display size</li>
<li>Unnecessary storage usage</li>
<li>Missing sizes for modern responsive designs</li>
<li>Lack of modern format support (WebP/AVIF)</li>
</ul>
<p>Edge Images solves these problems by:</p>
<ol>
<li>Intercepting image requests</li>
<li>Determining the optimal size and format needed</li>
<li>Using your CDN to transform the image on-demand</li>
<li>Caching the result for future requests</li>
</ol>
<h4>⚡️ Features</h4>
<p><strong>Core Features</strong></p>
<ul>
<li>Automatic WebP/AVIF conversion</li>
<li>Intelligent responsive image handling</li>
<li>Smart <code>srcset</code> generation</li>
<li>Automatic image optimization</li>
<li>Optional <code><picture></code> element wrapping</li>
<li>Zero local processing</li>
<li>Maintains original images</li>
</ul>
<p><strong>Advanced Features</strong></p>
<ul>
<li>Fine-grained transformation control</li>
<li>Multiple CDN provider support</li>
<li>Developer-friendly filters</li>
<li>Yoast SEO & Rank Math integrations</li>
<li>Bricks integration</li>
<li>Gutenberg compatibility</li>
</ul>
<h4>🔌 Supported Providers</h4>
<ul>
<li><strong>Cloudflare</strong> (Pro plan or higher)</li>
<li><strong>Accelerated Domains</strong></li>
<li><strong>BunnyCDN</strong></li>
<li><strong>Imgix</strong></li>
</ul>
<h4>🛠️ Technical Example</h4>
<p><strong>Your Code</strong></p>
<pre><code>echo wp_get_attachment_image(1, [640,400], false, ['fit' => 'contain']);
</code></pre>
<p><strong>What WordPress Usually Outputs</strong></p>
<pre><code><img width="380" height="400" 
     src="/uploads/2024/11/1.jpg" 
     class="attachment-640x400 size-640x400 wp-image-123" 
     srcset="/uploads/2024/11/1.jpg 400w, /uploads/2024/11/1-285x300.jpg 285w" 
     sizes="(max-width: 640px) 100vw, 640px">
</code></pre>
<p>That’s multiple different images files, none of which are the right size!</p>
<p><strong>What Edge Images Outputs</strong></p>
<pre><code><picture class="edge-images-container" style="--max-width: 640px;">
  <img 
       class="attachment-1140x600 size-640x400 wp-image-123 edge-images-processed"
       width="640" height="400" 
       src="/cdn-cgi/image/f=auto,fit=contain,w=640,h=400/uploads/2024/11/1.jpg" 
       srcset="/cdn-cgi/image/f=auto,w=320,h=188/uploads/2024/11/1.jpg 320w,
               /cdn-cgi/image/f=auto,w=640,h=400/uploads/2024/11/1.jpg 640w,
               /cdn-cgi/image/f=auto,w=1280,h=800/uploads/2024/11/1.jpg 1280w"
       sizes="(max-width: 640px) 100vw, 640px">
</picture>
</code></pre>
<p>That’s a range of perfectly sized options for different devices and viewports, automatically optimized images in modern formats, served from your CDN, futureproofed for supporting next-generation capabilities, and with no storage overheads.</p>
<h4>🎨 Customization</h4>
<p><strong>Transform Parameters</strong><br />
Control every aspect of image transformation with attributes like:<br />
* <code>width</code>/<code>height</code>: Exact dimensions<br />
* <code>fit</code>: Resizing behavior (contain, cover, crop)<br />
* <code>quality</code>: Compression level<br />
* <code>format</code>: Output format (auto, webp, avif)</p>
<p><strong>Filtering</strong><br />
Disable transformations globally or selectively:</p>
<pre><code>// Disable all transformations
add_filter('edge_images_disable', '__return_true');

// Disable for specific images
add_filter('edge_images_disable_transform', function($should_disable, $html) {
    if (strpos($html, 'example.jpg') !== false) {
        return true;
    }
    return $should_disable;
}, 10, 2);

// Override max width for constrained content
add_filter('edge_images_max_width', function($max_width) {
    // Example: Use a different max width for single posts
    if (is_single()) {
        return 800;
    }
    return $max_width;
});

// Customize srcset width multipliers
add_filter('edge_images_width_multipliers', function($multipliers) {
    // Add more granular steps between sizes
    return [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2];
});
</code></pre>
<h4>🔧 Requirements</h4>
<p><strong>Essential</strong></p>
<ul>
<li>A supported edge provider with image transformation features enabled:
<ul>
<li>Cloudflare Pro plan or higher with Image Resizing enabled</li>
<li>Accelerated Domains with Image Resizing enabled</li>
<li>BunnyCDN with Image Processing enabled</li>
<li>Imgix with a configured source</li>
</ul>
</li>
</ul>
<p><strong>Technical</strong></p>
<ul>
<li>PHP 7.4 or higher</li>
<li>WordPress 5.9 or higher</li>
</ul>
<h4>✅ Getting Started</h4>
<ol>
<li>Install and activate the plugin</li>
<li>Go to Settings > Edge Images</li>
<li>Select your CDN provider</li>
<li>That’s it! Your images will now be automatically optimized</li>
</ol>
<h4>🤝 Integrations</h4>
<p><strong>Yoast SEO</strong><br />
Automatically optimizes images in:</p>
<ul>
<li>Meta tags (og:image, etc.)</li>
<li>Schema.org output</li>
<li>XML sitemaps</li>
</ul>
<h4>🔒 Privacy</h4>
<p>Edge Images processes images through third-party edge providers. Here’s what you need to know about privacy:</p>
<p><strong>Data Processing</strong></p>
<ul>
<li>Images are processed through your chosen edge provider (Cloudflare, Accelerated Domains, etc.)</li>
<li>No personal data is collected or stored by the plugin itself</li>
<li>Image URLs are passed to the edge provider for transformation</li>
<li>Original images remain on your server; only public URLs are processed</li>
</ul>
<p><strong>Edge Provider Privacy</strong><br />
Different providers have different privacy implications:</p>
<ul>
<li>Cloudflare: Images are processed according to <a href="https://www.cloudflare.com/privacypolicy/" rel="nofollow ugc">Cloudflare’s Privacy Policy</a></li>
<li>Accelerated Domains: Images are processed according to <a href="https://accelerateddomains.com/privacy/" rel="nofollow ugc">Accelerated Domains’ Privacy Policy</a></li>
<li>BunnyCDN: Images are processed according to <a href="https://bunny.net/privacy/" rel="nofollow ugc">BunnyCDN’s Privacy Policy</a></li>
</ul>
<p><strong>Data Storage</strong></p>
<ul>
<li>The plugin stores your selected settings in your WordPress database</li>
<li>No user data is collected or stored</li>
<li>No analytics or tracking is performed</li>
<li>Cache files may be created in your uploads directory for optimization</li>
</ul>
<p><strong>GDPR Compliance</strong></p>
<ul>
<li>The plugin is GDPR-compliant as it does not collect, store, or process personal data</li>
<li>Users should review their chosen edge provider’s privacy policy and data processing terms</li>
<li>Site owners should update their privacy policy to reflect their use of third-party image processing services</li>
</ul>
<h3>Development</h3>
<ul>
<li><a href="https://github.com/jonoalderson/edge-images" rel="nofollow ugc">GitHub Repository</a></li>
<li><a href="https://github.com/jonoalderson/edge-images/issues" rel="nofollow ugc">Report Issues</a></li>
</ul>


Edge Images


Kinda amazing how simply this just works with Cloudflare.  Definitely use this if you have a pro plan.  


Just worked


Although this is a new plugin, it's been developed and tested over several years and it shows. Dead simple user interface and does exactly what it needs to do with no fuss.


Smashing


I've tried this out with Accelerated Domains and it works like a charm.  Under the hood the code is really easy to understand and well written.  Recommended. 


Works great with Accelerated Domains

Turbocharge your WordPress images by using an edge provider (like Cloudflare or Accelerated Domains) and optimizing your HTML markup.

lookitdesign

<p>Most Cloudflare integrations for WordPress give you only one option: purge everything. That is the nuclear option, and it is more expensive than it looks.</p>
<h4>What happens when you purge everything</h4>
<p>When you purge the entire cache in Cloudflare, every cached page is cleared at once — but Cloudflare does not rebuild those caches for you. A page is only re-cached <em>after</em> the next time someone requests it. That first request following a purge is a cache miss: it travels all the way back to your origin server, which is slow to render, and that visitor waits for the full render. Only the <em>next</em> visitor to the same page gets the fast, cached copy.</p>
<p>The catch is traffic. Busy pages re-cache almost immediately. But pages that are visited infrequently can sit uncached for hours or even days, and the first person to land on each one pays the slow-render penalty. There is no way inside Cloudflare to warm the cache ahead of time or speed this up — re-caching happens only on demand, page by page, as real traffic trickles in.</p>
<p><strong>Lookit® Cloudflare Cache Purge gives you granular control.</strong> Instead of wiping everything and forcing your whole site back to origin speed, you clear only the page you actually changed — and every other page keeps its cache intact.</p>
<p>From any page in WordPress — whether you are editing a post in wp-admin or viewing the live site while logged in — a lightweight <strong>CF Purge</strong> menu (☁) appears in the admin bar with three options:</p>
<ul>
<li><strong>Purge This URL</strong> — clears only the page you are currently on or editing</li>
<li><strong>Purge Entire Site</strong> — full cache purge when you genuinely need it (with a confirmation dialog so it is never accidental)</li>
<li><strong>Or enter any URL</strong> — type any URL on the site and purge it directly, without navigating to that page first</li>
</ul>
<p>The manual URL field is especially useful for URLs that do not correspond to a standard WordPress post or page — such as custom archive paths, Events Calendar URLs, or other custom post type archives.</p>
<h4>Why this plugin exists</h4>
<p>If you manage WordPress sites on Cloudflare with a caching plugin like WP Rocket, you have likely run into this problem: WP Rocket’s Cloudflare integration only supports full-site purge. The official Cloudflare WordPress plugin is heavyweight and touches your zone settings. Neither gives you a simple, context-aware button to clear just one URL.</p>
<p>This plugin does exactly that — nothing more, nothing less. It connects to Cloudflare via a scoped API token, adds a clean menu to the admin bar, and stays completely out of your Cloudflare zone configuration.</p>
<h4>Features</h4>
<ul>
<li>Context-aware: automatically detects the URL of the post or page you are editing or viewing</li>
<li>Works in both the wp-admin editor and the frontend (when logged in)</li>
<li>Manual URL field for purging arbitrary URLs without navigating to them</li>
<li>Full-site purge option with confirmation dialog</li>
<li>Lightweight — no zone settings, no DNS, no SSL toggles, no bloat</li>
<li>Secure — uses a scoped API token with minimum required permissions</li>
<li>Compatible with WP Rocket, the official Cloudflare plugin, and any other caching setup</li>
</ul>
<h4>Requirements</h4>
<ul>
<li>A Cloudflare account with your site’s domain active</li>
<li>A Cloudflare API Token with <strong>Zone / Cache Purge / Purge</strong> and <strong>Zone / Zone / Read</strong> permissions</li>
<li>Your Cloudflare Zone ID (found on the domain’s Overview page in the Cloudflare dashboard)</li>
</ul>
<h4>Setup</h4>
<ol>
<li>Install and activate the plugin</li>
<li>Go to <strong>Settings <span aria-hidden="true" class="wp-exclude-emoji">→</span> CF Purge Settings</strong></li>
<li>Paste your Cloudflare API Token and Zone ID</li>
<li>Click <strong>Test Cloudflare Connection</strong> to verify</li>
<li>The <strong>☁ CF Purge</strong> menu will now appear in your admin bar</li>
</ol>
<h4>Creating a Scoped API Token</h4>
<p>In your Cloudflare dashboard: <strong>My Profile <span aria-hidden="true" class="wp-exclude-emoji">→</span> API Tokens <span aria-hidden="true" class="wp-exclude-emoji">→</span> Create Token <span aria-hidden="true" class="wp-exclude-emoji">→</span> Create Custom Token</strong></p>
<p>Set these permissions:</p>
<ul>
<li>Zone / Cache Purge / Purge</li>
<li>Zone / Zone / Read</li>
</ul>
<p>Set Zone Resources to the specific zone for this site. This keeps the token scoped and secure.</p>
<p><strong>Do not use your Global API Key.</strong> A scoped token is always the correct approach.</p>
<h4>Documentation and support</h4>
<ul>
<li>Full documentation: https://lookitdesign.com/software/cloudflare-cache-purge/</li>
<li>Support: https://lookitdesign.com/cloudflare-purge-support-form/</li>
</ul>
<p><em>Lookit® is a registered trademark of ZENOVA CORP. Cloudflare is a registered trademark of Cloudflare, Inc.; this plugin is an independent integration and is not affiliated with, sponsored by, or endorsed by Cloudflare.</em></p>
<h3>External Services</h3>
<p>This plugin connects to the Cloudflare API to purge cached files from the Cloudflare CDN. This is required for the core functionality of the plugin — without it, no cache purging can occur.</p>
<p><strong>What data is sent and when:</strong></p>
<p>When you trigger a cache purge (manually or via the Test Connection button), this plugin sends the following data to Cloudflare’s API:</p>
<ul>
<li>Your Cloudflare Zone ID (to identify which zone to purge)</li>
<li>Your Cloudflare API Token (for authentication)</li>
<li>The specific URL(s) to purge, or a full-site purge flag</li>
</ul>
<p>No visitor data, personal information, or site content is ever transmitted. API credentials are stored in your WordPress database and are only sent directly to Cloudflare’s API endpoint (<code>https://api.cloudflare.com/client/v4</code>).</p>
<p>This service is provided by Cloudflare, Inc.:</p>
<ul>
<li>Terms of Service: https://www.cloudflare.com/terms/</li>
<li>Privacy Policy: https://www.cloudflare.com/privacypolicy/</li>
</ul>


Lookit Cloudflare Cache Purge

Granular Cloudflare cache control from the admin bar — purge a single page, any URL, or the entire site, right from wp-admin.

Edge Images vs Lookit Cloudflare Cache Purge