AVIF memampatkan gambar secara kasar 20 persen lebih kecil dari WebP dengan kualitas yang sama, sementara WebP mengkodekan beberapa kali lebih cepat dan berfungsi di lebih banyak tempat. Keduanya adalah format generasi berikutnya yang berasal dari codec video: WebP dari VP8 pada tahun 2010, AVIF dari AV1 yang lebih baru pada tahun 2019. AVIF adalah kompresor yang lebih kuat, dengan dukungan untuk HDR dan warna 12-bit. WebP adalah default pragmatis, dengan dukungan perangkat lunak yang lebih luas dan pengkodean yang lebih cepat. Perbandingan ini mencakup asal masing-masing format, kompresi, kecepatan enkode, kedalaman warna, dukungan browser, transparansi dan animasi, serta format mana yang unggul untuk penggunaan tertentu.

Tidak ada yang menang secara langsung. AVIF menghasilkan file terkecil dan warna terluas; WebP lebih cepat dibuat dan lebih aman untuk disajikan saat ini. Banyak situs menawarkan keduanya, mencantumkan AVIF pertama dan WebP kedua, dengan fallback JPG atau PNG terakhir, sehingga setiap browser mendapatkan format terbaik yang bisa dibaca.

Dari mana setiap format berasal

Kedua format tersebut masih ditarik dari kompresi video. WebP mengambil kodenya dari Wakil Presiden8, codec video Google tahun 2010, sehingga kini sudah berusia lebih dari satu dekade dan didukung secara menyeluruh. AVIF mengambil kodenya dari AV1, codec bebas royalti tahun 2019 dari Alliance for Open Media, yang anggotanya meliputi Google, Netflix, dan Apple. AV1 adalah generasi yang lebih maju dari VP8, itulah sebabnya AVIF melakukan kompresi lebih keras namun juga memerlukan daya komputasi yang lebih besar.

Kompresi: AVIF menang

Kompresi lebih menyukai AVIF karena AV1 lebih baru dan lebih cerdas. Pada foto yang sama dengan kualitas yang sama, AVIF muncul 20 persen lebih kecil dari WebP, dan jauh lebih kecil dari JPG. AVIF juga menangani warna datar dan gradien dengan rapi, menghindari garis melintang yang ditampilkan dalam format yang lebih lemah. Untuk file sekecil mungkin, AVIF adalah pemenangnya, dan jaraknya semakin besar pada gambar dengan area halus yang luas.

Penghematan terjadi pada situs yang banyak gambarnya. Jika WebP sudah memotong gambar Anda sepertiga di bawah JPG, AVIF memangkas seperlima lagi di atasnya, sehingga pengurangan total dibandingkan JPG asli bisa mendekati setengahnya. Untuk halaman yang diukur pada Core Web Vitals, ini merupakan peningkatan kecepatan yang berarti.

Kecepatan penyandian: WebP menang

Pengkodean adalah tempat AVIF membayar untuk kompresinya. AV1 secara komputasi berat, jadi Pengkodean AVIF beberapa kali lebih lambat dibandingkan WebP. Hal ini penting ketika situs memproses ribuan gambar, menghasilkannya dengan cepat, atau berjalan pada sumber daya server yang terbatas. WebP mengkodekan dengan cukup cepat untuk penggunaan real-time, yang merupakan salah satu alasan mengapa ini menjadi default. Decoding, yang dilakukan browser untuk menampilkan gambar, keduanya cepat, sehingga pengunjung tidak merasakan perlambatan.

Kedalaman warna dan HDR: AVIF menang

Kedalaman warna memisahkan keduanya dengan jelas. AVIF mendukung hingga 12 bit per saluran dan HDR, sehingga dapat menampung gambar dengan gamut lebar dan rentang dinamis tinggi yang tidak dapat dilakukan oleh WebP. WebP dibatasi pada 8 bit per saluran, sama seperti JPG. Untuk fotografi, tampilan wide-gamut modern, dan konten HDR, AVIF adalah satu-satunya pilihan di antara keduanya. Pada layar standar 8-bit perbedaannya tidak terlihat, tetapi pada perangkat keras yang mampu, AVIF menunjukkan warna yang tidak dapat disimpan oleh WebP.

