How to output a rectangle image using the image client library in Sanity.io

Hey how do I always output a rectangle image using the image client library? I have pack shots of products that are always in a random size with a transparent background. I want the output image to be square though in a fixed size, where the product is fully visible. For some reason the image is always cropped, no matter what property I use for the “fit” parameter.
Original image:
https://cdn.sanity.io/images/mxqn1342/develop/cf033ca4c0dac8c511d2603912dc5bae94ab6008-1524x2200.png Output image using client library (
): https://cdn.sanity.io/images/mxqn1342/develop/cf033ca4c0dac8c511d2603912dc5bae94ab6[…]0.png?rect=0,338,1524,1524&w=800&h=800&fit=fillmax&auto=format Output image using client library (
): https://cdn.sanity.io/images/mxqn1342/develop/cf033ca4c0dac8c511d2603912dc5bae94ab6[…]2200.png?rect=0,338,1524,1524&w=800&h=800&fit=clip&auto=format
Any ideas?

Hi Maarten, something like this should work -

fillmax

without the

rect

and with a

bg

specified to fill the excess space in the image: https://cdn.sanity.io/images/mxqn1342/develop/cf033ca4c0dac8c511d2603912dc5bae94ab6008-1524x2200.png?w=800&h=800&fit=fillmax&bg=ffff .
A follow-up question would be how to get rid of the

rect

in the URL in this case, other than simply appending the params to the raw image URL. Not sure - let's investigate 🙂

Yeah I noticed indeed that the rect is appended automatically when using the client lib. Might be related to this issue on Github, not sure: https://github.com/sanity-io/image-url/issues/32
Also, the correct way to specify a transparent background is by setting the bg to a ARGB value, right? Like so: 00FFFFFF

Hmmzz transparency seems not supported in this case either..

I mean the “original” image is already transparent which isn’t respected during transformation

Seems like it's adding a solid background even when using transparency indeed: https://cdn.sanity.io/images/mxqn1342/develop/cf033ca4c0dac8c511d2603912dc5bae94ab6008-1524x2200.png?w=800&h=800&fit=fillmax&bg=0fff I'll share with the team.

No the original image is transparent so I expect the transformed image to respect that transparency
https://codepen.io/mdings/pen/MWmeeZE

Oh, I see. So the padding is transparent but the base image isn't. Thanks for reporting

I've pushed a fix for this issue, and have scheduled a CDN invalidation of the cache - so this should eventually be fixed. You should be able to test it by using slightly different parameters or appending another query parameter

Thanks ! That seems to be working now