WebP vs AVIF: cara memilih dan menguji format gambar yang tepat

AVIF dapat mengungguli WebP untuk sebagian gambar dan sasaran kualitas; WebP dapat lebih cepat dikodekan dan lebih cocok dengan alur lama yang lebih luas. Ekstensi tidak menjamin hasil. Bandingkan keluaran yang mewakili, kompatibilitas, dan biaya pipeline, lalu sediakan fallback jika audiens membutuhkannya.

Sekilas tentang Kedua Format

Baik WebP maupun AVIF lahir dari teknologi codec video. Google merilis WebP pada 2010 berbasis VP8, teknologi yang sama di balik format video WebM. Alliance for Open Media merilis AVIF pada 2019 berbasis AV1, codec video yang lebih baru dan lebih efisien yang dikembangkan bersama oleh Google, Mozilla, Apple, Netflix, dan lainnya.

Alat pengodean yang lebih baru dalam AV1 dapat meningkatkan kompresi, sedangkan implementasi WebP yang lebih sederhana dan matang dapat mengurangi biaya pemrosesan. Perilaku encoding dan decoding sebenarnya bergantung pada implementasi codec, pengaturan, ciri gambar, dan perangkat.

Kompresi: Seberapa Jauh Perbedaan Ukuran File?

Hasil benchmark berubah menurut korpus, encoder, tingkat upaya, riwayat sumber, dan metrik kualitas. Pengujian yang bertanggung jawab mempertahankan dimensi serta kebijakan metadata, lalu membandingkan beberapa metrik visual dan tinjauan manusia:

• AVIF — dapat memberi hasil kuat untuk foto, gradien, HDR, dan alur berkedalaman bit tinggi, tetapi encoding dapat mahal
• WebP — dapat memberi keluaran lossy atau lossless yang efisien dengan alat matang dan kompleksitas operasional lebih rendah di banyak pipeline

Jangan ubah rata-rata pemasaran format menjadi prediksi untuk setiap file. Ekspor keduanya dari master yang sama, pilih kualitas visual sebanding, dan masukkan waktu encoding, perilaku decoding, metadata, serta transfer fallback dalam keputusan.

Aset nonfoto dapat berperilaku berbeda dari benchmark foto. Untuk grafik sederhana, ikon, dan ilustrasi datar, bandingkan kandidat lossless atau near-lossless jika didukung; format mana pun dapat unggul bergantung pada palet, alfa, encoder, dan pengaturan.

Dukungan browser dan perangkat lunak

Tabel dukungan berubah dan pangsa global tidak sama dengan audiens Anda. Periksa browser target dan konsumen nonbrowser. Elemen <picture> dapat menawarkan AVIF lebih dahulu, lalu WebP, dengan JPEG sebagai fallback <img> terakhir:

<picture>
  <source srcset="foto.avif" type="image/avif" />
  <source srcset="foto.webp" type="image/webp" />
  <img src="foto.jpg" alt="Deskripsi" />
</picture>

Kecepatan Encoding dan Dukungan Alat

Encoder WebP sering membutuhkan komputasi lebih sedikit daripada encoder AVIF pada tingkat upaya sebanding, tetapi rasionya sangat bervariasi. Jika CMS mengonversi gambar saat unggah atau dalam batch besar, ukur throughput, memori, waktu antrean, dan kualitas dengan pustaka serta pengaturan yang benar-benar digunakan.

Kinerja encoder berubah antar-pustaka dan rilis. Biaya decoding juga bergantung pada dimensi, kedalaman bit, perangkat, browser, dan implementasi. Uji perangkat target kelas bawah daripada menganggap perbedaannya tidak terlihat.

Dukungan alat luas tetapi tidak merata. Pastikan impor, ekspor, animasi, profil warna, metadata, dan negosiasi otomatis pada editor, CMS, paket CDN, dan tumpukan browser yang benar-benar Anda pakai.

Perbandingan Fitur

AVIF dapat mewakili kedalaman bit lebih tinggi, gamut lebar, dan pensinyalan HDR melampaui encoding WebP 8-bit. Kemampuan ini tidak menjamin akurasi warna: mastering, profil, metadata, perilaku browser, kemampuan layar, dan pengujian tetap penting.

Kapan Menggunakan Format Mana

Pilih AVIF jika:

• Anda mengendalikan pipeline gambar dan bisa menyajikan fallback
• Keluaran AVIF perwakilan memperbaiki hambatan transfer atau kualitas yang relevan
• Anda memerlukan kemampuan AVIF seperti kedalaman bit lebih tinggi atau HDR dan telah menguji seluruh jalur warna
• CDN atau pipeline build membuat, menyimpan, dan menegosiasikan varian terverifikasi dengan benar

Pilih WebP jika:

• Throughput encoder terukur atau kesederhanaan operasional mengunggulkan WebP
• Klien yang didukung menerima WebP dan varian AVIF tambahan tidak dapat dibenarkan
• Grafik perwakilan memenuhi sasaran byte dan kualitas dalam WebP
• Anda sudah menyajikan WebP dan upaya migrasi tidak sebanding hasilnya

Gunakan keduanya jika manfaat terukur membenarkannya:

Tumpukan <picture> menambah pekerjaan pembuatan, penyimpanan, cache, markup, dan tinjauan kualitas, tetapi dapat memperbaiki pengiriman. Sebagian CDN mengotomatiskan negosiasi; verifikasi perilaku paket, kunci cache, penanganan Vary, pengaturan kualitas, dan keluaran fallback, bukan berasumsi hasilnya “optimal”.

Cara Mengonversi Gambar Anda

Vizua dapat membuat keluaran WebP dan AVIF yang didukung di browser tanpa memasang perangkat lunak. File yang dipilih tidak dikirim ke server pemrosesan gambar kami; kode yang diperlukan dan layanan situs masih dapat memakai jaringan:

• Kompres WebP — kurangi ukuran file WebP yang sudah ada
• Konversi ke AVIF — buat AVIF dari gambar input yang didukung
• JPG ke WebP — konversi foto JPEG ke WebP
• PNG ke WebP — konversi grafis PNG ke WebP

Jika Anda bekerja dengan sumber JPEG, panduan mengompres gambar tanpa kehilangan kualitas menjelaskan cara memilih pengaturan awal dan membandingkan keluaran sebenarnya.

Pertanyaan yang Sering Diajukan