mecanik/cloudflare-image-resizing

CloudFlare Image Resizing plugin for WordPress.

Cloudflare Image Resizing plugin for WordPress

Rewrites images on the fly so you can use the Cloudflare Image Resizing service.

You will speed up your website drastically by offering to browsers AVIF/WEBP images delivered from global locations thanks to Cloudflare.

Internally the plugin is developed to use the fastest functions from PHP available, without any database calls. There is zero to none overhead in performance, your website will not get slower, only faster.

Benefits

• Enhances your images to become clearer and much nicer (from tests, wordpress cropping alters the image and becomes lower quality)
• Speeds up your website to offer a better experience for users (images loaded from cloudflare cdn is much faster than your server)
• Improves your SEO (since your website performs much faster)
• Removes strain from your web hosting (asset loading is one of the biggest problems for web servers, especially Apache)
• Saves bandwith on your web hosting (there is a very significant save factor, especially on websites with many images/photos)

Current features

• Replaces all attachment/single image source URL's
• Replaces all multiple image source set URL's
• Replaces all every other image src found inside the content
• Serves CloudFlare Image Resizing the original image and lets Cloudflare crop it
• Adds missing image default sizes (width/height for Google Page Insights scoring)

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

Usage

• Upload the plugin manually via WordPress or FTP, and enable it.
• Set your site URL in the settings page.

Notes

• Before using this plugin please ensure you have turned ON the Cloudflare Image Resizing feature for your domain.
• If your WordPress is inside a sub-folder, remember to tell the plugin this by setting the folder name.
• You can configure quality settings (I do not recommend altering the default settings).
• If you notice images not being re-written, try enabling more "hooks". If it still does not work, open an issue.
• You can configure whitelisting of images coming from Facebook, Twitter, Instagram, PayPal, etc.

Tips

• Open the developer console in your browser after enabling this plugin to test functionality. Go to Network and then select "Images" tab and see if the all the downloaded images have the Cloudflare Image Resizing format.

* If you have filenames similar to image-100x200-100x300.jpg the plugin might not re-write it. Rename your file and re-upload it without any extra sizes in the filename.

Contribution

Feel free to contribute with your own functions/methods. Just make sure you tested it properly.

Special Thanks

These are the people that spent time and effort to test and help improve the plugin, as well as sponsoring development.

• Urban Change Lab
• danmaby
• zerobounce
• swissky
• itsOwen

Assistance

In your are in immediate need of commercial help/advice/assistance, I can offer you my assistance for a small fee. Please do contact me via my the consultation page or if you cannot do so open an issue.

Support me

Buy me a coffee to give me more energy and write more code :)

cloudflare-image-resizing's Issues

Possible to use for admin dashboard?

Hi, thank you for this super awesome plugin. It works fine for the frontend, but is it possible to also use it for backend images, like the media library, product images in the edit screen, etc?

I tried both the plugin and the worker but none are rewriting the images in the backend. I'd like to completely get rid of the thumbnails and only keep the original copies on my server.

Saves http instead of https

The site url is being saved as http instead of https on the options-general.php?page=cf-image-resizing-settings page.

This breaks the images sites using https.

I had to manually change my site url in config.php to https and everything works.

Broken image from Amazon

Hello,

First, nice plugin. It works like charm.

All is well except Amazon images are broken coming through the AAWP plugin. Is there a way to instruct the plugin to rewrite images only from the given domain?

I've already unticked "Resize images from any origin" on Cloudflare.

Rewrite is specifying original image maximum size

Hello,

I've got this plugin working almost perfectly, yay! It's a huge help, given Cloudflare hasn't done this themselves. Thank you.

Odd issue: all image rewrites are taking on the original image dimensions, rather than the container or the specified image width/height. Eg: woocommerce images in the image gallery are rewritten as 2000px, while the width and height attributes are 600px (as is the container).

Is this something I need to add to config.php?

Cheers!

Image with a special crop set in page builder are defaulting to original aspect ratio

Using BeaverBuilder page builder if I set the thumbnails to a custom crop like "landscape" they appear in the original aspect ratio when then plugin is active. The dimensions of the crop at in the image files name so that is probably the cause.

src="https://mysite.com/wp-content/uploads/bb-plugin/cache/image-1456x1024-landscape.jpg"

