Generate responsive image sizes

“Mosaic” (a portfolio site builder like Squarespace) needs every uploaded image in multiple sizes for responsive srcset attributes.

The sizes

<img
  srcset="photo-320.webp 320w, photo-640.webp 640w, photo-1280.webp 1280w"
  sizes="(max-width: 640px) 100vw, 50vw"
  src="photo-640.webp"
  alt="Portfolio piece"
/>

API

ittybit image \
  -i https://mosaic-app.com/uploads/photo.jpg \
  --width 1280 \
  --format webp \
  --quality high \
  --cloud

const task = {
  input: "https://mosaic-app.com/uploads/photo.jpg",
  kind: "image",
  options: {
    width: 1280,
    format: "webp",
    quality: "high",
  },
};

const res = await fetch("https://api.ittybit.com/tasks", {
  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://mosaic-app.com/uploads/photo.jpg",
    "kind": "image",
    "options": {
        "width": 1280,
        "format": "webp",
        "quality": "high",
    },
}

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

TASK='{
  "input": "https://mosaic-app.com/uploads/photo.jpg",
  "kind": "image",
  "options": {
    "width": 1280,
    "format": "webp",
    "quality": "high"
  }
}'

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

Repeat with width: 640 and width: 320.

CLI

ittybit image \
  -i photo.jpg \
  -o photo-1280.webp \
  --width 1280 \
  --quality high

ittybit image \
  -i photo.jpg \
  -o photo-640.webp \
  --width 640 \
  --quality high

ittybit image \
  -i photo.jpg \
  -o photo-320.webp \
  --width 320 \
  --quality high

Height auto-calculates to preserve aspect ratio.

Format choice

Format	Best for
`webp`	Default choice — 25-35% smaller than JPEG, wide support
`avif`	Smallest files, good for bandwidth-constrained users
`jpeg`	Maximum compatibility
`png`	Screenshots, diagrams, anything with text

With AVIF fallback

Serve AVIF to modern browsers, WebP to the rest:

ittybit image \
  -i photo.jpg \
  -o photo-640.avif \
  --width 640 \
  --quality high

ittybit image \
  -i photo.jpg \
  -o photo-640.webp \
  --width 640 \
  --quality high

<picture>
  <source srcset="photo-640.avif" type="image/avif" />
  <img src="photo-640.webp" alt="Portfolio piece" />
</picture>