Jono Alderson

Edge Images automatically uses your edge transformation service (e.g., Cloudflare, Accelerated Domains, Imgix, etc.) to apply performance optimizations to <code><img></code> markup.
⚠️ Important: This plugin requires a supported edge provider with image transformation features enabled (e.g., Cloudflare Pro, BunnyCDN, etc). See the Requirements section for details.
<h4>🚀 Why should I use Edge Images?</h4>
<ul>
<li>Instant Performance Boost: Automatically optimize and serve images in modern formats (WebP/AVIF) through your existing CDN</li>
<li>Zero Configuration: Works out of the box with your existing images and themes</li>
<li>No Local Processing: All transformations happen at the edge – no server load or storage overhead</li>
<li>Perfectly Sized Images: Automatically generates the exact image dimensions needed for every device and viewport</li>
<li>Cost Effective: 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>
WordPress typically creates multiple copies of each uploaded image in different sizes. This approach is inefficient and often results in:
<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>
Edge Images solves these problems by:
<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>
Core Features
<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>
Advanced Features
<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>Cloudflare (Pro plan or higher)</li>
<li>Accelerated Domains</li>
<li>BunnyCDN</li>
<li>Imgix</li>
</ul>
<h4>🛠️ Technical Example</h4>
Your Code
<pre><code>echo wp_get_attachment_image(1, [640,400], false, ['fit' => 'contain']);
</code></pre>
What WordPress Usually Outputs
<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>
That’s multiple different images files, none of which are the right size!
What Edge Images Outputs
<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>
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.
<h4>🎨 Customization</h4>
Transform Parameters 
Control every aspect of image transformation with attributes like: 
* <code>width</code>/<code>height</code>: Exact dimensions 
* <code>fit</code>: Resizing behavior (contain, cover, crop) 
* <code>quality</code>: Compression level 
* <code>format</code>: Output format (auto, webp, avif)
Filtering 
Disable transformations globally or selectively:
<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>
Essential
<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>
Technical
<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>
Yoast SEO 
Automatically optimizes images in:
<ul>
<li>Meta tags (og:image, etc.)</li>
<li>Schema.org output</li>
<li>XML sitemaps</li>
</ul>
<h4>🔒 Privacy</h4>
Edge Images processes images through third-party edge providers. Here’s what you need to know about privacy:
Data Processing
<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>
Edge Provider Privacy 
Different providers have different privacy implications:
<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>
Data Storage
<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>
GDPR Compliance
<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.

Masoud Golchin

WP Fitter

Morteza Mohammadnezhad

Reza Bahreynipour

Advanced Media Offloader helps you optimize your WordPress media handling by automatically uploading your media files to S3-compatible cloud storage services.
Struggling with server space limitations? Want to improve your site’s performance by serving media through a CDN? This plugin handles the technical work of migrating your media to the cloud, rewriting URLs, and maintaining compatibility with your existing content.
<h4>Key Benefits</h4>
<ul>
<li>Reduce server storage requirements and costs</li>
<li>Decrease server load when serving media files</li>
<li>Improve global site loading speeds when combined with CDN services</li>
<li>Maintain full compatibility with WordPress media functions</li>
<li>No need to modify existing content – URLs are automatically rewritten</li>
</ul>
<h4>Supported Cloud Providers</h4>
<ul>
<li>Amazon S3 – The industry standard object storage service</li>
<li>Cloudflare R2 – S3-compatible storage with zero egress fees</li>
<li>DigitalOcean Spaces – Simple object storage from DigitalOcean</li>
<li>Backblaze B2 – Affordable S3-compatible storage with predictable pricing</li>
<li>Wasabi – Hot cloud storage with predictable pricing</li>
<li>MinIO – Any S3-compatible storage (MinIO, OVHcloud Object Storage, Scaleway, Linode, Vultr, IBM COS, and more)</li>
</ul>
<h3>Features</h3>
<ul>
<li>Automatic Offloading – New media uploads are automatically sent to your cloud storage</li>
<li>Smart Policies – Create advanced rules to control exactly which files are offloaded and when, giving you granular control over your storage. (<a href="https://wpfitter.com/blog/implementing-smart-retention-policies-with-advanced-media-offloader/" rel="nofollow ugc">Learn more</a>)</li>
<li>Bulk Migration & WP CLI – Easily move existing media to the cloud with powerful command-line support for bulk operations and automation (<a href="https://wpfitter.com/blog/advmo-bulk-offload-with-wp-cli" rel="nofollow ugc">Learn more</a>)</li>
<li>Thumbnail Regeneration Compatibility – Compatible with WP-CLI <code>wp media regenerate</code> command and the Regenerate Thumbnails plugin. Regenerated thumbnails automatically offload to cloud storage. Note: Not compatible with Full Cloud Migration retention policy.</li>
<li>Smart URL Rewriting – All media URLs are automatically rewritten to serve from cloud storage</li>
<li>File Versioning – Add unique timestamps to media paths to prevent caching issues</li>
<li>Flexible Retention – Choose to keep local copies or remove them after successful offloading</li>
<li>Mirror Deletion – Optionally remove files from cloud storage when deleted from WordPress</li>
<li>Custom Paths – Configure custom path prefixes in your cloud storage</li>
<li>Developer-Friendly – Action hooks for extending functionality</li>
</ul>
<h3>Configuration</h3>
For security, cloud provider credentials are stored in your <code>wp-config.php</code> file rather than the database.
Note: Domain and endpoint URLs will automatically be prefixed with <code>https://</code> if you don’t include it, but we recommend always including the full URL for clarity.
<a href="https://developers.cloudflare.com/r2/" rel="nofollow ugc">Cloudflare R2</a> Configuration
<pre><code> define('ADVMO_CLOUDFLARE_R2_KEY', 'your-access-key');
 define('ADVMO_CLOUDFLARE_R2_SECRET', 'your-secret-key');
 define('ADVMO_CLOUDFLARE_R2_BUCKET', 'your-bucket-name');
 define('ADVMO_CLOUDFLARE_R2_DOMAIN', 'your-domain-url');
 define('ADVMO_CLOUDFLARE_R2_ENDPOINT', 'your-endpoint-url');
