AVIF vs WebP vs JPEG XL 2025 — Perbandingan praktis berbasis pengukuran

Pada 2025, pilihan format gambar modern yang praktis adalah AVIF, WebP, dan JPEG XL (JXL). Dengan dataset yang mendekati produksi, kami membandingkannya dari sisi:

• Bitrate vs kualitas yang dirasakan (penilaian visual)
• Metrik objektif (SSIM/PSNR/Butteraugli, dll.)
• Waktu decode (CPU/SoC seluler) dan jejak memori
• Dukungan browser/ekosistem serta integrasi ke CDN/pipeline optimasi

Ringkasan utama

• Untuk banyak foto, efisiensi cenderung AVIF ≥ JPEG XL > WebP. Untuk tekstur/ilustrasi, WebP bisa tampil cukup baik.
• Kecepatan decode: WebP ≈ JPEG XL > AVIF. Kesenjangan melebar pada perangkat low‑end.
• Kompatibilitas: WebP tetap yang paling aman. AVIF luas didukung browser besar. JPEG XL mulai bangkit; rollout bertahap paling realistis saat ini.
• Strategi bergantung pada dukungan klien × karakteristik gambar × KPI performa (LCP/TTFB/CPU). Desain fallback krusial.

Metode dan dataset

Dataset

• Foto: lanskap/potret/malam/makanan/produk (1200–4000px)
• Ilustrasi/UI: grafik mirip vektor, logo, tangkapan layar
• Konten layar: teks berat, editor kode

Metrik dan pengukuran

# Referensi: skrip pseudo untuk konversi + metrik objektif
for img in dataset/*.jpg; do
  avifenc --min 20 --max 35 "$img" "out/${img##*/}.avif"
  cwebp -q 75 "$img" -o "out/${img##*/}.webp"
  cjxl "$img" "out/${img##*/}.jxl" -d 1.2

  # SSIM / PSNR (perintah pseudo)
  ssim "$img" "out/${img##*/}.avif" >> metrics.csv
  psnr "$img" "out/${img##*/}.avif" >> metrics.csv
done

Hasil singkat

Laju–distorsi (kualitas vs ukuran)

• Foto: AVIF sering paling kecil pada kualitas visual setara, penghematan 10–25%.
• Ilustrasi/layar: artefak WebP kurang terlihat, jarak ukuran menyempit. JXL unggul menjaga detail halus.

Performa decode (terasa/terukur)

• SoC seluler: WebP dan JXL cenderung menampilkan lebih awal. AVIF melambat saat kompresi agresif.
• Dampak LCP: Utamakan WebP/JXL untuk gambar hero; kompromi praktis “Hero = WebP/JXL, dalam artikel = AVIF”.

Panduan rollout praktis

Preset dan percabangan yang direkomendasikan

{
  "photo": {
    "primary": "avif:q=28-32",
    "fallback": ["webp:q=75", "jpeg:q=80"]
  },
  "ui_illustration": {
    "primary": "webp:q=75",
    "optional": "jxl:d=1.2",
    "fallback": ["png:optimized"]
  },
  "screenshot_text": {
    "primary": "jxl:d=1.0",
    "fallback": ["webp:q=80", "png:optimized"]
  }
}

srcset/sizes dan negosiasi format

• Gunakan negosiasi konten CDN (header Accept) untuk mengoptimalkan format dan ukuran secara bersamaan.
• Rancang sizes dengan akurat agar tidak over‑delivery. Gunakan /id/tools/srcset-generator.

Strategi cache

• Gunakan Cache-Control: public, max-age=31536000, immutable (diasumsikan penamaan ber‑hash).
• Jika bervariasi menurut format, perhatikan Vary: Accept dan Content‑DPR.

Integrasi Next.js (contoh)

// Loader diperluas (pseudo)
export function imageUrl(src: string, fmt: 'avif'|'webp'|'jxl'|'jpeg', w: number) {
  const u = new URL(process.env.NEXT_PUBLIC_IMG_CDN!);
  u.pathname = src;
  u.searchParams.set('w', String(w));
  u.searchParams.set('fmt', fmt);
  return u.toString();
}

Jaminan kualitas (QA)

• Uji A/B LCP/FID, waktu tinggal, dan CTR.
• Regresi visual dengan peta panas untuk mendeteksi kerusakan.

FAQ

• T: Apakah JPEG XL sudah aman digunakan?

• J: Dukungan stabil terus berkembang. Strategi hibrida paling masuk akal: utamakan WebP/AVIF dan perkenalkan JXL bertahap sambil memantau cakupan CDN/klien.

• T: Bagaimana menangani decode AVIF yang lambat pada perangkat low‑end?

• J: Utamakan WebP/JXL untuk gambar hero dan gunakan AVIF untuk gambar dalam konten/thumbnail. Pantau LCP dan sesuaikan ambang.

• T: Apakah saya bisa mengonversi semua JPEG secara massal?

• J: Foto umumnya diuntungkan. UI/teks perlu perhatian. Gunakan preset per kasus penggunaan dan rilis dengan gerbang regresi visual.