Info terbaru terkait penerapan AVIF dalam ekosistem.
AVIF adalah format gambar baru yang dengan cepat mendapatkan popularitas di web karena tingkat kompresinya yang tinggi, performa yang efisien, dan penggunaan yang luas. AVIF adalah format gambar terbuka dan bebas royalti yang didasarkan pada codec video AV1 yang distandarisasi oleh Alliance for Open Media. Posting blog ini akan memberikan ringkasan bagaimana AVIF diadopsi dalam ekosistem, dan seperti apa manfaat performa dan kualitas yang dapat diharapkan oleh developer dari AVIF untuk gambar diam dan animasi.
Apa yang baru dalam ekosistem AVIF?
Sejak AVIF diperkenalkan di Chrome, Firefox, dan Safari, penggunaan AVIF di web terus berkembang; 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 secara 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 35% penghematan dibandingkan 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 Anda dan melihat berapa banyak penghematan yang dihasilkan AVIF.
WordPress adalah platform situs paling populer di dunia, dan tersedia sejumlah plugin bagi developer untuk mengonversi gambar ke AVIF, seperti:
- AutoOptimize
- Dikonversi untuk Media
- Pengoptimalan Gambar EWWW
- Optimole
- Pengoptimalan Gambar ShortPixel
Bagi developer yang lebih aktif, alat seperti ImageMagick dan FFmpeg merupakan titik awal yang bagus.
Kecepatan enkode 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 dalam dua tahun terakhir. Dibandingkan dengan format gambar diam modern lainnya, AVIF menghasilkan file lebih kecil dengan kualitas visual yang serupa (lihat grafik berikut, lebih rendah lebih baik) tetapi juga lebih cepat untuk dienkode.
Bagan di bawah ini (lebih tinggi lebih baik) menggambarkan bagaimana kecepatan encoding AVIF dibandingkan dengan format gambar lainnya. Codec generasi sebelumnya seperti WebP mendapatkan manfaat dari 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 Pengkodean 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 mungkin mahal secara komputasi. Salah satu alternatif untuk mengurangi biaya kompresi adalah dengan mengeksplorasi akselerasi perangkat keras. Bluedot telah mengembangkan encoder Pulsar-AVIF dengan akselerasi hardware yang berjalan pada FPGA yang dapat diprogram, seperti AMD Alveo U250. 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 laman web responsif
AVIF memiliki beberapa fitur menarik yang akan membantu menyajikan laman web yang lebih responsif. Kali ini kita akan membahas sedikit tentang animasi AVIF, yang sejauh ini merupakan cara paling efisien untuk menyajikan animasi keren di web.
AVIF Animasi
GIF animasi masih merupakan format populer untuk gambar animasi, meskipun sudah berusia 35 tahun. Kelemahan terbesar dari GIF animasi adalah dukungan untuk 256 warna saja dan kompresi yang buruk yang menyebabkan ukuran file yang sangat besar sekaligus membatasi resolusi atau kecepatan frame untuk kasus penggunaan praktis. Sebaliknya, pengkodean AVIF animasi sebenarnya sama dengan skema pengkodean video AV1 yang memberikan penghematan ukuran file yang signifikan dibandingkan dengan GIF animasi.
Kami menjalankan benchmark sederhana yang mengenkode sekumpulan GIF animasi ke AVIF dan JPEG XL. Selama set pengujian, persentase penghematan ukuran file median sekitar 86% dibandingkan dengan file GIF asli dan sekitar 73% dibandingkan dengan file JPEG XL animasi*.
Chrome, Firefox, dan Safari mendukung pemutaran animasi AVIF.
FFmpeg adalah salah satu alat yang digunakan untuk membuat file AVIF animasi, berikut ini 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 file 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, serta menyesuaikan parameter encoding untuk kompromi kecepatan/kualitas dapat ditemukan dalam panduan encoding AV1 FFmpeg.
Kasus penggunaan lainnya adalah mengemas ulang video AV1 ke dalam AVIF tanpa mengenkode ulang file aslinya. Proses ini jauh lebih murah daripada men-dekode/encoding 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 tepat untuk menyajikan gambar di web; AVIF cepat untuk mengenkode dan mendekode sambil memberikan kualitas terbaik atau ukuran file terkecil, mana pun yang Anda sukai untuk situs web Anda. AVIF adalah cara paling efisien untuk menayangkan animasi di web. Jika ada pertanyaan, komentar, atau permintaan fitur, hubungi kami di milis diskusi av1, komunitas GitHub AOM, dan wiki AVIF.