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 \
--cloudconst 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:
| 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
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