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.

imgpro

<p><strong>Image CDN that makes your WordPress site faster.</strong></p>
<p>Heavy images slow down your site. When images lag, visitors leave, Core Web Vitals fail, and Google ranks you lower.</p>
<p>This image CDN plugin fixes that by serving your images from 300+ global edge servers. A visitor in Tokyo loads images from Asia. A visitor in London loads from Europe. Everyone gets faster pages.</p>
<p><strong>60-second setup.</strong> No DNS changes. No external accounts. No settings to configure. Just activate and start delivering.</p>
<h4>Why Use an Image CDN?</h4>
<ul>
<li><strong>Faster page load times</strong> — Images load from the nearest server instead of traveling across the world from your host</li>
<li><strong>Better Core Web Vitals</strong> — Improve LCP (Largest Contentful Paint) by delivering images faster</li>
<li><strong>Higher PageSpeed scores</strong> — Google PageSpeed Insights will show improved performance</li>
<li><strong>Lower bounce rates</strong> — Visitors don’t wait for slow sites</li>
<li><strong>Better SEO</strong> — Speed is a ranking factor</li>
</ul>
<h4>All Image Formats Supported</h4>
<ul>
<li><strong>Standard</strong> — JPG, JPEG, PNG, GIF</li>
<li><strong>Modern</strong> — WebP, AVIF</li>
<li><strong>Vector</strong> — SVG</li>
<li><strong>Other</strong> — BMP, TIFF, ICO, HEIC, HEIF</li>
</ul>
<h4>How This Image CDN Works</h4>
<ol>
<li>Install the image CDN plugin from WordPress</li>
<li>Flip the switch to activate</li>
<li>Images instantly load from 300+ global CDN servers</li>
</ol>
<p>That’s it. Your original files stay exactly where they are on your server. The plugin only changes URLs on your public pages. Deactivate it and everything returns to normal instantly.</p>
<h4>Pricing</h4>
<p><strong>Unlimited</strong> ($9.99/mo)<br />
* Unlimited bandwidth<br />
* Custom CDN domain (cdn.yoursite.com)<br />
* Priority support<br />
* All image formats</p>
<p>All plans include a 7-day money-back guarantee.</p>
<h4>Self-Hosted Option</h4>
<p>For developers who want full control, you can deploy the open-source worker on your own Cloudflare account. Your images, your infrastructure, zero external dependencies.</p>
<p><a href="https://github.com/img-pro/unlimited-cdn" rel="nofollow ugc">Self-hosted CDN setup guide on GitHub</a></p>
<h4>Works With Any WordPress Theme or Plugin</h4>
<p>This image CDN is compatible with:</p>
<ul>
<li><strong>Page builders</strong> — Elementor, Divi, Beaver Builder, Gutenberg, Bricks, Oxygen</li>
<li><strong>WooCommerce</strong> — Product images, galleries, thumbnails</li>
<li><strong>Lazy loading</strong> — Works with native lazy load and plugins</li>
<li><strong>Responsive images</strong> — Full srcset support</li>
<li><strong>Caching plugins</strong> — WP Rocket, LiteSpeed Cache, W3 Total Cache, WP Super Cache</li>
<li><strong>Image optimization</strong> — ShortPixel, Imagify, Smush, EWWW</li>
</ul>
<h4>Who This Image CDN Is For</h4>
<ul>
<li>Bloggers with image-heavy posts</li>
<li>WooCommerce stores with product photos</li>
<li>Recipe, travel, and photography sites</li>
<li>Portfolio and agency sites</li>
<li>Anyone who wants faster WordPress image loading without complexity</li>
</ul>
<h4>Need Video/Audio CDN?</h4>
<p>This plugin focuses on images for simplicity and cost-effectiveness. If you need video, audio, or HLS streaming support, check out our <a href="https://wordpress.org/plugins/unlimited-cdn/" rel="ugc">Unlimited CDN plugin</a> which supports all media types.</p>
<h3>Privacy</h3>
<h4>What Data Is Collected?</h4>
<p>The image CDN plugin does not add cookies, tracking pixels, or analytics to your site.</p>
<h4>Managed Mode</h4>
<ul>
<li>Your site URL is used to configure CDN routing</li>
<li>Email is collected when you upgrade to a paid plan</li>
<li>Custom domain settings are sent if configured</li>
</ul>
<p>Images are cached and served through a global edge network powered by Cloudflare.</p>
<h4>Self-Hosted Mode</h4>
<p>No data is sent to us. Images are cached in your own Cloudflare account.</p>
<h3>External Services</h3>
<p>This image CDN plugin connects to external services:</p>
<p><strong>Cloudflare (R2 Storage and Workers)</strong></p>
<ul>
<li>Purpose: Image caching and global edge CDN delivery</li>
<li><a href="https://www.cloudflare.com/terms/" rel="nofollow ugc">Terms of Service</a></li>
<li><a href="https://www.cloudflare.com/privacypolicy/" rel="nofollow ugc">Privacy Policy</a></li>
</ul>
<p><strong>Bandwidth Saver API</strong> (Managed mode only)</p>
<ul>
<li>Purpose: Account management, usage tracking</li>
<li>Data sent: Site URL, email (if provided), custom domain (if configured)</li>
</ul>
<p>Self-hosted users connect only to their own Cloudflare account.</p>
<h3>Fair Use</h3>
<p>This service is provided on a fair use basis. While we don’t impose hard limits, we reserve the right to contact users with exceptionally high usage to discuss dedicated plans or custom arrangements.</p>
<p>The 500 MB per-file size limit applies to all images. For larger files or specialized requirements, please contact us to discuss options.</p>
<p>We aim to provide reliable service for legitimate WordPress image delivery. Abuse, excessive automated requests, or use that degrades service for others may result in account review.</p>
<h3>Support</h3>
<ul>
<li><a href="https://wordpress.org/support/plugin/bandwidth-saver/" rel="ugc">Support Forum</a></li>
<li><a href="https://github.com/img-pro/unlimited-cdn" rel="nofollow ugc">Self-Host Guide</a></li>
</ul>


Bandwidth Saver: Image CDN

Image CDN for WordPress. Serve images from 300+ global edge servers. Faster Core Web Vitals, better SEO. $9.99/mo.

Edge Images vs Bandwidth Saver: Image CDN