Transparansi dan animasi

Kedua format mencakup transparansi dan animasi, jadi tidak ada yang unggul di sini. Masing-masing membawa a saluran alfa penuh, sehingga logo transparan tetap tembus pandang, dan keduanya mendukung klip animasi yang jauh lebih kecil daripada GIF. Animasi AVIF dikompres lebih ketat berkat AV1, sedangkan animasi WebP lebih cepat diproduksi. Untuk grafik animasi sederhana, keduanya mengalahkan GIF dengan pasti.

Dukungan browser dan perangkat lunak: WebP menang

Dukungan adalah keunggulan WebP. Setiap browser modern telah membaca WebP selama bertahun-tahun, dan banyak perangkat lunak, plugin, dan CDN yang menanganinya. Dukungan AVIF kini tersebar luas di browser, termasuk Chrome, Firefox, dan Safari, tetapi tertinggal jauh dari WebP, dan editor desktop, sistem lama, dan beberapa CDN. Untuk file yang harus dibuka dengan andal saat ini di seluruh perangkat lunak campuran, WebP adalah pilihan yang lebih aman.

Ukuran file secara nyata

Angka riil membuat perdagangan menjadi nyata. Foto berukuran 400KB sebagai JPG mungkin mendekati 280KB sebagai WebP dan sekitar 220KB sebagai AVIF dengan kualitas yang sama. Grafik transparan berukuran 120KB sebagai PNG bisa menjadi 80KB sebagai WebP dan 60KB sebagai AVIF. Angka pastinya bergantung pada gambar, namun urutannya tetap: AVIF terkecil, WebP tengah, format lawas terbesar. Pilih berdasarkan apakah tambahan 20 persen tersebut sepadan dengan pengkodean AVIF yang lebih lambat dan dukungan yang lebih sempit.

Kecepatan decoding dan bagaimana perasaan pengunjung

Decoding, bukan coding, adalah apa yang dialami pengunjung, dan di sini kedua format tersebut dekat. Saat browser menampilkan gambar, browser harus memecahkan kodenya, serta AVIF dan WebP memecahkan kode dengan cukup cepat untuk memuat halaman dengan lancar. Komputasi AV1 yang berat di AVIF berada di sisi pengkodean, dilakukan satu kali saat gambar dibuat, tidak setiap kali dimuat. Jadi pengunjung tidak pernah membayar biaya pengkodean AVIF; mereka hanya mendapatkan keuntungan dari unduhannya yang lebih kecil.

Pemisahan ini penting untuk cara Anda menerapkan setiap format. Enkode AVIF sebelumnya, dalam langkah build atau CDN, dan simpan hasilnya dalam cache. Jangan pernah menyandikannya pada setiap permintaan, karena hal itu akan membebani server Anda tanpa manfaat bagi pengunjung. WebP cukup memaafkan untuk melakukan enkode dengan cepat, tetapi AVIF memberikan penghargaan pada pra-generasi.

Membangun fallback dalam HTML

Melayani kedua format dengan aman menggunakan elemen gambar, yang memungkinkan browser memilih sumber terbaik yang dipahaminya. Anda mencantumkan AVIF terlebih dahulu, WebP kedua, dan JPG atau PNG terakhir. Browser membaca daftar dan memuat format pertama yang dapat didekodekan, mengabaikan sisanya. Peramban modern menggunakan AVIF, peramban lama menggunakan WebP, dan peramban kuno menggunakan JPG. Tidak ada pengunjung yang melihat gambar rusak, dan masing-masing mendapatkan file terkecil yang diizinkan oleh perangkat lunak mereka.

Sebagian besar sistem pengelolaan konten dan CDN gambar membuat markup ini untuk Anda, jadi Anda mengunggah satu file dan sistem akan menghasilkan format dan rantai cadangan. Melakukannya dengan tangan tidak masalah untuk situs kecil, tetapi otomatisasi berskala lebih baik pada ratusan gambar.

AVIF untuk fotografi dan HDR

