Edge Images
Edge Images automatically uses your edge transformation service (e.g., Cloudflare, Accelerated Domains, Imgix, etc.) to apply performance optimizations to <img> 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.
🚀 Why should I use Edge Images?
- Instant Performance Boost: Automatically optimize and serve images in modern formats (WebP/AVIF) through your existing CDN
- Zero Configuration: Works out of the box with your existing images and themes
- No Local Processing: All transformations happen at the edge – no server load or storage overhead
- Perfectly Sized Images: Automatically generates the exact image dimensions needed for every device and viewport
- Cost Effective: No need for expensive image optimization services or additional storage
🎯 Perfect For
- Sites with lots of images that need optimization
- Performance-focused developers and site owners
- Anyone using Cloudflare, BunnyCDN, or similar services
- Sites that want modern image formats without the complexity
- Developers tired of managing multiple image sizes
💡 How It Works
WordPress typically creates multiple copies of each uploaded image in different sizes. This approach is inefficient and often results in:
- Images that are too large or small for their display size
- Unnecessary storage usage
- Missing sizes for modern responsive designs
- Lack of modern format support (WebP/AVIF)
Edge Images solves these problems by:
- Intercepting image requests
- Determining the optimal size and format needed
- Using your CDN to transform the image on-demand
- Caching the result for future requests
⚡️ Features
Core Features
- Automatic WebP/AVIF conversion
- Intelligent responsive image handling
- Smart
srcsetgeneration - Automatic image optimization
- Optional
<picture>element wrapping - Zero local processing
- Maintains original images
Advanced Features
- Fine-grained transformation control
- Multiple CDN provider support
- Developer-friendly filters
- Yoast SEO & Rank Math integrations
- Bricks integration
- Gutenberg compatibility
🔌 Supported Providers
- Cloudflare (Pro plan or higher)
- Accelerated Domains
- BunnyCDN
- Imgix
🛠️ Technical Example
Your Code
echo wp_get_attachment_image(1, [640,400], false, ['fit' => 'contain']);
What WordPress Usually Outputs
<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">
That’s multiple different images files, none of which are the right size!
What Edge Images Outputs
<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>
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.
🎨 Customization
Transform Parameters
Control every aspect of image transformation with attributes like:
* width/height: Exact dimensions
* fit: Resizing behavior (contain, cover, crop)
* quality: Compression level
* format: Output format (auto, webp, avif)
Filtering Disable transformations globally or selectively:
// 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];
});
🔧 Requirements
Essential
- A supported edge provider with image transformation features enabled:
- Cloudflare Pro plan or higher with Image Resizing enabled
- Accelerated Domains with Image Resizing enabled
- BunnyCDN with Image Processing enabled
- Imgix with a configured source
Technical
- PHP 7.4 or higher
- WordPress 5.9 or higher
✅ Getting Started
- Install and activate the plugin
- Go to Settings > Edge Images
- Select your CDN provider
- That’s it! Your images will now be automatically optimized
🤝 Integrations
Yoast SEO Automatically optimizes images in:
- Meta tags (og:image, etc.)
- Schema.org output
- XML sitemaps
🔒 Privacy
Edge Images processes images through third-party edge providers. Here’s what you need to know about privacy:
Data Processing
- Images are processed through your chosen edge provider (Cloudflare, Accelerated Domains, etc.)
- No personal data is collected or stored by the plugin itself
- Image URLs are passed to the edge provider for transformation
- Original images remain on your server; only public URLs are processed
Edge Provider Privacy Different providers have different privacy implications:
- Cloudflare: Images are processed according to Cloudflare’s Privacy Policy
- Accelerated Domains: Images are processed according to Accelerated Domains’ Privacy Policy
- BunnyCDN: Images are processed according to BunnyCDN’s Privacy Policy
Data Storage
- The plugin stores your selected settings in your WordPress database
- No user data is collected or stored
- No analytics or tracking is performed
- Cache files may be created in your uploads directory for optimization
GDPR Compliance
- The plugin is GDPR-compliant as it does not collect, store, or process personal data
- Users should review their chosen edge provider’s privacy policy and data processing terms
- Site owners should update their privacy policy to reflect their use of third-party image processing services