Edge Images for WordPress Plugin Directory

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 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 & 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

Development

GitHub Repository

Report Issues