Image Transforms on pages
I have a pages project with an image transform endpoint.
As far as I can tell, I can't use Cloudflare's image transform features because the pages function isn't running in the same zone as my website's zone. I assume this is because Custom Domains in Pages are really just DNS record aliases - it's not moving the function to run in the Cloudflare zone where Images is enabled. For presumably the same reasons,
wrangler.toml's routes option doesn't work either (Configuration file for Pages projects does not support "routes").
I still want to have an entire website running, but I want 1 API endpoint which optimises images dynamically.
What's the best way to solve this? For example, do I need to mix and match a separate worker just for the image resize and a pages project for everything else?
- pages.dev: https://fast-images.pages.dev/
- deployment ID: 5839679a
- account ID: a743ed06cad7fe7565e231b80cb268b2
- zone ID (for images): 539e268afac9443cf7dc601b8e8e599d4 Replies
there are 3 ways to do that
~~1. pages function with custom domain: fetch image url with cf
options~~
2. a seperate worker with custom domain and then fetch without cf option
3. use wasm to deal with image processing like rust image or something
note: if u want to use cf image transform. u must need custom domain
pages function with custom domain: fetch image url with cf optionswon't work, he sort of figured that out himself
I assume this is because Custom Domains in Pages are really just DNS record aliases - it's not moving the function to run in the Cloudflare zone where Images is enabled.It's more that the way Pages supports Custom Domains is through CF for SaaS, which in effect runs the function on the pages.dev always, which you can't enable transformations on. Routes are only a workers thing. Workers Custom Domains or Routes would work on an actual worker executing on a zone with transformations enabled. You could use the transform via URL option: https://developers.cloudflare.com/images/transform-images/transform-via-url/ fetching via your function or having the browser fetch it. You can use transform rules to serve on a custom path: https://developers.cloudflare.com/images/transform-images/serve-images-custom-paths/, or Custom Rules to block all non-function requests to that path (based on a secret header or something)
yes, you are right. pages function won't work.
Adding a separate worker with a Route integration worked.
It'd be great if, at some point, I could use Images from Pages directly (ideally via the same wrangler-based setup as most other infra I'm using), but this is a great workaround.
Thank you for your help! ❤️