Hacker News new | ask | show | jobs
by LukeLambert 1282 days 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-transformatio...

2 comments

> 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

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.
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