Hello, I have successfully configured Cloudflare cache on my website. When i test my website Cloudflare is cache my website however Cloudflare is not cache some of the images on my website? Why is it so how to resolve this issue?
The images are coming from a sub-domain over r2.dev.
May I ask if you’ve connected your Custom domain name to your R2 bucket already?
If not, please pick a sub-domain name and use e.g. cdn.yourdomain.com or r2.yourdomain.com, then switch the URL in your app to use assets as from custom domain for your R2 bucket instead of r2.dev.
Here are the instructions how to do it so:
Furthermore, Custom domains allow caching and you can easily configure additional Cache Rules for them as well.
About the Cache Rules:
The extensions which are cached by default at Cloudflare:
Just to clarify, do I need to connect the domain to R2 in order to cache the images?
Additionally, is it possible to connect my own domain with R2 so that the images in the R2 bucket point to my website?
Lastly, I noticed that the default file extensions cached by Cloudflare do not include .png, and all of my images are in PNG format. Could you please explain how PNG images can be cached? Thank you!
Yes. It’s recommended to keep stuff in the cache, at the edge, for the website visitors.
You can add sub-domain such as images.yourdomain.com for your R2 bucket.
Afterwords, the link to the images would be e.g. https://images.yourdomain.com/some-folder-you-upload/image_name.extension.
On your Website, you just make sure to use the sub-domain instead of the www (or you’ve used without www and just example.com) in the link inside your Website content if you’ve used https://www.yourdomain.com/some-folder/image_name.png since before.
PNG extension is cached by default, as listed on the link from below:
Since they already are, if you need some adjustements to keep them cached for longer time period, or if you’re using a paid Cloudflare plan, you can add some more options such as optimization to webP format for end-visitors and more.
In short, to achieve the stated longer cache for end-visitors, you could do it by creating a Page Rules and by setting the Browser Cache TTL option (keep at end-visitor web browser cache) and Edge Cache TTL option (keep at Cloudflare edge) to e.g. 1 month. Using below articles and instructions as provided:
As I have images added to my website, if I connect custom domains, will the URLs of the images change?
If it’s so, what will happen to the R2 images that are currently added on my website? Do I need to update the images on my website again with updated URLs?
I didn’t get this.
Are you talking about changing my main domain URLs? Or is it the image URLs you are talking about? As i can’t change my domain url to a subdomain currently, my image structure is https://R2 bucket/year/month/image.png.
Automatically, not. You’d have to change the URL structure or links either manually, or using some script if they’re in your database
Otherwise, temporary you can rewrite URLs or redirect at Cloudflare dashboard using Redirect Rules or Transform Rules.
Might depend a bit which choice should you pick what kind of type of application you’re using
Only the image URL.
If they were pointed to https://www.yourdomain.com/images/filename.jpg, now after you’ve uploaded them to your R2 bucket and connected sub-domain such as storage.yourdomain.com, they should pointed to the https://storage.yourdomain.com/images/filename.jpg.
Sounds familiar to me, may I ask if it is a WordPress related URL structure?
You can keep it “as-is”, and using a simple code to rewrite this at your web server, without touching or changing anything.
See recent topic about this, and what kind of issue you might get when you’d be using a plugin to upload-sync with R2 bucket, if related to your case as well due to the caching and not showing “thumbnail” image on WordPress Media Library upon upload: