Convert image formats

“Polaroid” (a photo sharing app like Instagram) accepts uploads in any format but needs to serve optimized WebP or AVIF to users.

API

ittybit image \
  -i https://polaroid-app.com/uploads/photo.png \
  --format webp \
  --quality high \
  --cloud
const task = {
  input: "https://polaroid-app.com/uploads/photo.png",
  kind: "image",
  options: {
    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://polaroid-app.com/uploads/photo.png",
    "kind": "image",
    "options": {
        "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://polaroid-app.com/uploads/photo.png",
  "kind": "image",
  "options": {
    "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"

CLI

ittybit image \
  -i photo.png \
  -o photo.webp \
  --quality high

Format guide

FromToWhy
PNGWebP25-35% smaller, keeps transparency
JPEGWebP25-30% smaller
JPEGAVIF40-50% smaller
PNGJPEGMuch smaller when transparency isn’t needed
AnyPNGLossless, good for screenshots

With resizing

Convert and resize in one step:

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

Multiple formats for <picture>

ittybit image \
  -i photo.png \
  -o photo.avif \
  --quality high

ittybit image \
  -i photo.png \
  -o photo.webp \
  --quality high

ittybit image \
  -i photo.png \
  -o photo.jpg \
  --quality high
<picture>
  <source srcset="photo.avif" type="image/avif" />
  <source srcset="photo.webp" type="image/webp" />
  <img src="photo.jpg" alt="Uploaded photo" />
</picture>