Suggestion: Prevent generation of local images

I saw this in a plugin called Media Cloud. Do you think it might be possible to add an optional setting to disable local generation of thumbnails since manipulations would be handled from the master file? I'm thinking this could be good to save on local server space since the cropped generated sizes would not be served. Of course optional in case other users want to migrate back to local files.

Bug with iOS 16?

Since installing iOS 16 all avif images do not show on iPhone. Not sure if it is this plugin, cloudflare or apple is the problem....

3 questions

Awesome work looking forward to trying it out! Before I dig in, couple questions:

1. How well does it work in a sub-fold multisite environment?
2. How would one go about transitioning images from WP Offload Media Lite with it using s3 for storage
3. Could it work with amazon s3 offline plugin where it gets priority over the s3 offline plugin

Images are not resized on smaller viewports

Hello,

The plugin is working as expected on Desktop and larger viewports, but on mobile and smaller viewports the images are not getting resized properly.

Example URL: https://mustreadquotes.com/stay-in-your-lane/
The main image is 1200 pixel wide, but the plugin is not changing the image URL to resize it on the fly, resulting in a larger-than-needed image being loaded.

urlencode for /cdn-cgi/image/.....$image_path

Hello there,
First, happy new year to all of you!

I'm reaching you about a little improvement in the cloudflare-image-resizing.php on lines 215/220 and subsequent calls :

• 269/274,
• 322/328,
• 385/391,
• 441/447,
• and finally 526/531.

I reach errors due to encoding errors while being in UTF-8.
I made a fix on my website but I think it could be an improvement for all user if you can make it your way !

// Original code line 215
$image[0] = CF_IMAGE_RESIZING_SITE_URL.'/cdn-cgi/image/width='.$sizes[0].',height='.$sizes[1].',fit='.CF_IMAGE_RESIZING_FIT.',quality='.CF_IMAGE_RESIZING_QUALITY.',format='.CF_IMAGE_RESIZING_FORMAT.',onerror='.CF_IMAGE_RESIZING_ONERROR.',metadata='.CF_IMAGE_RESIZING_METADATA.CF_IMAGE_RESIZING_SITE_FOLDER.$image_path;

// New code DZ
// New variables defined before the condition tests
// I made it in 2 parts to manage if/else actions
$mashup_size = "width=".$sizes[0].",height=".$sizes[1].",fit=".CF_IMAGE_RESIZING_FIT ;
$mashup_size_encoded = urlencode($mashup_size) ;
$mashup_extradata = "quality=".CF_IMAGE_RESIZING_QUALITY.",format=".CF_IMAGE_RESIZING_FORMAT.",onerror=".CF_IMAGE_RESIZING_ONERROR.",metadata=".CF_IMAGE_RESIZING_METADATA.CF_IMAGE_RESIZING_SITE_FOLDER;
$mashup_extradata_encoded = urlencode($mashup_extradata) ;	

// Then the replacement code of line 215, calling encoded in if
$image[0] = CF_IMAGE_RESIZING_SITE_URL.'/cdn-cgi/image/'.$mashup_size_encoded.','.$mashup_extradata_encoded.$image_path;
// And line 220 in else
$image[0] = CF_IMAGE_RESIZING_SITE_URL.'/cdn-cgi/image/'.$mashup_extradata_encoded.$image_path;

I replicate these changes on the 6 pairs of calls (lines mentioned before) but I guess you can make it in a better way at a higher level in the process.

Hope to hear from you, if you have any questions too.
Best regards,
Denis

I've installed but not working

I've installed the plugin on https://www.rnbjunk.com, but images seems not be serving.

Issue with WP YouTube Lyte thumbnail image generation

WP Youtube Lyte has a thumbnail image caching feature. Cloudflare image resizing is trying to rearrange the URL in the WP YouTube Lyte thumbnail cache:

An example URL: https://website.com/wp-content/plugins/wp-youtube-lyte/lyteCache.php?origThumbUrl=https%3A%2F%2Ftilta.com%2Fcdn-cgi%2Fimage%2Fquality%3D65%2Cformat%3Dauto%2Conerror%3Dredirect%2Cmetadata%3Dnone%2Fvi%2FybDY8eRnNEA%2Fmaxresdefault.jpg

