# Optimize product images for e-commerce

Convert and resize product photos for fast-loading store pages

"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:

<CodeGroup labels={["CLI", "TypeScript", "Python", "curl"]}>
```bash
ittybit image \
  -i https://storefront-app.com/uploads/product-photo.png \
  --width 1200 \
  --format webp \
  --quality high
```

```typescript
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();
```

```python

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()
```

```bash
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"
```

</CodeGroup>

Listing thumbnail:

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

Cart icon:

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

## CLI

```bash
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:

```bash
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.