Auto-Crop Product Images to Any Aspect Ratio — Without Losing the Product

Supplier Images Are a Mess

If you run a marketplace, a catalog, or any e-commerce storefront, you know the problem. Supplier images arrive in every possible composition. The product is centered in one image, shoved into the corner in another. One supplier sends 2000x2000 squares. Another sends 4000x2000 landscapes with the product occupying 30% of the frame. A third sends photos shot on a warehouse floor with packing materials in the background.

Your listing pages need consistent thumbnails. Square for grid views. 4:3 for cards. 16:9 for banners. Every product, every aspect ratio, every time.

The manual approach: someone opens each image in Photoshop, finds the product, crops to the right dimensions, exports. At 10 images per supplier, 50 suppliers, and weekly updates, that’s a full-time job.

The Image Transformation API’s smart_crop operation detects the product in the image and crops around it to any target dimensions. No manual review. No Photoshop.

Smart Crop for Product Images

Smart crop uses AI object detection to find the product in the image before deciding where to crop. It identifies the bounding box of the main object and builds the crop region around it.

import { IterationLayer } from "iterationlayer";
const client = new IterationLayer({ apiKey: "YOUR_API_KEY" });

const { data: { buffer: thumbnailBase64 } } = await client.transform({
  file: { type: "url", name: "supplier-image.jpg", url: "https://cdn.example.com/supplier/product-001.jpg" },
  operations: [
    { type: "smart_crop", width_in_px: 1000, height_in_px: 1000 },
  ],
});

const thumbnailBuffer = Buffer.from(thumbnailBase64, "base64");

The result is a 1000x1000 square with the product centered, regardless of where it was in the original image. No coordinates. No subject position hints.

Marketplace Dimensions

Different contexts need different aspect ratios. A product grid uses squares. A featured product banner uses landscape. A comparison view uses portrait. Generate all of them from the same source image.

Square grid (1:1):

const operations = [
  { type: "smart_crop", width_in_px: 1000, height_in_px: 1000 },
  { type: "convert", format: "webp", quality: 85 },
];

Product card (4:3):

const operations = [
  { type: "smart_crop", width_in_px: 800, height_in_px: 600 },
  { type: "convert", format: "webp", quality: 85 },
];

Category banner (16:9):

const operations = [
  { type: "smart_crop", width_in_px: 1600, height_in_px: 900 },
  { type: "convert", format: "jpeg", quality: 90 },
];

Mobile listing (3:4):

const operations = [
  { type: "smart_crop", width_in_px: 600, height_in_px: 800 },
  { type: "convert", format: "webp", quality: 85 },
];

Same source image, four aspect ratios, product centered in every one. Smart crop adjusts the crop region for each target dimension, always keeping the detected product in frame.

Clean Backgrounds for Listings

Supplier images often come on non-white backgrounds — gray studio backdrops, transparent PNGs with checkerboard artifacts, or photos with shadows that don’t match your site’s design. Adding remove_transparency to the pipeline normalizes the background to white.

const operations = [
  { type: "smart_crop", width_in_px: 1000, height_in_px: 1000 },
  { type: "remove_transparency", hex_color: "#ffffff" },
  { type: "sharpen", sigma: 0.5 },
  { type: "convert", format: "jpeg", quality: 90 },
];

This pipeline smart-crops the product, fills any transparent areas with white, applies a light sharpen, and outputs a JPEG. Four operations, one API call. The result is a clean, consistent product thumbnail on a white background.

Batch Processing a Supplier Catalog

A new supplier sends 500 product images. Each one needs square thumbnails for the grid and landscape crops for the card view. Process the entire catalog in parallel.

import { IterationLayer } from "iterationlayer";
const client = new IterationLayer({ apiKey: "YOUR_API_KEY" });

const supplierImages = [
  { sku: "SKU-001", url: "https://cdn.example.com/supplier/SKU-001.jpg" },
  { sku: "SKU-002", url: "https://cdn.example.com/supplier/SKU-002.jpg" },
  { sku: "SKU-003", url: "https://cdn.example.com/supplier/SKU-003.jpg" },
  // ... hundreds more
];

const targetDimensions = [
  { suffix: "square", width_in_px: 1000, height_in_px: 1000 },
  { suffix: "card", width_in_px: 800, height_in_px: 600 },
];

const processImage = async (image: { sku: string; url: string }) => {
  const variants = await Promise.all(
    targetDimensions.map(async (target) => {
      const { data: { buffer } } = await client.transform({
        file: { type: "url", name: `${image.sku}.jpg`, url: image.url },
        operations: [
          { type: "smart_crop", width_in_px: target.width_in_px, height_in_px: target.height_in_px },
          { type: "remove_transparency", hex_color: "#ffffff" },
          { type: "sharpen", sigma: 0.5 },
          { type: "convert", format: "webp", quality: 85 },
        ],
      });

      return { sku: image.sku, variant: target.suffix, buffer: Buffer.from(buffer, "base64") };
    })
  );

  return variants;
};

// Process in chunks to manage concurrency
const chunkSize = 10;
const allResults = [];

for (let i = 0; i < supplierImages.length; i += chunkSize) {
  const chunk = supplierImages.slice(i, i + chunkSize);
  const chunkResults = await Promise.all(chunk.map(processImage));
  allResults.push(...chunkResults.flat());
}

Each product image generates two variants — square and card. Each variant is smart-cropped, cleaned up, sharpened, and converted to WebP. Processing in chunks of 10 (20 API calls per chunk — 10 images times 2 variants) keeps the concurrency manageable.

For 500 supplier images, this produces 1,000 optimized thumbnails without anyone opening an image editor.

Why Center Crop Fails for Product Images

Center crop assumes the subject is in the center. For professional product photography shot on a clean background, this assumption usually holds. For supplier images, it doesn’t.

Common failure modes:

• Product in the corner. The supplier photographed the product from an angle, placing it in the lower-right quadrant. A center crop shows mostly background.
• Multiple products in frame. The supplier included accessories or packaging. A center crop might show the space between items rather than the main product.
• Extreme aspect ratio mismatch. The source is a wide landscape, the target is a square. A center crop takes a vertical strip from the middle, which might miss a product positioned to either side.
• Small product in large frame. The supplier used a wide shot with lots of white space. A center crop preserves the white space and shrinks the product further.

Smart crop handles all of these by detecting the product’s bounding box first. The crop region is built around the product, not around the image center.

The Pipeline for Ongoing Updates

Supplier catalogs aren’t one-time imports. New products arrive weekly. Existing products get updated photos. Seasonal collections rotate in and out. The thumbnail pipeline runs continuously.

Integrating smart crop into an ongoing pipeline is the same pattern as batch processing — trigger the API call when a new supplier image is uploaded or updated, generate all required variants, store the results.

const onSupplierImageUploaded = async (sku: string, imageUrl: string) => {
  const variants = await Promise.all([
    generateVariant(sku, imageUrl, { width_in_px: 1000, height_in_px: 1000, suffix: "square" }),
    generateVariant(sku, imageUrl, { width_in_px: 800, height_in_px: 600, suffix: "card" }),
    generateVariant(sku, imageUrl, { width_in_px: 1600, height_in_px: 900, suffix: "banner" }),
  ]);

  // Upload variants to CDN, update database references
  return variants;
};

No manual step. No review queue. Every supplier image gets consistent, product-centered thumbnails at every required dimension the moment it arrives.

Get Started

Check the docs for the full smart crop and operation reference. The TypeScript and Python SDKs handle authentication and response parsing.

Sign up for a free account — no credit card required. Take your most awkwardly composed supplier image — the one where the product is in the corner — and run smart crop on it.