E-Commerce Image Pipeline

Transform raw product photos and generate promotional graphics with pricing and branding overlays.

Who this is for

E-commerce teams use this pipeline to process product imagery end-to-end. First optimize a raw product photo with resize and enhancement, then generate a promotional banner using the processed image — ready for your storefront and marketing campaigns.

# Step 1: Optimize product photo
TRANSFORM_RESULT=$(curl -s -X POST https://api.iterationlayer.com/image-transformation/v1/transform \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "file": {
      "type": "url",
      "name": "product-photo.jpg",
      "url": "https://example.com/products/raw-photo.jpg"
    },
    "operations": [
      { "type": "resize", "width_in_px": 1000, "height_in_px": 1000, "fit": "contain" },
      { "type": "auto_contrast" },
      { "type": "sharpen", "sigma": 1.5 },
      { "type": "convert", "format": "webp", "quality": 90 }
    ]
  }')

PRODUCT_IMAGE_BASE64=$(echo "$TRANSFORM_RESULT" | jq -r '.data.buffer')

# Step 2: Generate promotional banner with optimized product photo
curl -X POST https://api.iterationlayer.com/image-generation/v1/generate \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d "{
    \"dimensions\": { \"width\": 1200, \"height\": 628 },
    \"output_format\": \"png\",
    \"layers\": [
      {
        \"index\": 0,
        \"type\": \"solid-color-background\",
        \"hex_color\": \"#1a1a2e\"
      },
      {
        \"index\": 1,
        \"type\": \"static-image\",
        \"buffer\": \"$PRODUCT_IMAGE_BASE64\",
        \"position\": { \"x\": 600.0, \"y\": 64.0 },
        \"dimensions\": { \"width\": 500, \"height\": 500 }
      },
      {
        \"index\": 2,
        \"type\": \"text\",
        \"text\": \"Flash Sale\",
        \"font_name\": \"Montserrat\",
        \"font_size_in_px\": 56,
        \"text_color\": \"#FFFFFF\",
        \"font_weight\": \"Bold\",
        \"position\": { \"x\": 60.0, \"y\": 180.0 },
        \"dimensions\": { \"width\": 500, \"height\": 80 }
      },
      {
        \"index\": 3,
        \"type\": \"text\",
        \"text\": \"Save 25%\",
        \"font_name\": \"Montserrat\",
        \"font_size_in_px\": 36,
        \"text_color\": \"#E94560\",
        \"font_weight\": \"Bold\",
        \"position\": { \"x\": 60.0, \"y\": 280.0 },
        \"dimensions\": { \"width\": 500, \"height\": 60 }
      }
    ]
  }"
import { IterationLayer } from "iterationlayer";
const client = new IterationLayer({ apiKey: "YOUR_API_KEY" });

// Step 1: Optimize product photo
const transformResult = await client.transform({
  file: {
    type: "url",
    name: "product-photo.jpg",
    url: "https://example.com/products/raw-photo.jpg",
  },
  operations: [
    { type: "resize", width_in_px: 1000, height_in_px: 1000, fit: "contain" },
    { type: "auto_contrast" },
    { type: "sharpen", sigma: 1.5 },
    { type: "convert", format: "webp", quality: 90 },
  ],
});

const productImageBase64 = transformResult.data.buffer;

// Step 2: Generate promotional banner with optimized product photo
const bannerResult = await client.generateImage({
  dimensions: { width_in_px: 1200, height_in_px: 628 },
  output_format: "png",
  layers: [
    {
      index: 0,
      type: "solid-color-background",
      hex_color: "#1a1a2e",
    },
    {
      index: 1,
      type: "static-image",
      buffer: productImageBase64,
      position: { x: 600.0, y: 64.0 },
      dimensions: { width_in_px: 500, height_in_px: 500 },
    },
    {
      index: 2,
      type: "text",
      text: "Flash Sale",
      font_name: "Montserrat",
      font_size_in_px: 56,
      text_color: "#FFFFFF",
      font_weight: "Bold",
      position: { x: 60.0, y: 180.0 },
      dimensions: { width_in_px: 500, height_in_px: 80 },
    },
    {
      index: 3,
      type: "text",
      text: "Save 25%",
      font_name: "Montserrat",
      font_size_in_px: 36,
      text_color: "#E94560",
      font_weight: "Bold",
      position: { x: 60.0, y: 280.0 },
      dimensions: { width_in_px: 500, height_in_px: 60 },
    },
  ],
});

