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.

thachpn165

<p><strong>TP Media Offload & Edge CDN</strong> is a powerful WordPress plugin that offloads your media files to Cloudflare R2 object storage and serves them through Cloudflare’s global CDN network with automatic image optimization.</p>
<h4>Key Features</h4>
<ul>
<li><strong>R2 Storage Integration</strong> – Seamlessly upload media to Cloudflare R2 with S3-compatible API</li>
<li><strong>Automatic Offload</strong> – New uploads are automatically offloaded to R2</li>
<li><strong>Bulk Offload</strong> – Offload existing media library with configurable batch size</li>
<li><strong>CDN Delivery</strong> – Serve media through Cloudflare’s global CDN network</li>
<li><strong>Image Optimization</strong> – Automatic WebP/AVIF conversion via Cloudflare Image Transformations</li>
<li><strong>Responsive Images</strong> – Smart srcset generation with preset breakpoints (320, 640, 768, 1024, 1280, 1536)</li>
<li><strong>Quality Control</strong> – Configurable image quality (1-100)</li>
<li><strong>Worker Auto-Deploy</strong> – One-click Cloudflare Worker deployment for image processing</li>
<li><strong>WooCommerce Support</strong> – Full integration with product images and galleries</li>
<li><strong>Background Processing</strong> – Queue-based processing with WP Cron (Action Scheduler supported)</li>
<li><strong>Media Library Integration</strong> – Status column, bulk actions, and row actions</li>
<li><strong>WP-CLI Support</strong> – Command line interface for bulk operations and automation</li>
</ul>
<h4>Requirements</h4>
<ul>
<li>WordPress 6.0 or higher</li>
<li>PHP 8.0 or higher</li>
<li>Cloudflare account with R2 storage enabled</li>
<li>R2 bucket with public access or custom domain</li>
<li>Cloudflare API Token (for Worker deployment)</li>
</ul>
<h4>How It Works</h4>
<ol>
<li>Configure your R2 credentials (Account ID, Access Key, Secret Key, Bucket)</li>
<li>Set up your CDN URL (R2 public domain or custom domain)</li>
<li>Enable auto-offload or use bulk offload for existing media</li>
<li>Plugin automatically rewrites URLs to serve from CDN</li>
<li>Cloudflare Worker handles image transformations on-the-fly</li>
</ol>
<h4>Security</h4>
<ul>
<li>API credentials encrypted with AES-256-CBC + HMAC</li>
<li>Rate limiting on settings saves</li>
<li>Nonce verification on all AJAX requests</li>
<li>Capability checks for all admin operations</li>
<li>Secure uninstall (wipes all sensitive data)</li>
</ul>
<h4>Performance</h4>
<ul>
<li>Batch processing to prevent memory exhaustion</li>
<li>Transient caching for dashboard stats</li>
<li>Conditional asset loading</li>
<li>Background queue processing</li>
</ul>
<h4>Build and Generated Assets</h4>
<p>This plugin includes compiled frontend assets in:</p>
<ul>
<li><code>assets/js/admin.js</code> and <code>assets/js/public.js</code></li>
<li><code>assets/css/admin.css</code> and <code>assets/css/public.css</code></li>
</ul>
<p>Source files are included in the same plugin package:</p>
<ul>
<li>JavaScript source: <code>assets/src/js/admin.js</code>, <code>assets/src/js/public.js</code></li>
<li>SCSS source: <code>assets/src/scss/admin.scss</code>, <code>assets/src/scss/public.scss</code></li>
</ul>
<p>Build steps used to generate compiled files:</p>
<ol>
<li><code>npm install</code></li>
<li><code>npm run build</code></li>
</ol>
<p>Development watch mode:</p>
<ul>
<li><code>npm run dev</code></li>
</ul>
<h3>External services</h3>
<p>This plugin connects to Cloudflare services to offload media and deliver files via CDN.</p>
<h4>Cloudflare R2 Object Storage</h4>
<ul>
<li><strong>What it is used for:</strong> Store and serve media objects.</li>
<li><strong>Data sent:</strong> Account ID, Access Key ID, Secret Access Key, bucket name, file paths, and media file contents.</li>
<li><strong>When data is sent:</strong> During connection testing, single/bulk offload, restore, and local-file cleanup actions.</li>
<li><strong>Service provider:</strong> Cloudflare, Inc.</li>
<li><strong>Terms of Service:</strong> https://www.cloudflare.com/website-terms/</li>
<li><strong>Privacy Policy:</strong> https://www.cloudflare.com/privacypolicy/</li>
</ul>
<h4>Cloudflare API (Workers and DNS)</h4>
<ul>
<li><strong>What it is used for:</strong> Deploy/remove Workers, validate DNS records, and enable DNS proxy for CDN routing.</li>
<li><strong>Data sent:</strong> API token, account ID, zone ID, DNS record ID, worker configuration, and configured CDN domain.</li>
<li><strong>When data is sent:</strong> When you click Deploy Worker, Remove Worker, Validate DNS, or Enable Proxy.</li>
<li><strong>Service provider:</strong> Cloudflare, Inc.</li>
<li><strong>Terms of Service:</strong> https://www.cloudflare.com/website-terms/</li>
<li><strong>Privacy Policy:</strong> https://www.cloudflare.com/privacypolicy/</li>
</ul>
<h3>Privacy Policy</h3>
<p>This plugin:<br />
* Stores your Cloudflare API credentials encrypted in your WordPress database<br />
* Uploads your media files to your Cloudflare R2 bucket<br />
* Sends required API data directly to Cloudflare services to provide plugin functionality<br />
* Does not include any tracking or analytics</p>
<p>Your data stays between your WordPress site and your Cloudflare account.</p>
<h3>Support</h3>
<p>For support, feature requests, or bug reports:<br />
* Visit <a href="https://wordpress.org/support/plugin/tp-media-offload-edge-cdn/" rel="ugc">WordPress support forum</a><br />
* Create an issue on GitHub (coming soon)</p>
<h3>Credits</h3>
<ul>
<li>Built with AWS SDK for PHP for R2 compatibility</li>
<li>Uses WP Cron for background processing (Action Scheduler compatible)</li>
<li>Cloudflare Workers for image transformations</li>
</ul>
<h3>Disclaimer</h3>
<p>This plugin is an independent, third-party project and is <strong>not affiliated with, endorsed by, or officially associated with Cloudflare, Inc.</strong> in any way. “Cloudflare” and “R2” are trademarks of Cloudflare, Inc. The use of these names is solely for descriptive purposes to indicate compatibility with Cloudflare services.</p>
<p>This plugin is developed and maintained independently by the plugin author and the open-source community.</p>


TP Media Offload & Edge CDN

Offload WordPress media to Cloudflare R2 storage and serve via CDN with automatic image optimization.

Edge Images vs TP Media Offload & Edge CDN