Hi, I'm looking for the best way to integrate Images with my R2 bucket. What is the best way?
What is the best way to integration the two? Ideally I would like to have the Images api but linked to my R2 bucket. Is that possible?
10 Replies
You could use Image Resizing/Transformations with Images in your R2 bucket as the source
there's no real integration with the two in the sense you can't have Images use your bucket for storage or anything
You can achieve similar functionality though
Thanks 🙂 WHen you say similar functionalty, what do you mean?
I.e. how would I use R2 as a source for transformations?
You can use Image Resizing with a specific endpoint or via Workers. If you use the Endpoint, you can either use a relative path (if same hostname) or a fully qualified one
normal r2 file:
https://i.chaika.me/e9ed1ae4adfe4c8d8ea938d1a3c7f67f
resized using relative pathes:
https://i.chaika.me/cdn-cgi/image/width=1800,quality=75,format=auto/e9ed1ae4adfe4c8d8ea938d1a3c7f67f
or you can include the full url
https://i.chaika.me/cdn-cgi/image/width=1800,quality=75,format=auto/https://i.chaika.me/e9ed1ae4adfe4c8d8ea938d1a3c7f67f
Aha! That was just what I was looking for - and didn't quite understand from the docs.
There's docs on the cdn-cgi/image path here: https://developers.cloudflare.com/images/transform-images/transform-via-url/
or via Workers (which would also let you lock down the transformation settings), here: https://developers.cloudflare.com/images/transform-images/transform-via-workers/
Cloudflare Docs
Transform via URL · Cloudflare Image Optimization docs
You can convert and resize images by requesting them via a specially-formatted URL. This way you do not need to write any code, only change HTML …
Cloudflare Docs
Transform via Workers · Cloudflare Image Optimization docs
Using Cloudflare Workers to transform with a custom URL scheme gives you powerful programmatic control over every image request.
One last R2 question. If I want to open an R2 bucket for general requests (i.e. https://i.chaika.me/e9ed1ae4adfe4c8d8ea938d1a3c7f67f ) what settings should I look for to get that to work?
Under Bucket Settings, Custom Domains -> "Connect Domain"
that's all that is, a R2 Custom Domain
https://developers.cloudflare.com/r2/buckets/public-buckets/#connect-a-bucket-to-a-custom-domain
Custom Domains are read-only and don't have Lists or anything, you can use them to retrieve any object in the bucket
Thanks!
You can use a Cache Rule to force caching and with a longer edge ttl. Any Cache Hits don't cost you anything/no Class B
Well nothing in terms of R2, Image Resizing costs are still there if you use that as well
Ok, good to know. This helped me a lot. Thanks a bundle!