await Bun.write("banner.png", Buffer.from(bannerResult.data.buffer, "base64"));
import base64

from iterationlayer import IterationLayer
client = IterationLayer(api_key="YOUR_API_KEY")

# Step 1: Optimize product photo
transform_result = client.transform(
    file={
        "type": "url",
        "name": "product-photo.jpg",
        "url": "https://example.com/products/raw-photo.jpg",
    },
    operations=[
        {"type": "resize", "width_in_px": 1000, "height_in_px": 1000, "fit": "contain"},
        {"type": "auto_contrast"},
        {"type": "sharpen", "sigma": 1.5},
        {"type": "convert", "format": "webp", "quality": 90},
    ],
)

product_image_base64 = transform_result["data"]["buffer"]

# Step 2: Generate promotional banner with optimized product photo
banner_result = client.generate_image(
    dimensions={"width_in_px": 1200, "height_in_px": 628},
    output_format="png",
    layers=[
        {
            "index": 0,
            "type": "solid-color-background",
            "hex_color": "#1a1a2e",
        },
        {
            "index": 1,
            "type": "static-image",
            "buffer": product_image_base64,
            "position": {"x": 600.0, "y": 64.0},
            "dimensions": {"width_in_px": 500, "height_in_px": 500},
        },
        {
            "index": 2,
            "type": "text",
            "text": "Flash Sale",
            "font_name": "Montserrat",
            "font_size_in_px": 56,
            "text_color": "#FFFFFF",
            "font_weight": "Bold",
            "position": {"x": 60.0, "y": 180.0},
            "dimensions": {"width_in_px": 500, "height_in_px": 80},
        },
        {
            "index": 3,
            "type": "text",
            "text": "Save 25%",
            "font_name": "Montserrat",
            "font_size_in_px": 36,
            "text_color": "#E94560",
            "font_weight": "Bold",
            "position": {"x": 60.0, "y": 280.0},
            "dimensions": {"width_in_px": 500, "height_in_px": 60},
        },
    ],
)

with open("banner.png", "wb") as f:
    f.write(base64.b64decode(banner_result["data"]["buffer"]))
package main

import (
    "encoding/base64"
    "os"

    il "github.com/iterationlayer/sdk-go"
)

func main() {
    client := il.NewClient("YOUR_API_KEY")

    // Step 1: Optimize product photo
    transformResult, err := client.Transform(il.TransformRequest{
        File: il.NewFileFromURL("product-photo.jpg", "https://example.com/products/raw-photo.jpg"),
        Operations: []il.TransformOperation{
            il.NewResizeOperation(1000, 1000, "contain"),
            {Type: "auto_contrast"},
            il.NewSharpenOperation(1.5),
            il.NewConvertOperation("webp"),
        },
    })
    if err != nil {
        panic(err)
    }

    // Step 2: Generate promotional banner with optimized product photo
    bannerResult, err := client.GenerateImage(il.GenerateImageRequest{
        Dimensions:   il.Dimensions{WidthInPx: 1200, HeightInPx: 628},
        OutputFormat: "png",
        Layers: []il.Layer{
            il.NewSolidColorBackgroundLayer(0, "#1a1a2e"),
            il.NewStaticImageLayer(1, transformResult.Data.Buffer,
                il.Position{X: 600.0, Y: 64.0}, il.Dimensions{WidthInPx: 500, HeightInPx: 500}),
            il.NewTextLayer(2, "Flash Sale", "Montserrat", 56, "#FFFFFF",
                il.Position{X: 60.0, Y: 180.0}, il.Dimensions{WidthInPx: 500, HeightInPx: 80}),
            il.NewTextLayer(3, "Save 25%", "Montserrat", 36, "#E94560",
                il.Position{X: 60.0, Y: 280.0}, il.Dimensions{WidthInPx: 500, HeightInPx: 60}),
        },
    })
    if err != nil {
        panic(err)
    }

    decoded, _ := base64.StdEncoding.DecodeString(bannerResult.Data.Buffer)
    os.WriteFile("banner.png", decoded, 0644)
}

Related Recipes

Start building in minutes

Free trial credits included. No credit card required.