# Convert images to AVIF

Use AVIF for the smallest possible image files

"Gallery" (a photography site like 500px) serves thousands of high-resolution photos. AVIF cuts image bandwidth by 40-50% compared to JPEG with no visible difference.

## API

<CodeGroup labels={["CLI", "TypeScript", "Python", "curl"]}>
```bash
ittybit image \
  -i https://gallery-app.com/photos/sunset.jpg \
  --format avif \
  --quality high
```

```typescript
const task = {
  input: 'https://gallery-app.com/photos/sunset.jpg',
  kind: 'image',
  options: {
    format: 'avif',
    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://gallery-app.com/photos/sunset.jpg",
    "kind": "image",
    "options": {
        "format": "avif",
        "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://gallery-app.com/photos/sunset.jpg",
  "kind": "image",
  "options": {
    "format": "avif",
    "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 sunset.jpg \
  -o sunset.avif \
  --quality high
```

## Size comparison

For a typical 4000x3000 photo:

| Format | Quality | Approximate size |
| ------ | ------- | ---------------- |
| JPEG   | high    | 2.5 MB           |
| WebP   | high    | 1.8 MB           |
| AVIF   | high    | 1.3 MB           |

AVIF at `high` quality is roughly half the size of JPEG.

## With resizing

```bash
ittybit image \
  -i sunset.jpg \
  -o sunset-1200.avif \
  --width 1200 \
  --quality high

ittybit image \
  -i sunset.jpg \
  -o sunset-600.avif \
  --width 600 \
  --quality high
```

## Browser support fallback

AVIF is supported in Chrome, Firefox, and Safari 16+. For older browsers, serve WebP or JPEG:

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

```bash
ittybit image \
  -i sunset.jpg \
  -o sunset.avif \
  --width 1200 \
  --quality high

ittybit image \
  -i sunset.jpg \
  -o sunset.webp \
  --width 1200 \
  --quality high

ittybit image \
  -i sunset.jpg \
  -o sunset.jpg \
  --width 1200 \
  --quality high
```