It should be showing ytimg.com instead of my website url and returns an error. Deactivating the plugin doesn't seem to resolve the issue. Any ideas on how to fix this? thanks

"Some" images are not rewritten

Hello there ...

First of all, thanks for your plugin. We are using it on our site for many months and are generally happy.

I have noticed a glitch of which I am not sure it is related to the cloudflare image resizing plugin or to something else.

This is the environment:

Related Plugins:

• Plugin Version 1.5.4
• WordPress 6.4.3 with Hello theme version 3.0.1 including Hello child theme version 1.0.1
• Cloudflare Plugin Version 4.12.4
• Elementor and Elementor Pro 3.19.2
• Readmedia Library Plugin version 4.22.7
• FooGallery (Premium) Version 2.4.7

Cloudflare:
Cloudflare Business plan including APO, also using the new "transform" feature, that Cloudflare introduced recently.

The effect I am seeing:
When adding a Wordpress gallery, using the standard WP gallery 'feature', all images ARE properly rewrtitten to the CDN. Example:
https://www.ikigaido.ch/angebot/bonsai-karate/

When adding a FooGallery, the images are NOT rewritten to the CDN. Example: https://www.ikigaido.ch/galerie/karate/schweizermeisterschaft-2023-in-sursee/

When adding single images using Elementor, the image is SOMETIMES rewritten to the CDN. Working example: Front page https://www.ikigaido.ch with the lady in the karate suit. Non-Working example: https://www.ikigaido.ch/angebot/leistungssport-ftem-karate/ the first info graphics "FTEM Karate". Same page, the four portraits images of our squad are also not rwritten.

I am pulling my hair out in finding a pattern here. It seems obvious, that FooGallery is not supported. But why individual images are sometimes rewritten and sometimes not, I have no clue. Could it be related to the Cloudflare change related to the new transform plan?

Maybe you could have a look - I am happy to answer questions and provide more data.

Cheers
Stephan

Images won't load when plugin activated

Hello,

I've made sure that image resize is enabled, but when I enable the plugin my images on my site no longer load, they're just blank.

The end URL on them appears like this cdn-cgi/image/width=1000

Hope you can help

Undefined variable most likely because of copy pasting?

Warning: Undefined variable $safe_text in /var/www/html/wp-content/plugins/cloudflare-image-resizing/cloudflare-image-resizing.php on line 75

Warning: Undefined variable $safe_text in /var/www/html/wp-content/plugins/cloudflare-image-resizing/cloudflare-image-resizing.php on line 75

Warning: Undefined variable $safe_text in /var/www/html/wp-content/plugins/cloudflare-image-resizing/cloudflare-image-resizing.php on line 75

Warning: Undefined variable $safe_text in /var/www/html/wp-content/plugins/cloudflare-image-resizing/cloudflare-image-resizing.php on line 75

Warning: Undefined variable $safe_text in /var/www/html/wp-content/plugins/cloudflare-image-resizing/cloudflare-image-resizing.php on line 75

Warning: Undefined variable $safe_text in /var/www/html/wp-content/plugins/cloudflare-image-resizing/cloudflare-image-resizing.php on line 75

Warning: Undefined variable $safe_text in /var/www/html/wp-content/plugins/cloudflare-image-resizing/cloudflare-image-resizing.php on line 75

Warning: Undefined variable $safe_text in /var/www/html/wp-content/plugins/cloudflare-image-resizing/cloudflare-image-resizing.php on line 75

Warning: Undefined variable $safe_text in /var/www/html/wp-content/plugins/cloudflare-image-resizing/cloudflare-image-resizing.php on line 75

Css image-background

The plugin is amazing! It doesn't help when it comes to the css background

Do you think it can be implemented?

Broke my site's images

Hello, just wanted to alert you that this plugin broke my site's images.

I've downloaded it, installed it on Wordpress, activated it and indicated my site's address. I've also enabled image conversion on cloudflare.

But what I've got was this: https://nimb.ws/po62lP

Let me know if you need any additional information, that might help fix this. Thanks.

Plugin wont activate/install

Strange issue. I've successfully installed your plugin on other WP sites in the past, but downloading your zip and uploading it via WP dashboard > Plugins results in an error:

