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:

1. Intercepting image requests
2. Determining the optimal size and format needed
3. Using your CDN to transform the image on-demand
4. Caching the result for future requests

⚡️ Features Core Features

• Automatic WebP/AVIF conversion
• Intelligent responsive image handling
• Smart srcset generation
• 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 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

1. Install and activate the plugin
2. Go to Settings > Edge Images
3. Select your CDN provider
4. 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

5.2.9 ( 30/01/2025 )

• BUGFIX: Don't try to transform AVIF images in srcset attributes.
• BUGFIX: Correctly apply custom rewrite domains to src attributes in some edge cases.

5.2.7 ( 16/01/2025 )

• FEATURE: Added an admin setting for customizing the domain used for transformed images.

5.2.6 ( 10/01/2025 )

• FEATURE: Added a filter for customizing the width multipliers used for generating srcset variants (and disabled the 2.5x multiplier by default).
• FEATURE: Moved CSS to inline styles to avoid extra HTTP requests.

5.2.5 ( 09/01/2025 )

• BUGFIX: Fixed the XML sitemap integration.

5.2.4 ( 09/01/2025 )

• BUGFIX: Prevent fatal errors when attachment posts were updated.
• FEATURE: Disabled 'gravity' settings by default.
• FEATURE: Added some front-end CSS to unbreak the admin bar avatar.
• FEATURE: Disabled the htaccess cache feature on non-Apache systems.

5.2.3

• Removed some redundant error logging.
• Tweaked CSS to ensure correct positioning of SVGs inside picture elements.
• Added filtering capabilities.
• Overhauled the readme file.