E-Commerce & Retail

Managing product photography for an online storefront is notoriously difficult. Retailers often deal with thousands of SKUs, requiring varying aspect ratios for different platforms (e.g., square for Instagram, portrait for TikTok, landscape for web banners).

Picsha AI eliminates the need to manually crop, color-correct, and strip backgrounds from millions of product shots by treating your raw assets as code.

Core Value Proposition

1. Automated Background Removal: Say goodbye to the manual pen tool in Photoshop. Upload with "remove_background": true and Picsha computes an alpha cutout at ingest — ready for instant background compositing at render time, with on-demand generative removal (bg_rem) available for everything else.
2. Infinite Aspect Ratios Without Storage Bloat: Never upload 10 different sizes of the same image again. Keep the high-resolution master and use Picsha's Edge delivery network to dynamically render the exact dimensions your React or Next.js app needs at request time.
3. Smart Framing: Picsha's AI can automatically detect the primary product and center it (pos="attention"), ensuring your products never look improperly cropped on a category grid.

React SDK Integration

For e-commerce frontends (like Next.js, Remix, or Vite), our @picsha-ai/react provides the native <PicshaImage> component. It automatically handles format negotiation (sending WebP to modern browsers and JPEG to legacy ones) and integrates directly with our Transformation layer.

1. The Perfect Product Grid Image

Here is how you display a uniformly padded, background-free product image on an e-commerce catalog page. Notice how we specify removeBackground={true} and force a pure white background on a 1:1 aspect ratio.

removeBackground is a billed generative parameter, so a browser cannot request it anonymously — sign the URL on your server (in a Next.js server component, a loader, or your own API route) and hand the finished URL to the component:

// server — mint the signature once per product image
import { buildPicshaQueryParams } from '@picsha-ai/react';

const transforms = { width: 600, aspectRatio: '1:1', fit: 'contain', removeBackground: true, background: 'white', format: 'auto' };
const { signedUrl } = await picshaPost(`/assets/${assetId}/sign-delivery`, {
  urlPath: `/render/${assetId}`,
  queryParams: buildPicshaQueryParams(transforms),
});

// client
import { PicshaImage } from '@picsha-ai/react';

export default function ProductCard({ signedUrl, productName }) {
  return (
    <div className="product-card">
      <PicshaImage
        signedUrl={signedUrl}
        alt={`Buy ${productName}`}
        className="w-full h-auto rounded-lg shadow-sm"
      />
      <h3>{productName}</h3>
    </div>
  );
}

[!TIP] Cutouts are computed once per unique image and cached, so the signed URL for each product is stable — generate it at build time or cache it alongside the product record. If you ingest with "remove_background": true, the cutout already exists before the first render. See Transformations.

2. Generative Edits for Social Media

If you need to change the orientation of an image for a TikTok campaign but the product is cut off, use MIMI to regenerate the surroundings on the fly. Pass the prompt via the mimi prop (or swap just the backdrop with mimiBg), and — as above — sign the URL server-side, because generative parameters are never served anonymously:

// server
const { signature } = await picshaPost(`/assets/${assetId}/sign-delivery`, {
  urlPath: `/v1/assets/${assetId}/render`,
  queryParams: buildPicshaQueryParams({
    aspectRatio: '9:16',            // TikTok / Reels ratio
    fit: 'cover',
    mimiBg: 'realistic product studio background',
    format: 'webp',
  }),
});

// client — props must match exactly what was signed
<PicshaImage
    deliveryEndpoint="https://cdn.picsha.ai"
    assetId={assetId}
    aspectRatio="9:16"
    fit="cover"
    mimiBg="realistic product studio background"
    format="webp"
    sig={signature}
/>

Billed once per generative edit at the MIMI rate for the tier you choose (mimiMode); repeat requests for the identical URL come from the derivative cache free of charge.

[!NOTE] Integrating this approach helps your Next.js e-commerce app achieve top Lighthouse performance scores by completely offloading heavy image manipulation and storage to the Picsha Edge. For more React components, see the React SDK Reference page.