</code></pre>
<a href="https://www.digitalocean.com/products/spaces" rel="nofollow ugc">DigitalOcean Spaces</a> Configuration
<pre><code> define('ADVMO_DOS_KEY', 'your-access-key');
 define('ADVMO_DOS_SECRET', 'your-secret-key');
 define('ADVMO_DOS_BUCKET', 'your-bucket-name');
 define('ADVMO_DOS_DOMAIN', 'your-domain-url');
 define('ADVMO_DOS_ENDPOINT', 'your-endpoint-url');
</code></pre>
<a href="https://min.io/docs/minio/linux/administration/identity-access-management/minio-user-management.html" rel="nofollow ugc">MinIO</a> Configuration
Use this for any storage that supports the S3 API via a custom endpoint (e.g., MinIO, OVHcloud Object Storage, Scaleway, Linode, Vultr, IBM COS). Select this if your provider isn’t listed separately.
<pre><code> define('ADVMO_MINIO_KEY', 'your-access-key');
 define('ADVMO_MINIO_SECRET', 'your-secret-key');
 define('ADVMO_MINIO_BUCKET', 'your-bucket-name');
 define('ADVMO_MINIO_DOMAIN', 'your-domain-url');
 define('ADVMO_MINIO_ENDPOINT', 'your-endpoint-url');
 define('ADVMO_MINIO_PATH_STYLE_ENDPOINT', false); // Optional. Set to true if your MinIO server requires path-style URLs (most self-hosted MinIO setups). Default is false.
 define('ADVMO_MINIO_REGION', 'your-bucket-region'); // Optional. Set your MinIO bucket region if needed. Default is 'us-east-1'.
</code></pre>
<a href="https://aws.amazon.com/s3/" rel="nofollow ugc">Amazon S3</a> Configuration
<pre><code> define('ADVMO_AWS_KEY', 'your-access-key');
 define('ADVMO_AWS_SECRET', 'your-secret-key');
 define('ADVMO_AWS_BUCKET', 'your-bucket-name');
 define('ADVMO_AWS_REGION', 'your-bukcet-region');
 define('ADVMO_AWS_DOMAIN', 'your-domain-url');
</code></pre>
<a href="https://www.backblaze.com/apidocs/introduction-to-the-s3-compatible-api" rel="nofollow ugc">Backblaze B2</a> Configuration
<pre><code> define('ADVMO_BACKBLAZE_B2_KEY', 'your-application-key-id');
 define('ADVMO_BACKBLAZE_B2_SECRET', 'your-application-key');
 define('ADVMO_BACKBLAZE_B2_BUCKET', 'your-bucket-name');
 define('ADVMO_BACKBLAZE_B2_REGION', 'your-bucket-region');
 define('ADVMO_BACKBLAZE_B2_DOMAIN', 'your-domain-url');
 define('ADVMO_BACKBLAZE_B2_ENDPOINT', 'your-endpoint-url');
</code></pre>
<a href="https://docs.wasabi.com/docs/creating-a-new-access-key" rel="nofollow ugc">Wasabi</a> Configuration
<pre><code> define('ADVMO_WASABI_KEY', 'your-access-key');
 define('ADVMO_WASABI_SECRET', 'your-secret-key');
 define('ADVMO_WASABI_BUCKET', 'your-bucket-name');
 define('ADVMO_WASABI_REGION', 'your-bukcet-region');
 define('ADVMO_WASABI_DOMAIN', 'your-domain-url');
</code></pre>
<h3>Using the S3 PHP SDK</h3>
The Advanced Media Offloader utilizes the AWS SDK for PHP to interact with S3-compatible cloud storage. This powerful SDK provides an easy-to-use API for managing your cloud storage operations, including file uploads, downloads, and more. The SDK is maintained by Amazon Web Services, ensuring high compatibility and performance with S3 services.
For more information about the AWS SDK for PHP, visit: 
<a href="https://aws.amazon.com/sdk-for-php/" rel="nofollow ugc">https://aws.amazon.com/sdk-for-php/</a>

Advanced Media Offloader


This plugin really sped up my website by offloading media to the cloud.



Highly recommend!


Improved Site Speed


Works perfectly. Only miss the WP CLI integration for quick mass upload (which already seems to be under the developer radar). Great job!


Great, Simple and Fully Functional

Save server space & speed up your site by automatically offloading media to Amazon S3, Cloudflare R2 & more.

Edge Images vs Advanced Media Offloader