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

Looking at your URLs, I can see the issue - there's a rect=0,338,1524,1524 parameter being applied, which means Sanity is using the crop/hotspot data stored with your image document. This is overriding your fit parameter and causing the cropping you're seeing.

The solution is to use the ignoreImageParams() method in the image URL builder to tell Sanity to ignore any crop or hotspot data stored with the image:

product.image
  .ignoreImageParams()
  .size(800, 800)
  .fit('fillmax')
  .bg('transparent')
  .auto('format')
  .url()

The ignoreImageParams() method removes any stored crop/hotspot settings, so your fit parameter will actually work as intended.

For your use case with transparent product shots that need to remain fully visible in a square output, I'd recommend using fit('fillmax') combined with a transparent background:

product.image
  .ignoreImageParams()
  .size(800, 800)
  .fit('fillmax')
  .bg('transparent')
  .auto('format')
  .url()

Here's what the different fit modes do when you're not being overridden by crop data (from the image transformations documentation):

• fillmax - Places the image within the box you specify, never scaling up. If there's excess room, it fills with the bg color (perfect for your use case!)
• clip - Resizes to fit within bounds without cropping or distorting
• fill - Like clip, but fills any free area with the bg color
• max - Fits within the box but never scales up
• min - Resizes and crops to match aspect ratio without exceeding original dimensions
• crop - Crops the image to fill the size when both w and h are specified

For the transparent background padding, you can use bg('transparent') or specify a hex color like bg('ffffff') for white.

The key takeaway: Whenever you have existing crop/hotspot data on an image field but want to control the output differently, use ignoreImageParams() first in your chain to override the stored image parameters.