Installing plugin from uploaded file: cloudflare-image-resizing-main.zip
Unpacking the package…

Installing the plugin…

The package could not be installed. No valid plugins were found.

Plugin installation failed.

Any idea what I may be doing wrong?

php7.2 ERROR

When the PHP version is 7.2, the Cloudflare Image Resizing plugin throws an error:
Error Details:Error type E_PARSE occurred at line 1115 in the file /www/wwwroot/site.com/wp-content/plugins/cf-image-resizing/cf-image-resizing.php
Error message: syntax error, unexpected '' (T_ENCAPSED_AND_WHITESPACE), expecting '-' or identifier (T_STRING) or variable (T_VARIABLE) or number (T_NUM_STRING)

A simple question, I can't find answer of on google.

Hello, I had some questions regarding the plugin, I would appreciate and even donate if the developer is likely to reply me back.

Q1. As stated in the description of the plugin, it changes all image urls, Does this mean it just shows a different url or it really changes the image url, Because my images are already indexed on google and by changing the url will my images get deranked or removed from search?

Q2. Will this store another instance of the newly created image on my server.

Q3. I can simply install it from the plugin installer right?

The URL with the folder causes the plugin to be configured incorrectly

Hi, I am passing https://example.com/blog as a site url in wp-admin plugin general settings (plugin version 1.5.2), it was saved in config.php as this

define('CF_IMAGE_RESIZING_SITE_URL', 'https://example.com/blog');
define('CF_IMAGE_RESIZING_SITE_FOLDER', '');

Generated Cloudflare URLs are wrong with these settings.

I expected:

define('CF_IMAGE_RESIZING_SITE_URL', 'https://example.com');
define('CF_IMAGE_RESIZING_SITE_FOLDER', '/blog');

Plugin works fine with these settings, but it's impossible to configure this from wp-admin plugin settings.

Special Rules for not resize images like Google Merch Feed

Hey, we're using your plugin for a client. Everything works well, but Google Shopping doesn't like the Cloudflare Images. Any idea how we could add a special rule that the feed use the original images?

Images not processed

Hello, I have elementor on this site https://www.spots4kite.com/ and the homepage ignores resizing. It's not processed no matter what settings I use. I can activate all the integrations with no success...

The same on the map https://www.spots4kite.com/explore/?type=spots&sort=top-rated&category=freeride

Regards,
Karel

Lazyload issues

Hi!

I really like your plugin. Thanks a lot for creating it. Also wanted to do my part and give a small donation.

There is one thing though that I'm struggling with and that is combining the plugin with LazyLoading.

Do you know if I'm missing something here or that it's an issue that could at some point be solved?

Image breaking if image size in file name

Hello,

Just an FYI, it seems if an image has the image size in the image file name (i.e. UI-paths-800x800-1.jpg), the plugin strips out part of the image file name (i.e. UI-paths.1.jpg), which causes a 404.

High Load with Plugin

Enabling this plugin causes lots of php-fpm processes and my load goes way too high.

Have you encountered this before?

Wordpress Theme Images Not being Optimized

I'm noticing that some of my images are not being picked up by the script, seems to only impact images being served out of the themes directory rather than the uploads directory on my WP install. Any suggestions gratefully received.
An example is mission-bg.png on site https://kumoco.com

Config:
define('CF_IMAGE_RESIZING_SITE_URL', 'https://kumoco.com');
define('CF_IMAGE_RESIZING_SITE_FOLDER', '');
define('CF_IMAGE_RESIZING_HOME_DIR', 'ABSPATHi');
define('CF_IMAGE_RESIZING_HOOK_1', TRUE);
define('CF_IMAGE_RESIZING_HOOK_2', TRUE);
define('CF_IMAGE_RESIZING_HOOK_3', TRUE);
define('CF_IMAGE_RESIZING_HOOK_4', FALSE);
define('CF_IMAGE_RESIZING_HOOK_5', TRUE);
define('CF_IMAGE_RESIZING_HOOK_6', TRUE);
define('CF_IMAGE_RESIZING_FIT', 'crop');
define('CF_IMAGE_RESIZING_QUALITY', 80);
define('CF_IMAGE_RESIZING_FORMAT', 'auto');
define('CF_IMAGE_RESIZING_ONERROR', 'redirect');
define('CF_IMAGE_RESIZING_METADATA', 'none');
define('CF_IMAGE_RESIZING_STRIP_SIZES', TRUE);
define('CF_IMAGE_RESIZING_ADD_MISSING_SIZES', TRUE);
define('CF_IMAGE_RESIZING_FIX_VC_COMPOSER', FALSE);
define('CF_IMAGE_RESIZING_WHITELIST', FALSE);
define('CF_IMAGE_RESIZING_WHITELIST_URLS', [ 'fbcdn.net', 'twimg.com', 'cdninstagram.com', 'paypalobjects.com' ]);

