Cloudflare Image Resizing – Optimize & Accelerate Your Images vs Edge Images

Elevate your site’s performance with this plugin that dynamically optimizes and resizes images using the Cloudflare Image Resizing service. Experience a significant speed boost by delivering AVIF/WEBP images from Cloudflare’s global locations directly to your users’ browsers. The plugin utilizes the fastest available PHP functions, without any database calls, ensuring minimum overhead in performance. Your website’s speed will not be compromised, but it will noticeably improve. Benefits Refines your images, delivering higher clarity and enhanced quality, as opposed to standard WordPress cropping which often reduces image quality. Supercharges your website speed, offering users an improved, faster experience by loading images from Cloudflare CDN, far quicker than traditional servers. Boosts your SEO significantly due to superior website performance and speed. Relieves your web hosting of heavy load, as asset loading is a prominent issue for servers, particularly Apache. Conserves substantial bandwidth on your web hosting, an especially noticeable benefit for websites featuring numerous images/photos. How does this work? The Cloudflare Image Resizing plugin for WordPress enhances your site’s speed and performance by automating image resizing using Cloudflare’s advanced technology. But how exactly does this work? Let’s simplify it. Usually, when you upload an image to your WordPress site, it creates multiple sizes of the image to fit different screen sizes, which can slow down your site. This plugin eliminates that issue. The plugin taps into WordPress’s image management functions and changes the final URLs of the images in your site’s HTML code. Instead of pointing to the images on your server, these URLs now point to Cloudflare’s Image Resizing service. When users visit your site, they aren’t just served images. Cloudflare resizes and optimizes these images on-the-fly, ensuring they’re perfectly sized for their device, enhancing load times and user experience. All this happens behind the scenes, making your website faster without any extra effort from you! Current features Substitutes all attachment/single image source URLs. Replaces all multiple image source set URLs. Revises all other image source URLs found within the content. Provides the original image to Cloudflare Image Resizing service for efficient cropping. Supplements missing image default sizes (width/height), enhancing Google Page Insights scores. Compatibility Latest WordPress and PHP 7+ All general themes MAI Themes and Genesis Framework DIVI Themes Content Areas (formerly Template Parts) Editor plugins like Visual Composer Optimization plugins like WP Rocket Notes Before using this plugin please ensure you have turned ON the Cloudflare Image Resizing feature for your domain. If your WordPress resides in a sub-folder, adjust the plugin settings by specifying the folder name. You have the option to tweak quality settings, though it’s generally best to stick with the default configuration. If images aren’t being re-written as expected, consider enabling more “hooks”. If the issue persists, feel free to open a support ticket. The plugin allows for whitelisting of images sourced from platforms like Facebook, Twitter, Instagram, PayPal, etc. Quick Guide and Tips Checking if Cloudflare Image Resizing is Working Once you’ve activated the Cloudflare Image Resizing plugin, you might be wondering how to check if it’s doing its job. Here’s a quick way to verify: With your site open, activate the developer console in your browser. This is typically done by right-clicking on your webpage and selecting “Inspect” or “Inspect Element”. In the console, navigate to the “Network” tab. Reload your webpage. You should now see a list of items that are being loaded on your page. You’re interested in the images. Look for any image files in this list (they’ll typically end in .jpg, .png, etc.). Click on an image to view more details. Look at the URL or the response headers for that image. If you see reference to the Cloudflare Image Resizing format, it means your plugin is working correctly and your images are being optimized. Addressing Filename Issues The Cloudflare Image Resizing plugin works by identifying the images on your site and applying optimizations. However, it can get confused if the filenames of your images are too complex or contain multiple dimensions. For example, an image file named “image-100×200-100×300.jpg” might not be processed correctly. If you find that some images aren’t being resized, consider renaming these files and re-uploading them to your site. Simpler names, like “image1.jpg” or “product-shot.jpg”, are usually best. Remember, the goal of image resizing is to deliver the most optimal version of an image for every user. So, it’s always a good idea to test this functionality on different devices and browsers to ensure all your users are getting the best experience possible. Need Expert Support? Feeling stuck? For hands-on help optimizing your plugin settings or improving your WordPress site, I’m here for you. Check out my Consulting Services and let’s take your website to the next level. Disclaimer Please note that this plugin is developed and maintained independently, and is not officially affiliated with or endorsed by Cloudflare Inc. This plugin simply makes use of the image resizing feature offered by Cloudflare’s services. All trademarks and copyrights belong to their respective owners. For any issues related to Cloudflare’s services themselves, please contact Cloudflare’s support directly.

Edge Images automatically uses your edge transformation service (e.g., Cloudflare, Accelerated Domains, Imgix, etc.) to apply performance optimizations to 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 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 That’s multiple different images files, none of which are the right size! What Edge Images Outputs 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