Support images transformation

[lane711]

Now that we support image management, it makes sense to extend this to supporting image transformation.

So for example, a user uploads a full rez photo, and SonicJs will create various versions of the images based on preset configurations including:

1. image resolution
2. width
3. height

The configuration should be stored as env vars at this stage

For reference, please see how this is handled in storyblok:
https://www.storyblok.com/tp/optimize-your-storyblok-images-with-image-engine

[jamaluddinrumi]

✨amazing

more storyblok users & similar headless cms users will come to here 😁

[jamaluddinrumi]

sorry, i put the wrong reference url.

the right one is here https://www.storyblok.com/docs/image-service

it contains more comprehensive & demos on how storyblok generate dynamic responsive images based on url params.

[osseonews]

Instead of using R2 to store images, why not just use Cloudflare Images, https://developers.cloudflare.com/images/. This will automatically transform the images for you and offers many other image features that will greatly improve Sonicjs. I don't know why anyone uses R2 for images actually. It's better for documents, but not images. So in your repo, when someone uploads an image from TUS just use the cloudflare images API to store there, and then you get automatic transformations out of the box. Easy to use.

[lane711]

I didn't even know about cf images. That is something we should be using for sure. I'll add an issue for that. Thanks for letting us know

[osseonews]

Yeah, basically Cloudflare Images is built on top of R2 and just includes all the other features that everyone needs for images that they would have to build on their own with just R2. So you don't have to reinvent the wheel with R2 for tranformations etc., as Cloudflare has already built it. It's an amazing service. I think you can keep R2 here, but just use it for files, like PDF uploads. Images should just use Cloudflare Images as it has every thing you can possibly want for images (and backend is R2).