Thanks for creating these scripts, finding them very useful.

Image background not being rewritten

Hi,
Using the CF image resizing the images used as a background (Kadence row block) are being missed in the resize rewrite.
look at my home page here: Libra Photographic
Is there a way I can implement them in the code?

Thanks in advance

Missing Images

Updated images for product categories now, images are all missing and not rendered to updated images.

The <region> specified is invalid.

Hello! I deactivated the plugin on localhost as it doesn't work there, and I'm asked to write why I'm deactivating it.

When I try to do so, however, it gives me this message:

"Skip and deactivate" works flawlessly, however.

Setup:
WordPress 6.3.2 using Sage 9 with MariaDB.
PHP 8.1.

All images are gone after installing the code.

All images are gone after installing the code. here the link: https://lagaiphone.se/

Question re "Strip image sizes"

I am seeing this in my source code for posts:

<img width="768" height="432" src="/cdn-cgi/image/width=1920,height=1080,fit=crop,quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/2023/07/image-768x432.jpg" ....

My understanding was that the "Strip image sizes" setting would take care of this? Otherwise, the "resizing" function would only ever be working off the thumbnail/smaller version of the image, and not the full sized one (eg image.jpg).

Great plugin otherwise!

Plugin rewriting Yoast schema image references

Yoast outputs json_ld Schema like:

url":"https://www.domains.com/wp-content/uploads/...

But the plugin is rewriting it to:

url":"/cdn-cgi/image/width=1920,height=1080,fit=crop,quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/...

How can I stop this? I tried changing the different hook numbers/levels in the plugin, but nothing worked.

SRCSET source image using thumbnails instead of source for manipulation

I am not sure if this is the intended behaviour, but I assumed using CF Image Optimization would mean that all manipulations would be done on the source file rather than the thumbnail. Here is a sample excerpt from a vanilla installation with the Twenty twenty theme.

<img loading="lazy" src="http://site.com/cdn-cgi/image/width=580,height=386,quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/2022/02/image-1024x682.jpg"
 alt="" class="wp-image-13"

srcset="http://site.com/cdn-cgi/image/width=1024,quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/2022/02/image-1024x682.jpg 1024w, 
http://site.com/cdn-cgi/image/width=300,quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/2022/02/image-300x200.jpg 300w, 
http://site.com/cdn-cgi/image/width=768,quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/2022/02/image-768x512.jpg 768w, 
http://site.com/cdn-cgi/image/width=1536,quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/2022/02/image-1536x1024.jpg 1536w, 
http://site.com/cdn-cgi/image/width=1200,quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/2022/02/image-1200x800.jpg 1200w, 
http://site.com/cdn-cgi/image/width=1980,quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/2022/02/image-1980x1320.jpg 1980w, 
http://site.com/cdn-cgi/image/width=2000,quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/2022/02/image.jpg 2000w" 

sizes="(max-width: 1024px) 100vw, 1024px" width="1024" height="682"> 

For each line, the plugin is pulling the thumbnail size (e.g. image-1024x682.jpg) rather than using image.jpg (original) to perform the manipulation.

Disclaimer: Cloudflare is not enabled on this site yet as I just wanted to see the URL structure for planning purposes.

Feature Request: Resize only images with a certain class

Hey @Mecanik

I'm keen to do another pull request if you can point me in the right direction.

I'd like to take a leaner approach for websites that have a LOT of images, and only resize the LCP element of each page, indicated by perhaps a class or data-attribute.

What do you think of this idea? Is it worth exploring or is it better to just hardcode the image URL in my template/function files?

Attached is an example of a LCP element prefetch in wp_head: