WebP vs AVIF

TL;DR: WebP dan AVIF adalah format gambar modern yang menghasilkan file lebih ringan dari JPEG/PNG pada kualitas serupa. AVIF umumnya 20-30% lebih kecil dari WebP, tapi proses decode-nya sedikit lebih berat. Untuk website bisnis, sajikan AVIF dengan fallback WebP lalu JPEG.

Apa itu WebP dan AVIF?

WebP (dirilis Google) dan AVIF (berbasis codec AV1) adalah format gambar yang dirancang untuk web modern. Keduanya memampatkan gambar lebih efisien dari JPEG dan PNG, sehingga halaman memuat lebih cepat tanpa mengorbankan kualitas visual. Format gambar yang ringan berdampak langsung ke Core Web Vitals, khususnya metrik LCP.

Analoginya: JPEG seperti koper biasa, WebP seperti koper dengan kompartemen rapi, dan AVIF seperti koper vakum yang memadatkan isi lebih jauh lagi. Trade-off-nya, membuka koper vakum butuh sedikit usaha lebih.

Perbandingan Praktis

Kenapa Penting?

Setiap kilobyte yang dihemat mempercepat halaman, terutama untuk pengunjung Indonesia yang banyak mengakses lewat jaringan seluler. Dalam beberapa proyek website bisnis terakhir, mengganti foto produk JPEG ke AVIF memangkas berat halaman secara signifikan dan memperbaiki skor LCP. Gunakan bersama lazy-loading dan image CDN untuk hasil maksimal. Next.js otomatis menyajikan format modern lewat komponen Image, jadi developer cukup mengarahkan format target.

Pertanyaan Umum

Haruskah saya buang JPEG sepenuhnya?

Tidak. Sajikan AVIF/WebP sebagai prioritas, tapi sediakan fallback JPEG untuk browser lama. Pendekatan berlapis ini aman dan didukung tag picture HTML.

Apakah AVIF selalu lebih baik dari WebP?

Tidak selalu. AVIF unggul di ukuran, tapi decode-nya lebih berat. Untuk gambar kecil seperti ikon, selisihnya sering tidak signifikan.