There were a lot of primitives we built to ship image resizing - Storage events exposed via webhooks, rate limiting, a queue on top of Postgres, a smart CDN cache, object metadata endpoints, etc. These are already available if you are self hosting Supabase Storage, so that you can integrate your own CDN, listen to storage events, etc. Over the next few months, we will be working on exposing these on the Supabase platform too.
However, it's unclear from the docs [0] if one of the most common use cases is supported: requesting an image at a specific aspect ratio while not exceeding a maximum size.
For instance, I want a 1600×900px hero image at the top of my blog posts, but my source image is only 1200px wide. I request:
transform: {
width: 1600,
height: 900,
resize: 'cover'
}
A few more notes:
The blog post states "default mode maintains aspect ratio and the resize mode is fill", but the docs say that cover is the default mode.
The docs say, "If only one [width or height] parameter is specified, the image will be resized and cropped, maintaining the aspect ratio." I believe that with only one parameter, you could either resize or crop, but not both. I hope it's resize.
For cropping modes, is it always from the center? Are there plans to support other "gravity" modes?
[0] https://supabase.com/docs/guides/storage/image-transformatio...
The default resize mode is cover and the blog post had a typo. Fixed now, thanks!
> resize or crop
We crop by default since the default mode is cover.
> gravity
we will be adding crop with gravity soon.. currently the crop is always from the center
> requesting an image at a specific aspect ratio while not exceeding a maximum size.
I'll get back to you on this one - Inian had to get some sleep, it's very late (early) for him
I believe all resizing operations a user might realistically want can be achieved with three parameters: width, height, and crop. Additional x and y parameters (floats between 0.0 and 1.0) could be used for setting the focal point of the crop box.
Examples:
source.jpg?width=400
source.jpg?height=300
source.jpg?width=400&height=300
source.jpg?width=400&height=300&crop=true