Convert images to AVIF

“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

ittybit image \
  -i https://gallery-app.com/photos/sunset.jpg \
  --format avif \
  --quality high \
  --cloud
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/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://gallery-app.com/photos/sunset.jpg",
    "kind": "image",
    "options": {
        "format": "avif",
        "quality": "high",
    },
}

res = requests.post(
    "https://api.ittybit.com/tasks",
    headers={"Authorization": f"Bearer {api_key}"},
    json=task,
)
data = res.json()
TASK='{
  "input": "https://gallery-app.com/photos/sunset.jpg",
  "kind": "image",
  "options": {
    "format": "avif",
    "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 sunset.jpg \
  -o sunset.avif \
  --quality high

Size comparison

For a typical 4000x3000 photo:

FormatQualityApproximate size
JPEGhigh2.5 MB
WebPhigh1.8 MB
AVIFhigh1.3 MB

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

With resizing

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:

<picture>
  <source srcset="sunset.avif" type="image/avif" />
  <source srcset="sunset.webp" type="image/webp" />
  <img src="sunset.jpg" alt="Sunset" />
</picture>
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