# Convert image formats

Convert between JPEG, PNG, WebP, AVIF, and GIF

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

## API

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

```typescript
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/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://polaroid-app.com/uploads/photo.png",
    "kind": "image",
    "options": {
        "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://polaroid-app.com/uploads/photo.png",
  "kind": "image",
  "options": {
    "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>

## CLI

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

## Format guide

| From | To   | Why                                         |
| ---- | ---- | ------------------------------------------- |
| PNG  | WebP | 25-35% smaller, keeps transparency          |
| JPEG | WebP | 25-30% smaller                              |
| JPEG | AVIF | 40-50% smaller                              |
| PNG  | JPEG | Much smaller when transparency isn't needed |
| Any  | PNG  | Lossless, good for screenshots              |

## With resizing

Convert and resize in one step:

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

## Multiple formats for `<picture>`

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

```html
<picture>
  <source srcset="photo.avif" type="image/avif" />
  <source srcset="photo.webp" type="image/webp" />
  <img src="photo.jpg" alt="Uploaded photo" />
</picture>
```