Trimming product photo backgrounds for a consistent catalogue grid

A product grid looks uneven when each photo has a different amount of white space around the product. One supplier frames a chair tightly, another leaves half the frame empty, and the grid shows the same chair at two different sizes. This post explains how a trim operation removes that surrounding space, how to pick a colour tolerance with actual numbers, and how to fit the trimmed product into a fixed tile without cropping it.

What marketplaces ask for

The large marketplaces publish framing rules for product images. Their rules are a useful target for your own grid, too.

Google Merchant Center recommends that the product take up no less than 75% and no more than 90% of the full image. It recommends a solid white or transparent background. It asks merchants not to add borders and not to scale up small images.

Amazon’s product photography guide for sellers recommends a white background with RGB values of 255, 255, 255, where RGB stands for red, green and blue. It also tells sellers to have the product fill 85% or more of the frame.

Both rules assume the product sits at a consistent scale inside the frame. Photos from mixed sources do not always arrive that way, and trim is the step that fixes it.

How trim works

Focal’s trim option removes the uniform space around an image. It reads a reference colour from a corner pixel, the top-left by default or the bottom-right if you ask for it. It then removes the rows and columns around the edges whose pixels are close enough to that colour. What remains is the smallest rectangle that holds everything else.

“Close enough” is the tolerance. Focal measures the Euclidean distance between the reference colour and each pixel in RGB space. For an RGB image, the tolerance runs from 0 to 442. The upper bound is the distance from black to white:

√(255² + 255² + 255²) = 255 × √3 ≈ 441.7

With no tolerance given, Focal trims only pixels that match the reference colour exactly.

Choosing a tolerance with real numbers

Tolerance is easier to set once you compute a few distances from pure white (255, 255, 255):

Pixel colour	Distance from white
Off-white (245, 245, 245)	√(3 × 10²) ≈ 17.3
Light grey (235, 235, 235)	√(3 × 20²) ≈ 34.6
Grey (209, 209, 209)	√(3 × 46²) ≈ 79.7
Cream (250, 240, 220)	√(5² + 15² + 35²) ≈ 38.4

A tolerance of 80 treats every neutral grey from white down to about (209, 209, 209) as background. That setting handles off-white studio backdrops and uneven lighting. It also treats the cream colour in the last row as background. A cream sofa photographed on white can lose its pale edges at that setting, because the trim stops only where it meets pixels further than 80 from white.

Use these rules when you pick a value:

• Start between 20 and 40 if your photos come from a studio with a clean white backdrop. That range covers the off-white and light grey rows in the table.
• Raise it for photos with grey or uneven backgrounds.
• Lower it for catalogues with white, cream or pale grey products.
• Test with your palest product before applying a value to the whole catalogue.

Shadows need their own check. A shadow under a product that is further from white than the tolerance counts as part of the product. The trimmed rectangle then includes the shadow, and the product sits slightly higher in its tile than a shadowless one.

Choosing the corner

The reference corner should always show background. Top-left is the default. Switch to bottom-right when a supplier’s photos have something in the top-left corner, such as a gradient or a stray prop.

Trim has little effect on lifestyle photos. In a room scene the edge pixels are not uniform, so few edge rows match the reference colour, and trim removes little or nothing. Run lifestyle and studio photos through different URLs if your catalogue mixes both.

Fitting the trimmed product into a tile

After the trim, each product has a different shape. The fit-in option scales the whole image to fit inside a box without cropping. The fill filter then pads the result out to the exact box size with a colour you choose, and centres the image in the box. The filter also takes a second argument that flattens transparent areas onto the fill colour.

Here are two supplier photos, both 2000 by 2000 pixels, run through a 600 by 600 tile:

Photo	After trim	After fit-in 600x600	After fill
Wide chair	1200 × 800	600 × 400	600 × 600, 100px of white above and below
Tall bottle	900 × 1500	360 × 600	600 × 600, 120px of white left and right

Both products now touch the edges of the tile on their longer side. Without the trim, both photos would scale by the same factor of 0.3. The chair would be 360 pixels wide and the bottle 450 pixels tall, each floating in whatever margin its photographer left.

Adding the margin back

Trim plus fit-in gives every product a 100% fill on its longer side. That is more than Google’s 90% recommendation, and it can look cramped in a grid. For your own site, add the margin in CSS with the same background colour:

.product-tile {
  background: #fff;
  padding: 18px;
}

.product-tile img {
  display: block;
  width: 100%;
  height: auto;
}

In a 300-pixel tile, 18 pixels of padding on each side leaves 264 pixels for the image. The product’s longer side then fills 88% of the tile, the same for every product.

Marketplace feeds are different. The feed needs the margin inside the file itself, and trim removes it. For feed images, use sources that the photographer framed with the margin the marketplace asks for, and skip the trim.

Transparent cutouts

Some suppliers send PNG cutouts with transparent backgrounds. Google warns that a transparent background on a light-coloured product can show as black. Flattening the transparency onto white removes that risk. In Focal, fill(white,1) fills both the padding and the transparent areas.

Doing this with Focal

Focal supports trim with a tolerance, fit-in, and the fill, quality and format filters, so the whole pipeline fits in one URL. This one trims from the top-left pixel at tolerance 80, fits the result inside 300 by 300 pixels, fills the rest with white including any transparent areas, and returns WebP at quality 75. The Focal docs list every option.

https://img.focaltool.com/your-key/unsafe/trim:top-left:80/fit-in/300x300/filters:fill(white,1):quality(75):format(webp)/products/chair.jpg

Before you roll a setting out, run it on twenty products that cover the extremes of your catalogue. Include your palest product, one with a strong shadow, one tall and narrow, and one lifestyle photo. If the pale product keeps its edges and the tall product sits centred in its tile, the tolerance is right for the rest.

Sources

• Focal docs, URL API
• Google Merchant Center Help, Image link [image_link]
• Amazon, How to take product photos