Digital Transformation
AVIF vs WebP
TL;DR: AVIF dan WebP adalah format gambar modern yang menghasilkan file jauh lebih kecil daripada JPEG atau PNG pada kualitas setara. AVIF umumnya menghasilkan ukuran lebih kecil lagi, tetapi WebP punya dukungan browser yang lebih lama dan luas. Untuk kebanyakan situs, sajikan AVIF dengan fallback WebP.
Apa itu AVIF dan WebP?
Keduanya format kompresi gambar generasi baru. WebP dikembangkan Google dan sudah didukung hampir semua browser modern sejak beberapa tahun lalu. AVIF lebih baru, berbasis codec AV1, dan unggul dalam rasio kompresi terutama untuk foto kompleks.
Memilih format gambar yang tepat adalah salah satu cara paling cepat memperbaiki Core Web Vitals, karena gambar sering jadi elemen terberat di sebuah halaman.
Perbandingan Singkat
| Aspek | AVIF | WebP |
|---|---|---|
| Ukuran file | Biasanya paling kecil | Lebih kecil dari JPEG |
| Dukungan browser | Luas, sebagian browser lama belum | Sangat luas |
| Waktu encode | Lebih lambat | Cepat |
| Kasus terbaik | Foto detail tinggi | Gambar umum, kompatibilitas maksimal |
Banyak framework modern, termasuk komponen gambar di Next.js, otomatis menyajikan AVIF atau WebP sesuai dukungan browser, dipadukan dengan responsive images via srcset.
Kenapa Penting?
Gambar yang lebih ringan berarti halaman lebih cepat tampil, terutama di koneksi seluler yang umum di Indonesia. Selisih ratusan kilobyte per gambar terasa nyata saat sebuah halaman memuat puluhan gambar. Detail dukungan format dapat dicek di MDN.
Pertanyaan Umum
Apakah saya harus pilih salah satu?
Tidak. Praktik terbaik menyajikan AVIF lebih dulu dengan fallback otomatis ke WebP atau JPEG bagi browser yang belum mendukung.
Apakah AVIF selalu lebih kecil?
Umumnya ya untuk foto, tetapi tidak selalu untuk gambar sederhana seperti logo. Uji pada kasus Anda sebelum menyimpulkan.
Istilah Terkait