Keunggulan warna AVIF paling penting dalam fotografi. Ini Warna 12-bit dan dukungan HDR memegang rentang warna yang luas dari kamera modern dan keluaran layar HDR yang jelas, yang tidak dapat disimpan oleh WebP. Lanskap dengan langit cerah dan bayangan gelap menjaga lebih banyak detail dalam keduanya sebagai AVIF. Pada layar gamut lebar, warna merah dan hijau jenuh yang dipotong WebP tetap nyata.

Untuk grafik web sehari-hari pada layar standar, keunggulan ini tidak terlihat, karena tampilan 8-bit tidak dapat menampilkan rentang ekstra. Namun untuk situs fotografi, konten HDR, dan tampilan kelas atas, AVIF adalah satu-satunya dari keduanya yang memberikan kualitas gambar yang baik.

Biaya server dan perkakas AVIF

Kompresi AVIF tidak gratis pada saat pembuatannya. Artinya pengkodeannya lebih lambat biaya CPU yang lebih tinggi dan waktu pembuatan yang lebih lama, yang bertambah saat situs menghasilkan ribuan gambar. Pustaka gambar lama dan beberapa editor juga belum bisa menulis AVIF, jadi peralatan Anda harus mendukungnya. Sebaliknya, WebP ditangani oleh hampir semua perpustakaan gambar dan dikodekan dengan cepat, menjadikannya pilihan yang mudah untuk saat ini.

Kesimpulan praktisnya adalah mempertimbangkan penghematan ukuran ekstra sebesar 20 persen terhadap biaya pengkodean dan kesenjangan perkakas. Untuk operasi media besar yang mengoptimalkan setiap byte, AVIF mendapatkan tempatnya. Untuk situs kecil, WebP memberikan sebagian besar manfaat tanpa hambatan apa pun.

Format mana yang menang

Tidak ada yang menang untuk setiap pekerjaan. Pilih AVIF untuk file terkecil, HDR, dan warna lebar ketika perkakas Anda mendukungnya dan waktu penyandian bukanlah hambatan. Pilih WebP untuk pengkodean cepat, dukungan luas, dan default yang aman yang berfungsi di lebih banyak perangkat lunak saat ini. Penyiapan terkuat melayani keduanya: AVIF pertama, WebP kedua, dan fallback JPG atau PNG terakhir, sehingga setiap pengunjung menerima format terbaik yang dapat didekode oleh browser mereka.

Cara membuat format ini

Membuat format modern tidak memerlukan alat berat untuk WebP. Kami Konverter PNG ke WebP berjalan di browser Anda, mengelompokkan file, dan tidak menambahkan tanda air. Pengkodean AVIF lebih menuntut, sehingga biasanya ditangani oleh CDN gambar atau langkah pembuatan daripada alat browser cepat. Untuk sebagian besar situs, membuat WebP sekarang dan menambahkan AVIF melalui CDN Anda nanti adalah cara praktisnya.

Pertanyaan yang sering diajukan

Apakah AVIF memperlambat situs web saya saat dimuat?

Tidak. AVIF menerjemahkan kode dengan cepat; hanya pengkodean yang lambat, dan pengkodean terjadi satu kali saat gambar dibuat, bukan pada setiap pemuatan halaman. Pengunjung hanya mendapatkan unduhan yang lebih kecil.

Bagaimana cara saya melayani AVIF dengan fallback WebP?

Gunakan elemen gambar. Cantumkan AVIF terlebih dahulu, WebP kedua, JPG atau PNG terakhir, dan browser memuat format pertama yang dapat didekodekannya.

Apakah AVIF layak untuk situs web kecil?

Seringkali belum. WebP memberikan sebagian besar penghematan dengan lebih sedikit gesekan, karena pengkodean AVIF yang lambat dan kesenjangan perkakas menambah biaya yang jarang dibutuhkan oleh situs kecil.

Apakah AVIF lebih baik dari WebP?

Pada kompresi, ya. AVIF berukuran sekitar 20 persen lebih kecil dan mendukung HDR. WebP mengkodekan lebih cepat dan memiliki dukungan yang lebih luas, sehingga merupakan default yang lebih aman saat ini.

Seberapa kecil AVIF dibandingkan WebP?

Sekitar 20 persen lebih kecil dengan kualitas yang sama, dan jauh lebih kecil dibandingkan JPG, karena AVIF menggunakan codec AV1 yang lebih baru.

