Optimize product images for e-commerce

View Markdown

“Storefront” (a shop builder like Shopify) needs product images in multiple sizes — full detail for zoom, medium for listings, small for cart thumbnails — all in modern formats.

API

Full-size product image:

ittybit image \
  -i https://storefront-app.com/uploads/product-photo.png \
  --width 1200 \
  --format webp \
  --quality high

const task = {
  input: 'https://storefront-app.com/uploads/product-photo.png',
  kind: 'image',
  options: {
    width: 1200,
    format: 'webp',
    quality: 'high',
  },
};

const res = await fetch('https://api.ittybit.com/jobs', {
  method: 'POST',
  headers: {
    Authorization: `Bearer ${process.env.ITTYBIT_API_KEY}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(task),
});
const data = await res.json();

import requests

task = {
    "input": "https://storefront-app.com/uploads/product-photo.png",
    "kind": "image",
    "options": {
        "width": 1200,
        "format": "webp",
        "quality": "high",
    },
}

res = requests.post(
    "https://api.ittybit.com/jobs",
    headers={"Authorization": f"Bearer {api_key}"},
    json=task,
)
data = res.json()

TASK='{
  "input": "https://storefront-app.com/uploads/product-photo.png",
  "kind": "image",
  "options": {
    "width": 1200,
    "format": "webp",
    "quality": "high"
  }
}'

curl -X POST https://api.ittybit.com/jobs \
  -H "Authorization: Bearer $ITTYBIT_API_KEY" \
  -H "Content-Type: application/json" \
  -d "$TASK"

Listing thumbnail:

{
  "input": "https://...",
  "kind": "image",
  "options": { "width": 400, "format": "webp", "quality": "medium" }
}

Cart icon:

{
  "input": "https://...",
  "kind": "image",
  "options": { "width": 100, "height": 100, "fit": "cover", "format": "webp", "quality": "medium" }
}

CLI

ittybit image \
  -i product-photo.png \
  -o product-full.webp \
  --width 1200 \
  --quality high

ittybit image \
  -i product-photo.png \
  -o product-listing.webp \
  --width 400 \
  --quality medium

ittybit image \
  -i product-photo.png \
  -o product-cart.webp \
  --width 100 \
  --height 100 \
  --fit cover \
  --quality medium

Square crops for grids

Product grids look best with consistent square images:

ittybit image \
  -i product-photo.png \
  -o product-square.webp \
  --width 600 \
  --height 600 \
  --fit cover

cover fills the square and crops the overflow. No letterboxing.

Format comparison for product photos

Format	File size	Quality	Transparency
`webp`	Small	Great	Yes
`avif`	Smallest	Great	Yes
`jpeg`	Medium	Great	No
`png`	Large	Perfect	Yes

Use WebP as default. Fall back to JPEG for email templates where WebP support is spotty.