AVIF (AV1 Image File Format)

TL;DR: AVIF adalah format gambar generasi baru yang lebih hemat bandwidth dibanding WebP dan JPEG. Untuk website bisnis Indonesia yang ingin skor LCP lebih baik di koneksi 4G, AVIF adalah default yang masuk akal di 2026.

Apa itu AVIF?

AVIF singkatan dari AV1 Image File Format. Format ini lahir dari codec video AV1 yang dikembangkan Alliance for Open Media. Sejak Chrome, Firefox, Safari (16+), dan Edge mendukungnya secara native, AVIF menjadi pilihan default yang aman untuk gambar produk, hero, dan thumbnail di website modern.

Berbeda dengan WebP yang sudah lebih dulu menjadi standar, AVIF menggunakan teknik kompresi yang lebih canggih sehingga ukuran file lebih kecil di kualitas visual yang sama. Praktik standar di industri kini menyajikan AVIF sebagai format utama dengan fallback WebP atau JPEG melalui tag <picture>.

AVIF vs WebP vs JPEG

Kenapa Penting?

Untuk website bisnis Indonesia, mayoritas trafik datang dari mobile dengan koneksi 4G yang variatif. Setiap kilobita gambar yang bisa dipotong langsung berdampak pada LCP dan bounce rate. Dalam implementasi next/image di Next.js 15, AVIF bisa diaktifkan via konfigurasi formats: ['image/avif', 'image/webp'] di next.config.ts.

Mengikuti panduan web.dev tentang AVIF, encoding AVIF butuh waktu lebih lama saat build, tapi ini di sisi server, bukan klien. Pengguna akhir hanya merasakan loading lebih cepat.

Pertanyaan Umum

Apakah AVIF menggantikan WebP?

Tidak sepenuhnya. AVIF unggul untuk gambar besar dan foto, sementara WebP masih cukup untuk ikon kecil. Strategi terbaik adalah serve AVIF dulu dengan fallback WebP.

Apakah Next.js 15 mendukung AVIF otomatis?

Ya. Set formats: ['image/avif', 'image/webp'] di next.config.ts dan next/image akan menyajikan AVIF otomatis ke browser yang mendukung.