WebP vs AVIF: perbedaan, dukungan browser, dan cara mengubah gambar

Apa itu WebP?

WebP adalah format gambar yang dikembangkan Google dan dirilis pada 2010. WebP mendukung kompresi lossy dan lossless, transparansi, serta animasi. Menurut pengujian Google, WebP lossy rata-rata 25 sampai 34 persen lebih kecil dari JPEG dengan kualitas setara, dan WebP lossless sekitar 26 persen lebih kecil dari PNG.

Apa itu AVIF?

AVIF adalah format yang lebih baru, dirilis pada 2019 oleh Alliance for Open Media, dan dibangun di atas codec video AV1. AVIF juga mendukung transparansi dan animasi, ditambah warna dengan kedalaman lebih tinggi (hingga 12 bit) dan HDR. Untuk foto, AVIF sering menghasilkan file yang lebih kecil lagi dibanding WebP pada kualitas yang terlihat sama.

Perbandingan singkat

Dukungan browser

• WebP didukung Chrome, Edge, Firefox, dan Opera sejak lama, serta Safari sejak versi 14 (2020). Detail per versi: caniuse.com/webp.
• AVIF didukung Chrome sejak versi 85 (2020), Firefox sejak versi 93 (2021), Safari sejak versi 16.4 (2023), dan Edge sejak versi 121 (2024). Detail per versi: caniuse.com/avif.

Artinya, sebagian kecil pengunjung dengan iPhone atau Mac yang belum diperbarui belum bisa menampilkan AVIF. Karena itu, AVIF sebaiknya selalu disertai cadangan, entah WebP atau JPG.

Kapan memakai yang mana?

• Foto (produk, banner, galeri): AVIF dengan cadangan WebP atau JPG. Biasanya penghematan terbesar.
• Screenshot dan grafik dengan teks tajam: WebP, atau PNG jika teksnya harus benar-benar sempurna. Bandingkan hasilnya dengan mata.
• Animasi pendek: WebP animasi atau video MP4, keduanya jauh lebih ringan dari GIF.
• Gambar yang dibuat sangat sering, misalnya diunggah pengguna setiap saat: WebP, karena proses pembuatannya lebih cepat.

Tiga cara mengubah gambar ke WebP atau AVIF

1. Otomatis dengan CDN gambar

Cara termudah: unggah JPG atau PNG seperti biasa, lalu biarkan CDN gambar memilih format untuk setiap pengunjung. Dengan Simpanan, cukup tambahkan f-auto ke link:

https://cdn.simpananawan.com/tr:w-1200,f-auto/u/anda/produk.jpg

Browser yang mendukung AVIF menerima AVIF, yang lain menerima WebP, dan browser lama menerima JPG. Tidak ada file tambahan yang perlu Anda siapkan. Baca selengkapnya di WebP dan AVIF otomatis.

2. Manual dengan Squoosh

Squoosh adalah aplikasi web gratis dari tim Chrome. Seret gambar ke halaman, pilih WebP atau AVIF di panel kanan, atur kualitas, lalu bandingkan hasilnya dengan penggeser sebelum mengunduh. Cocok untuk beberapa gambar saja.

3. Lewat command line

Untuk banyak gambar sekaligus, alat baris perintah lebih cepat. Contoh dengan cwebp dari Google dan ImageMagick:

cwebp -q 80 foto.jpg -o foto.webp
magick foto.jpg -quality 60 foto.avif

Menyediakan cadangan dengan tag picture

Jika Anda mengubah gambar secara manual, gunakan tag <picture> agar setiap browser memilih format yang bisa ia tampilkan:

<picture>
  <source srcset="foto.avif" type="image/avif">
  <source srcset="foto.webp" type="image/webp">
  <img src="foto.jpg" width="800" height="600" alt="Deskripsi gambar">
</picture>

Browser membaca dari atas ke bawah dan memakai format pertama yang ia dukung. Dengan CDN gambar dan f-auto, pemilihan ini terjadi otomatis di server, jadi cukup satu tag <img> biasa.

Pertanyaan umum