AVIF vs WebP — file lebih kecil tak selalu jadi yang tepat

Suatu malam yang memalukan saya pernah membandingkan gambar hero yang sama sebagai WebP dan AVIF, bolak-balik antara dua tab browser, berusaha menangkap perbedaan yang benar-benar bisa dilihat mata saya. AVIF-nya 31% lebih kecil. Saya tak bisa membedakannya. Saya duduk di situ merasa menemukan uang gratis — lalu saya jalankan batch pada folder berisi 200 gambar dan teringat jebakannya.

AVIF, sebagian besar waktu, adalah file yang lebih kecil. Bagian itu benar dan layak diketahui. Tapi "lebih kecil" hanya satu kolom dalam lembar kerja, dan kolom-kolom lain itulah tempat keputusan sesungguhnya berada.

Di mana AVIF menang

AVIF dibangun di atas codec video AV1, dan rancangannya sungguh lebih baru serta lebih cerdik ketimbang WebP. Pada konten fotografis, ia biasanya berada 15–30% lebih kecil dari WebP pada kualitas visual yang setara. Ia menangani gradien mulus — langit, kulit, bayangan lembut — tanpa artefak kotak-kotak yang dilumurkan codec lama ke sana. Ia mendukung HDR dan gamut warna lebar, yang tak dimiliki WebP. Ia menjaga kanal alfa penuh, sama seperti WebP.

Beberapa angka kasar dari folder yang saya sebut tadi, semuanya pada pengaturan kualitas di mana saya tak bisa menemukan perbedaan:

Lihat lagi baris terakhir itu. Pada grafik datar dan sederhana, AVIF kadang keluar lebih besar. Kecerdikannya disetel untuk kerumitan fotografis, dan ia tak punya apa pun untuk dikunyah dalam ilustrasi dua warna. WebP, atau bahkan PNG, bisa menang di situ.

Di mana AVIF membebani Anda

Kemenangan ukuran itu tidak gratis. Dua ongkos nyata:

Waktu enkode. AVIF jauh lebih lambat dikompresi. Pada gambar yang sama, enkode AVIF bisa memakan waktu beberapa kali lebih lama ketimbang WebP — kadang selisih antara "seketika" dan "tunggu beberapa detik per file". Untuk satu gambar hero, siapa peduli. Untuk batch 200, Anda merasakan tiap detik. WebP dienkode begitu cepat sampai praktis gratis.

Dekode dan dukungan. Tiap browser yang benar-benar dipakai orang kini mendekode AVIF — Chrome sejak 2020, Firefox tak lama sesudahnya, Safari mulai versi 16 di akhir 2022. Pada 2026 itu mencakup sebagian besar trafik nyata. Tapi "didukung" dan "universal" bukan kata yang sama. WebP punya beberapa tahun kejenuhan lebih banyak di belakangnya, dan ia mendekode lebih cepat di ponsel kelas bawah, tempat dekode AV1 bisa benar-benar menyedot baterai dan CPU secara terasa. Sebagian klien email dan webview tertanam lawas masih sama sekali tak menyentuh AVIF.

Pertanyaan 20% itu

Jadi keputusan sesungguhnya berujung pada ini: apakah ~20% ekstra itu penting untuk gambar ini, di tempat ini?

Untuk gambar hero besar di halaman arahan — satu aset berat yang diunduh tiap pengunjung — ya. Memangkas 100 KB dari benda yang menghambat paint pertama Anda layak ditukar dengan enkode lebih lambat yang cuma Anda bayar sekali. Itu kasus paling jelas untuk AVIF yang saya tahu.

Untuk kisi thumbnail, tangkapan layar inline di blog, atau apa pun yang sudah di bawah sekitar 50 KB sebagai WebP, jawabannya biasanya tidak. Dua puluh persen dari angka kecil adalah angka yang lebih kecil. Anda menukar waktu enkode dan sedikit kompatibilitas demi menghemat byte yang tak ada orang menunggunya. WebP adalah pilihan bawaan yang lebih tenang di situ.

Kapan saya tak repot dengan AVIF

Kalau sebuah file menuju ke mana pun di luar browser modern — buletin email, CMS lama, sistem mitra yang tak saya kendalikan — saya tak berjudi dengan AVIF. Saya pakai WebP, atau JPG biasa kalau ingin nol risiko. File terkecil yang tak ter-render tidak bernilai apa-apa.

Dan saya tak mengenkode AVIF untuk grafik datar, logo, atau line art. Bukan untuk itu codec-nya dibuat, dan saya sudah cukup sering menyaksikannya kalah dari WebP di situ sampai berhenti mencoba.

Bagaimana saya benar-benar memutuskan

Alur kerja jujur saya: saya konversi barang fotografis yang berat ke AVIF dan menyimpan barang yang ringan, sederhana, serta tersebar luas sebagai WebP. Ini bukan satu format untuk menguasai semuanya. Ini memilih per gambar.

Kalau Anda ingin mencoba perbandingannya sendiri, keduanya berjalan di browser Anda di sini — WebP ke AVIF untuk memeras aset WebP yang ada lebih jauh, dan PNG ke AVIF untuk langsung dari master. Tak ada yang diunggah ke mana pun; enkode terjadi di mesin Anda, yang juga jadi alasan Anda akan merasakan sendiri kelambatan AVIF. Itu bukan kerusakan. Itu codec yang mengerjakan lebih banyak demi file lebih kecil, tepat di depan mata Anda.

Jalankan gambar hero Anda sendiri lewat keduanya. Kalau Anda tak bisa melihat perbedaannya dan AVIF-nya jauh lebih kecil, jawaban Anda sudah ada. Cuma jangan mengira jawabannya sama untuk 200 file berikutnya.