22 ms·

Supabase Engineer here There were a lot of primitives we built to ship image resizing - Storage events exposed via webhooks, rate limiting, a queue on top of P

by inian 4y ago

Supabase Engineer here 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.

LukeLambert 4y ago
In nearly two decades developing for the web, I've never found a good reason to enlarge an image server-side, so thank you for anticipating that footgun. So many of your competitors get it wrong. 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' } Will the returned image be 675px tall, maintaining the 16×9 aspect ratio I want? 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-transformations https://supabase.com/docs/guides/storage/image-transformatio...
- kiwicopple 4y ago
  > 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 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
  - LukeLambert 4y ago
    Thank you for following up. IMHO, object-fit is not the right model for server-side image manipulation, since its behavior is only specified when both width and height are supplied. I've also never seen a real world use case for stretching, squeezing, padding, or enlarging images on the server. That should be done on the client. I mentioned some of the same issues on the Cloudflare forum when they announced an image resizing product based on object-fit. 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 Iff source width is greater than 400px, scale down to 400px wide. source.jpg?height=300 Iff source height is greater than 300px, scale down to 300px high. source.jpg?width=400&height=300 Iff source width is greater than 400px or source height is greater than 300px, scale down to fit within a 400px by 300px box. source.jpg?width=400&height=300&crop=true Crop source to a 4x3 aspect ratio. Iff result is larger than 400px by 300px, scale down.
- swyx 4y ago
  actually, image upsizing is pretty much required for all of the AI Art generators. was even a big feature in SD 2.0. i'd love to have it as part of this API but itd probably cost too much
niklasd 4y ago
Great job! What are the implications on resizing regarding storage egress & download size? Can I expect both to be smaller when resizing an image?
- inian 4y ago
  Yes! If you resize your images correctly, your users use lesser data to load assets from Storage. A side benefit is you will be paying us lesser in egress fees.
babelfish 4y ago
Is image resizing built on top of Cloudflare too? https://developers.cloudflare.com/images/image-resizing/ https://developers.cloudflare.com/images/image-resizing/
- inian 4y ago
  We use imgproxy[1] for doing the resizing. We utilize open source services for the entire stack, so that you can self-host Supabase. [1] https://github.com/imgproxy/imgproxy https://github.com/imgproxy/imgproxy
d1l 4y ago
nginx already comes with: http://nginx.org/en/docs/http/ngx_http_image_filter_module.html http://nginx.org/en/docs/http/ngx_http_image_filter_module.h...
- kiwicopple 4y ago
  We assessed a few resizing tools - imgproxy, Imaginary, Sharp, etc. We went with imgproxy mostly because of it's feature-completeness (for example, it supports AVIF and it looks like nginx does not)

by inian 4y ago

LukeLambert 4y ago

In nearly two decades developing for the web, I've never found a good reason to enlarge an image server-side, so thank you for anticipating that footgun. So many of your competitors get it wrong. 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' } Will the returned image be 675px tall, maintaining the 16×9 aspect ratio I want? 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-transformations https://supabase.com/docs/guides/storage/image-transformatio...

kiwicopple 4y ago
> 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 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
- LukeLambert 4y ago
  Thank you for following up. IMHO, object-fit is not the right model for server-side image manipulation, since its behavior is only specified when both width and height are supplied. I've also never seen a real world use case for stretching, squeezing, padding, or enlarging images on the server. That should be done on the client. I mentioned some of the same issues on the Cloudflare forum when they announced an image resizing product based on object-fit. 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 Iff source width is greater than 400px, scale down to 400px wide. source.jpg?height=300 Iff source height is greater than 300px, scale down to 300px high. source.jpg?width=400&height=300 Iff source width is greater than 400px or source height is greater than 300px, scale down to fit within a 400px by 300px box. source.jpg?width=400&height=300&crop=true Crop source to a 4x3 aspect ratio. Iff result is larger than 400px by 300px, scale down.
swyx 4y ago
actually, image upsizing is pretty much required for all of the AI Art generators. was even a big feature in SD 2.0. i'd love to have it as part of this API but itd probably cost too much

niklasd 4y ago

Great job! What are the implications on resizing regarding storage egress & download size? Can I expect both to be smaller when resizing an image?

inian 4y ago
Yes! If you resize your images correctly, your users use lesser data to load assets from Storage. A side benefit is you will be paying us lesser in egress fees.

babelfish 4y ago

Is image resizing built on top of Cloudflare too? https://developers.cloudflare.com/images/image-resizing/ https://developers.cloudflare.com/images/image-resizing/

inian 4y ago
We use imgproxy[1] for doing the resizing. We utilize open source services for the entire stack, so that you can self-host Supabase. [1] https://github.com/imgproxy/imgproxy https://github.com/imgproxy/imgproxy

d1l 4y ago

nginx already comes with: http://nginx.org/en/docs/http/ngx_http_image_filter_module.html http://nginx.org/en/docs/http/ngx_http_image_filter_module.h...

kiwicopple 4y ago
We assessed a few resizing tools - imgproxy, Imaginary, Sharp, etc. We went with imgproxy mostly because of it's feature-completeness (for example, it supports AVIF and it looks like nginx does not)