Info terbaru tentang cara AVIF diadopsi dalam ekosistem.
AVIF adalah format gambar baru yang dengan cepat mendapatkan popularitas di web karena tingkat kompresinya yang tinggi, performanya yang efisien, dan adopsinya yang luas. AVIF adalah format gambar terbuka bebas royalti yang didasarkan pada codec video AV1 yang distandardisasi oleh Alliance for Open Media. Postingan blog ini akan memberikan ringkasan tentang cara AVIF diadopsi dalam ekosistem, serta jenis manfaat performa dan kualitas yang dapat diharapkan developer dari AVIF untuk gambar diam dan animasi.
Apa yang baru di ekosistem AVIF?
Sejak diperkenalkannya AVIF di Chrome, Firefox, dan Safari, penggunaan AVIF di web terus meningkat; hampir semua browser mendukung AVIF saat ini.
Di Chrome saja, penggunaan AVIF meningkat menjadi sekitar satu persen dalam waktu sedikit lebih dari setahun setelah Chrome menambahkan dukungan AVIF dalam versi stabil.
Sejumlah CDN gambar, seperti Akamai, Cloudflare, Cloudinary, dan Imgix, menayangkan gambar AVIF saat ini. Dalam postingan blog yang mengumumkan dukungan AVIF, Imgix melaporkan penghematan ukuran file sebesar 60% dibandingkan dengan JPEG dan penghematan sebesar 35% dibandingkan dengan WebP. Penghematan ukuran file ini menghasilkan penghematan penyimpanan yang signifikan, tetapi juga membantu pemuatan halaman lebih cepat, sehingga menghasilkan waktu Largest Contentful Paint (LCP) yang lebih cepat. LCP adalah salah satu Core Web Vitals, dan menunjukkan seberapa cepat blok konten terbesar di halaman dimuat. Menggunakan codec modern untuk mengompresi gambar adalah salah satu teknik utama untuk mengurangi LCP. Lighthouse adalah alat developer Chrome yang bagus untuk menguji situs Anda dan melihat seberapa besar penghematan yang akan diberikan AVIF.
WordPress adalah platform situs paling populer di dunia, dan ada sejumlah plugin yang tersedia bagi developer untuk mengonversi gambar mereka ke AVIF, seperti:
Bagi developer yang lebih suka melakukan pekerjaan secara langsung, alat seperti ImageMagick dan FFmpeg adalah titik awal yang baik.
Kecepatan encoding AVIF
Kecepatan encoding yang cepat dan kualitas visual yang tinggi sangat penting untuk menerapkan kompresi gambar dalam skala besar. Kecepatan encoding software AVIF telah meningkat secara signifikan selama dua tahun terakhir. Dibandingkan dengan format gambar diam modern lainnya, AVIF menghasilkan file yang lebih kecil dengan kualitas visual yang serupa (lihat grafik berikut, lebih rendah lebih baik), tetapi juga lebih cepat dienkode.
Diagram di bawah (lebih tinggi lebih baik) mengilustrasikan perbandingan kecepatan encoding AVIF dengan format gambar lainnya. Codec generasi sebelumnya seperti WebP memanfaatkan algoritma kompresi yang tidak terlalu kompleks (tetapi juga kurang efisien). Dengan skema encoding multi-thread, AVIF mencapai performa yang serupa untuk kasus penggunaan umum sekaligus memberikan peningkatan kompresi yang signifikan.
Bagi developer yang tertarik dengan perbandingan kecepatan encoding dan kualitas visual yang lebih mendetail, situs Perbandingan Coding Gambar berisi hasil tolok ukur yang dapat direproduksi.
Meskipun implementasi software untuk codec gambar modern seperti AVIF dan WebP dioptimalkan untuk arsitektur prosesor x86 dan ARM, mengompresi gambar dalam jumlah besar dalam skala besar dapat memerlukan biaya komputasi yang tinggi. Salah satu alternatif untuk mengurangi biaya kompresi adalah dengan mempelajari akselerasi hardware. Bluedot telah mengembangkan encoder Pulsar-AVIF yang diakselerasi hardware dan berjalan pada FPGA yang dapat diprogram, seperti Alveo U250 AMD. Dibandingkan dengan avifenc berbasis software, Pulsar-AVIF memberikan peningkatan kecepatan 7 hingga 23 kali lipat dengan efisiensi kompresi yang serupa.
- Set pengujian: Kodak (24 gambar berukuran 768x512)
- Mengenkode 24 gambar secara bersamaan (24 proses)
- Setiap proses encoding software dijalankan dengan 4 thread. (-j 4)
Developer dapat men-deploy encoder Pulsar-AVIF dengan virtual machine cloud, seperti Azure NP-Series.
Fitur AVIF untuk halaman web responsif
AVIF memiliki beberapa fitur menarik yang akan membantu menghasilkan halaman web yang lebih responsif. Kali ini kita akan membahas sedikit tentang AVIF animasi, yang sejauh ini merupakan cara paling efisien untuk menampilkan animasi keren di web.
AVIF Animasi
GIF animasi masih menjadi format populer untuk gambar animasi, meskipun sudah berusia 35 tahun. Kelemahan terbesar GIF animasi adalah hanya mendukung 256 warna dan kompresi yang buruk sehingga menghasilkan ukuran file yang sangat besar, sekaligus membatasi resolusi atau kecepatan frame untuk kasus penggunaan praktis. Sebaliknya, coding AVIF animasi sebenarnya sama dengan skema coding video AV1 yang memberikan penghematan ukuran file yang signifikan dibandingkan dengan GIF animasi.
Kami menjalankan benchmark sederhana dengan mengenkode sekumpulan GIF animasi ke AVIF dan JPEG XL. Selama set pengujian, persentase penghematan ukuran file median adalah sekitar 86% dibandingkan dengan file GIF asli dan sekitar 73% dibandingkan dengan file JPEG XL animasi*.
Chrome, Firefox, dan Safari semuanya mendukung pemutaran AVIF animasi.
FFmpeg adalah salah satu alat yang dapat digunakan untuk membuat file AVIF animasi. Berikut adalah contoh dasar mengonversi GIF ke AVIF menggunakan FFmpeg:
ffmpeg -i "$INPUT_GIF" -crf $CRF -b:v 0 "$OUTPUT.avif"
$CRF adalah kualitas output yang diinginkan pada skala 0 hingga 63. Nilai yang lebih rendah berarti kualitas yang lebih baik dan ukuran file yang lebih besar. 0 menggunakan kompresi lossless. Mulai dengan nilai 23 untuk file AVIF animasi kecil.
FFmpeg menggunakan libaom secara default untuk mengenkode gambar AVIF, tetapi juga dapat menggunakan rav1e atau SVT-AV1 jika tersedia. Informasi selengkapnya tentang pilihan encoder, penyesuaian parameter encoding untuk kompromi kecepatan/kualitas dapat ditemukan di panduan encoding AV1 FFmpeg.
Kasus penggunaan lainnya adalah mengemas ulang video AV1 ke dalam AVIF tanpa mengenkode ulang file aslinya. Hal ini jauh lebih murah daripada mendekode/mengenkode file AV1 asli dan membuat video AV1 tersedia untuk digunakan dengan elemen <img>. Meneruskan -c:v copy ke FFmpeg dapat melakukan hal ini.
ffmpeg -i "$INPUT_AV1_VIDEO" -c:v copy -an "$OUTPUT.avif"
Kesimpulan
Penggunaan AVIF di web terus meningkat sejak diluncurkan dan didukung secara luas oleh browser, CDN gambar, plugin WordPress, dan alat encoding. Secara keseluruhan, AVIF adalah pilihan yang bagus untuk menyajikan gambar di web; AVIF cepat dienkode dan didekode sekaligus memberikan kualitas terbaik atau ukuran file terkecil, mana pun yang Anda inginkan untuk situs Anda. AVIF adalah cara paling efisien untuk menayangkan animasi di web. Jika Anda memiliki pertanyaan, komentar, atau permintaan fitur, hubungi kami di milis av1-discuss, komunitas GitHub AOM, dan wiki AVIF.