Cara Pilih Format Gambar Web: AVIF, WebP, atau JPEG

TL;DR: Untuk website bisnis, urutan format gambar terbaik saat ini adalah AVIF lebih dulu, lalu WebP sebagai cadangan, dan JPEG atau PNG sebagai fallback terakhir. AVIF paling ringan tapi belum didukung semua browser, WebP hampir universal, dan kombinasi keduanya bisa memangkas ukuran gambar 30-50% tanpa mengorbankan kualitas yang terlihat.

Dalam banyak audit website yang saya lakukan untuk client, gambar hampir selalu jadi penyumbang berat halaman nomor satu. Sebuah halaman bisa terasa lambat bukan karena kodenya buruk, tapi karena satu foto produk berukuran 1,2 MB yang sebenarnya bisa di bawah 300 KB.

Kabar baiknya, memilih format gambar yang tepat adalah salah satu perbaikan performa dengan rasio usaha terhadap hasil paling menguntungkan. Tidak perlu menulis ulang kode, cukup menyajikan format yang lebih efisien.

Kenapa Format Gambar Menentukan Kecepatan

Gambar biasanya menyumbang porsi terbesar dari total ukuran halaman. Ketika gambar terlalu berat, elemen visual utama lambat tampil, dan ini langsung menurunkan Largest Contentful Paint, salah satu metrik Core Web Vitals yang menjadi faktor peringkat Google sejak 2021.

Format lama seperti JPEG dan PNG masih bekerja, tapi tidak seefisien format modern. JPEG boros untuk kualitas yang dihasilkan, sementara PNG sangat berat untuk foto. Di sinilah format generasi baru masuk.

Tiga Format dan Kapan Memakainya

Ada tiga pilihan utama yang relevan hari ini, masing-masing dengan posisi yang jelas.

Strategi yang aman adalah menyajikan berlapis: browser yang mendukung AVIF mendapat AVIF, yang tidak turun ke WebP, dan yang paling lama tetap mendapat JPEG. Pengguna selalu mendapat versi terbaik yang bisa ditampilkan perangkatnya.

Cara Menerapkannya Tanpa Ribet

Untuk yang memakai framework modern, sebagian besar pekerjaan ini otomatis. Saat membangun website client di atas Next.js, komponen gambar bawaannya sudah mengonversi dan menyajikan WebP atau AVIF sesuai dukungan browser, lengkap dengan dimensi yang mencegah layout shift.

Beberapa langkah praktis yang konsisten saya terapkan: tetapkan selalu lebar dan tinggi gambar, terapkan lazy loading untuk gambar di bawah lipatan, sajikan ukuran responsif sesuai lebar layar, dan untuk situs dengan banyak gambar, pertimbangkan image CDN. Untuk yang memakai CMS tanpa otomasi bawaan, konversi manual ke WebP sebelum unggah sudah memberi peningkatan besar.

Studi Kasus Singkat

Saat menata ulang halaman katalog untuk Nalesha, toko parfum yang banyak menampilkan foto produk, gambar adalah inti dari pengalaman sekaligus beban terberat halaman. Dengan memindahkan foto utama ke WebP dan menyiapkan AVIF untuk visual besar, ukuran halaman turun signifikan dan halaman terasa jauh lebih responsif di perangkat mobile, tempat sebagian besar pembeli berasal. Tidak ada perubahan desain yang terlihat, hanya halaman yang lebih cepat.

Pertanyaan Umum

Apakah saya harus memilih satu format saja?

Tidak. Pendekatan terbaik justru menyajikan beberapa format berlapis sehingga setiap browser mendapat versi paling efisien yang didukungnya.

Apakah AVIF akan menggantikan WebP sepenuhnya?

Belum dalam waktu dekat. AVIF lebih efisien, tapi WebP punya dukungan browser lebih luas dan encode lebih cepat, jadi keduanya saling melengkapi.

Bagaimana kalau website saya pakai WordPress atau CMS lain?

Banyak CMS punya plugin atau pengaturan untuk menyajikan WebP otomatis. Jika tidak, konversi gambar ke WebP sebelum mengunggah tetap memberi peningkatan nyata.

Berapa besar penghematan yang realistis?

Bervariasi tergantung gambar, tapi memindahkan dari JPEG ke WebP atau AVIF umumnya memangkas 25-50% ukuran file tanpa perbedaan kualitas yang kentara.

Mulai dari Gambar Terberat

Tidak perlu mengonversi seluruh situs sekaligus. Mulai dari gambar yang paling berat dan paling sering dilihat, biasanya hero image dan foto produk utama. Dari pengalaman menangani performa website, perbaikan pada beberapa gambar terbesar sudah cukup untuk menggeser skor Core Web Vitals ke arah yang benar, dan pengguna langsung merasakan halaman yang lebih ringan.