Info terbaru tentang cara AVIF diadopsi dalam ekosistem.
AVIF adalah format gambar baru yang dengan cepat mendapatkan popularitas di web karena rasio kompresinya yang tinggi, performa yang efisien, dan penggunaan yang luas. AVIF adalah format gambar terbuka bebas royalti yang didasarkan pada codec video AV1 yang distandarisasi oleh Alliance for Open Media. Postingan blog ini akan memberikan ringkasan tentang bagaimana AVIF diadopsi dalam ekosistem, dan manfaat performa serta kualitas seperti apa yang dapat diharapkan developer dari AVIF untuk gambar diam dan animasi.
Apa yang baru dari ekosistem AVIF?
Sejak diperkenalkannya AVIF di Chrome, Firefox, dan Safari, penggunaan AVIF di web terus berkembang secara stabil; hampir semua browser saat ini mendukung AVIF.
Di Chrome saja, penggunaan AVIF meningkat menjadi sekitar satu persen dalam waktu lebih dari setahun setelah Chrome menambahkan dukungan AVIF dalam versi stabil.
Sejumlah CDN gambar, seperti Akamai, Cloudflare, Cloudinary, dan Imgix saat ini menayangkan gambar AVIF. 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 halaman dimuat lebih cepat, sehingga menghasilkan waktu Largest Contentful Paint (LCP) yang lebih cepat. LCP adalah salah satu Data Web Inti, 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 hebat untuk menguji situs web Anda dan untuk melihat berapa penghematan yang dapat dicapai AVIF.
WordPress adalah platform situs yang paling populer di dunia, dan ada sejumlah plugin yang tersedia bagi developer untuk mengonversi gambar mereka ke AVIF, seperti:
Untuk developer yang lebih praktis, alat seperti ImageMagick dan FFmpeg adalah titik awal yang bagus.
Kecepatan encoding AVIF
Kecepatan encoding yang cepat dan kualitas visual yang tinggi sangat penting untuk men-deploy 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 (semakin tinggi semakin baik) menggambarkan perbandingan kecepatan encoding AVIF dengan format gambar lainnya. Codec generasi sebelumnya seperti WebP mendapatkan manfaat dari algoritma kompresi yang tidak terlalu rumit (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 Image Coding Comparisons berisi hasil benchmark 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 banyak biaya. Salah satu alternatif untuk mengurangi biaya kompresi adalah dengan mempelajari akselerasi hardware. Bluedot telah mengembangkan encoder Pulsar-AVIF yang dipercepat hardware dan berjalan di 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 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 menampilkan 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 dari GIF animasi adalah dukungan untuk 256 warna saja dan kompresi buruk yang menyebabkan 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 di mana kami mengenkode serangkaian 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 animasi JPEG XL*.
Chrome, Firefox, dan Safari semuanya mendukung pemutaran AVIF animasi.
FFmpeg adalah salah satu alat yang digunakan untuk membuat file AVIF animasi, berikut adalah contoh dasar untuk 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 berukuran 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 menjadi 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 melakukannya.
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 tepat untuk menayangkan 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 mailing list av1-discuss, komunitas GitHub AOM, dan wiki AVIF.