Mengapa pembuatan AVIF lebih lambat?

Karena Pengkodean AV1 secara komputasi berat. AVIF memperdagangkan kecepatan enkode untuk kompresi yang lebih baik, yang penting saat memproses gambar secara massal atau di server terbatas.

Apakah WebP mendukung HDR?

Tidak. WebP dibatasi pada 8 bit per saluran, sehingga tidak dapat menyimpan warna HDR atau wide-gamut. AVIF mendukung hingga 12 bit dan HDR.

Browser mana yang mendukung AVIF?

Chrome, Firefox, dan Safari mendukung AVIF, meskipun adopsi mengikuti WebP dan beberapa CDN serta editor tertinggal. Sajikan fallback WebP atau JPG untuk klien lama.

Apakah AVIF dan WebP menjaga transparansi?

Ya. Keduanya membawa saluran alpha penuh, sehingga grafik transparan tetap tembus pandang dalam format apa pun, tidak seperti JPG.

Apakah AVIF atau WebP lebih baik untuk animasi?

Keduanya mengalahkan GIF; AVIF mengompres lebih erat. Animasi AVIF lebih kecil, WebP lebih cepat dibuat, jadi pilihlah berdasarkan apakah ukuran atau kecepatan enkode lebih penting.

Haruskah saya menggunakan AVIF atau WebP untuk situs saya?

Sajikan keduanya. AVIF pertama untuk file terkecil, WebP kedua untuk kompatibilitas, dengan fallback JPG atau PNG untuk sisanya.

Akankah AVIF menggantikan WebP?

Tidak segera. AVIF mengompresi lebih baik, tetapi pengkodean WebP lebih cepat dan memiliki dukungan lebih luas, jadi keduanya kemungkinan besar akan hidup berdampingan selama bertahun-tahun, melayani bersama.

Bisakah browser lama membuka AVIF?

Seringkali tidak. Dukungan AVIF lebih muda dari WebP, jadi penggantian JPG atau PNG penting bagi pengunjung yang menggunakan perangkat lunak lama.

AVIF dan WebP keduanya merupakan format generasi berikutnya yang dibuat dari codec video, namun AVIF mengompresi sekitar 20 persen lebih kecil dan menambahkan HDR dan warna 12-bit, sementara WebP mengkodekan lebih cepat dan menikmati dukungan yang lebih luas. Keduanya menjaga transparansi dan animasi, jadi pilihannya tergantung pada apakah Anda menginginkan file terkecil atau yang paling aman dan tercepat. Sajikan AVIF terlebih dahulu untuk ukuran, WebP kedua untuk kompatibilitas, dan fallback JPG atau PNG untuk sisanya. Buat WebP di browser Anda dengan konverter kami di atas, dan tambahkan AVIF melalui saluran gambar Anda.

Referensi cepat: AVIF atau WebP

Raihlah AVIF saat Anda menginginkan file terkecil, saat gambar memerlukan HDR atau warna lebar, dan saat CDN atau langkah pembuatan Anda dapat melakukan pra-enkode tanpa memperlambat setiap permintaan. Raihlah WebP bila Anda menginginkan pengkodean cepat, dukungan perangkat lunak terluas, dan standar gesekan rendah yang sudah ditangani oleh hampir semua alat. Penyiapan terkuat bukanlah salah satu atau yang lain, melainkan keduanya, disajikan secara berurutan: AVIF pertama untuk ukuran, WebP kedua untuk jangkauan, dan fallback JPG atau PNG terakhir sehingga tidak ada pengunjung yang memiliki gambar rusak.

Apa yang terjadi setelah AVIF

Format gambar terus berkembang, dan JPEG XL adalah pesaing berikutnya, menjanjikan kompresi yang kuat dengan transcoding JPG lossless. Dukungan browsernya terbatas saat ini, jadi ini belum merupakan pilihan praktis. Untuk saat ini, AVIF dan WebP adalah dua format generasi berikutnya yang layak diterapkan, dan JPEG XL layak untuk ditonton. Membangun rantai cadangan berarti Anda dapat menambahkan format yang lebih baru nanti tanpa merusak browser lama, itulah sebabnya pendekatan elemen gambar dapat digunakan di masa depan.