I am posting this article due to the many requests I received regarding Cloudflare Image Resizing and my WordPress plugin.
Due to how WordPress is designed, it’s not possible to make my plugin compatible with everything out there, so in this article we explore another method via Cloudflare Workers.
Please note that I have intentionally ommitted too much technical stuff so everyone can understand it; let’s face it, not everyone is a developer. I like to keep articles short, simple and to the point.
At the end of the article you will be able to simply copy, paste, and press one click to have Cloudflare Image Resizing properly done for your WordPress.
What is Cloudflare Image Resizing
As a reminder, with Cloudflare Image Resizing you can transform images on Cloudflare’s edge platform. You can resize, adjust quality, and convert images to WebP or AVIF format on demand.
Cloudflare will automatically cache every derived image at the edge, so you only need to store one original image at your origin.
It’s really a must have service for busy blogs like WordPress, especially if you are using it as a shop with many images.
Read more about it on the Official Post .
Why use Cloudflare Image Resizing
The main reason is speed. Let’s say for example that you website has 5 pages and each page has 10 images ranging from 1 Mb to 5, even 10 mb each image.
When someone navigates your pages for the first time, all those images are downloaded by your browser. So for example one page has 10 images, each 1 Mb in size; that’s 10 Mb to download just for images.
This is very bad for low bandwidth users, especially mobile users. It sucks even for PC users with much bandwidth. Nobody wants to see a slow loading website and it won’t adhere to web standards.
I am pretty sure you see many such websites day to day, loading forever. The main reason is media assets (like css, js, images) amongst other factors like slow web hosting, etc.
You might think: “but I use a CDN?!”, well it’s not the same. Cloudflare Image Resizing is not just a CDN, it alters your images to become better.
With Cloudflare Image Resizing your images will be reduced in size on the fly, so a 1 Mb image will become somewhere around ~100/200 kb. They will also be delivered in next generation format like Webp and AVIF.
So in a nutshell:
- Enhances your images
- Speeds up your website
- Improves your SEO
- Saves bandwidth
WordPress Plugin
You probably know about the plugin I made for WordPress from my Github / WordPress Plugins directory.
It has received a lot of feedback and many have speed up their website considerably, but many also encountered a lot of issues that are literally unsolvable.
Even though I tried to do everything possible to resize all the images, it’s not possible to resize them all because of how WordPress plugins and themes are designed.
Not to mention CSS processing and other things are out of the question.
Cloudflare Worker
After reviewing all the issues posted, I decided to go the other route and use a Cloudflare Worker to rewrite the final HTML output for Cloudflare Image Resizing.
This is the ultimate solution to use Cloudflare Image Resizing on WordPress because the worker will fetch the final response generated by WordPress, including any modifications from plugins, themes, CSS, etc.
Because the Cloudflare Worker sits between your WordPress and the users, you have the abillity to alter almost anything on the fly; meaning we can even replace images inside inline CSS and even CSS files.
In theory it sounds easy and straightforward but in practice it was much harder and time consuming.
Nevertheless, I spent a lot of time and effort to figure out how to achieve this goal.
WordPress Plugin vs Cloudflare Worker
It is upmost beneficial if you can understand the differences between the WordPress Plugin and the Cloudflare Worker. This way you can decide which one to use and understand why I recommend the worker.
| WordPress Plugin | Cloudflare Worker | |
|---|---|---|
| Free | Yes | Yes |
| Processing Speed | Fast | Very Fast |
| Dependency | PHP 7+ | None |
| General Compatibility | Partial | Full |
| Themes Compatibility | Some | All |
| Plugins Compatibility | Some | All |
| Process CSS | No | Yes |
| Process All Tags | No | Yes |
| Optimisations | No | Yes |
As you can see above, the worker wins. It’s just the best solution because no matter what kind of changes you make on your backend (WordPress), the worker will be able to alter the image links.
Setup the Cloudflare Worker
First important thing that you need to do is disable the WordPress Plugin if you have it installed and enabled. If you skip this step, you won’t see the worker do much.
Second and very important thing is to head over to Google Pagespeed and do a test of your website without image resizing. You will need this later to see the difference.
Now head over to your Cloudflare account and go to Workers. From here click “Create a Service”. Name the service whatever you want, you can also leave the auto generated random name. Leave the starter as “HTTP handler”.
After creation, click on the service and on the top right side click “Quick Edit”. The editor will show up and simply select all the existing code and replace it with my worker from Github . Click “Save and deploy” and leave the editor.
On your new service page go to “Triggers” and under Routes click “Add route”. Inside the route set your website domain with a match-all wildcard, for example this "example.com/*". For the zone you will select your domain, which in my example is example.com.
That’s all!
Troubleshooting
In case you have any issues, like no images are being resized, check the following conditions:
- Is the image part of your domain? You cannot resize images from another domain unless you specifically enabled this feature in the Cloudflare dashboard.
- Are any images rewritten? Enable "Logs" on your new worker tab and see if you spot any exceptions. If you do, report it on my Github repository.
- Are the image links being rewritten wrong? In this case report the issue on Github.
Bonus Optimisations
I am fairly sure you noticed that your WordPress contains some empty SVG tags right after the HTML body tag. If you don’t know what I am talking about just look at this:
Frankly, I cannot comprehend a valid use case for this; so I added some extra code to remove it. It will make your HTML output a bit smaller which results in a small amount of extra speed.
I will add more optimisations when I will have time.
Costs
In order to use Cloudflare Image Resizing you need to have a Pro subscription ($25/month) for your website as of this time of writing. The image resizing service starts at $5 per 100,000 images stored and $1 per 100,000 images delivered - with no egress costs or additional charges for resizing and optimization.
Using the WordPress Plugin is completely free and bears no cost. The worker is also relatively free to use, however the limits are smaller and the processing power is a bit smaller as well.
I strongly recommend you use the paid workers plan with the unbound option. The more images you have on your site, the more HTML tags must be rewritten and thus more processing time (GBs Duration).
Bear in mind that for just 5$ you get 400,000 GB-s worker limit which is more than enough from my tests.
License
I have decided not to use the MIT license because I noticed many are grabbing my code and selling it. Not cool guys.
So with that being said the new License model used is Apache License 2.0, so please do not re-sell my work.
Useful Links
- Webpagetest: https://www.webpagetest.org/
- Google Pagespeed Insights: https://pagespeed.web.dev/
- Workers pricing: https://developers.cloudflare.com/workers/platform/pricing/
I strongly believe that my Cloudflare Worker will improve your website considerably. If I am right, do leave a star on Github. If I am wrong, leave some feedback instead.
Waiting for your comments.
Comments