WebP & AVIF

TL;DR: WebP dan AVIF adalah dua format gambar modern yang dirancang untuk web. Keduanya memampatkan gambar lebih efisien dari JPEG dan PNG, biasanya 25-50% lebih kecil pada kualitas yang sebanding, sehingga memperbaiki kecepatan muat dan skor LCP.

Apa itu WebP & AVIF?

WebP (dikembangkan Google) dan AVIF (berbasis codec AV1) adalah format gambar generasi baru yang menggantikan peran JPEG dan PNG di web. Analoginya seperti memindahkan barang yang sama ke koper yang lebih ringkas: isinya tetap, tapi ruang yang dipakai lebih sedikit. Karena ukuran file lebih kecil, browser mengunduhnya lebih cepat, dan ini berdampak langsung pada image optimization serta pengalaman pengguna.

WebP vs AVIF

Praktik yang saya pakai di proyek client: sediakan AVIF sebagai pilihan pertama, WebP sebagai cadangan, dan JPEG sebagai fallback terakhir lewat elemen <picture>. Di Next.js, komponen next/image menangani negosiasi format ini otomatis.

Kenapa Penting?

Gambar sering jadi penyumbang berat terbesar pada halaman. Untuk website bisnis di Indonesia yang banyak diakses lewat jaringan seluler, memangkas ukuran gambar adalah cara tercepat menurunkan waktu muat tanpa mengubah desain. Format modern ini mendukung target Core Web Vitals dan menjaga tampilan tetap tajam di layar beragam, termasuk pada responsive design.

Pertanyaan Umum

Apakah AVIF selalu lebih baik dari WebP?

Tidak selalu. AVIF unggul di rasio kompresi, tapi proses encode lebih lambat dan beberapa browser lama belum mendukung penuh. Strategi paling aman adalah menyediakan keduanya dengan fallback.

Apakah mengganti ke WebP menurunkan kualitas gambar?

Tidak signifikan pada pengaturan kualitas yang wajar. Pada kualitas setara, file justru lebih kecil. Selisih visual umumnya sulit dibedakan mata.