Kami sering menulis tentang penggelembungan di situs dari gambar, dan alat seperti Lighthouse menonjolkan saat pemuatan gambar berdampak negatif pada pengalaman pengguna, seperti meningkatkan waktu pemuatan, atau mengurangi bandwidth dari resource yang lebih penting. Salah satu cara untuk memperbaikinya adalah dengan menggunakan kompresi modern untuk mengurangi ukuran file gambar, dan opsi baru bagi developer web adalah format gambar AVIF. Postingan blog ini membahas pembaruan terkini pada alat open source untuk AVIF, memperkenalkan library encoding libaom dan libavif, serta menyertakan tutorial penggunaan library ini untuk mengenkode gambar AVIF secara efisien.
AVIF adalah format gambar yang didasarkan pada codec video AV1, dan distandarkan oleh Alliance for Open Media. AVIF menawarkan peningkatan kompresi yang signifikan dibandingkan format gambar lain seperti JPEG dan WebP. Meskipun penghematan persisnya akan bergantung pada konten, setelan encoding, dan target kualitas, kami dan lainnya telah mendapatkan penghematan lebih dari 50% dibandingkan JPEG.
Selain itu, AVIF menambahkan dukungan codec dan container untuk fitur gambar baru seperti High Dynamic Range dan Wide Color Gamut, sintesis grain film, serta decoding progresif.
Yang Baru
Sejak menerapkan dukungan AVIF di Chrome M85, dukungan AVIF dalam ekosistem open source telah meningkat di sejumlah bidang.
Libaom
Libaom adalah encoder dan decoder AV1 open source yang dikelola oleh perusahaan di Alliance for Open Media, dan digunakan dalam banyak layanan produksi di Google serta perusahaan anggota lainnya. Antara rilis libaom 2.0.0—sekitar waktu yang sama saat Chrome menambahkan dukungan AVIF—dan rilis 3.1.0 terbaru, ada pengoptimalan encoding gambar diam yang signifikan yang ditambahkan ke codebase. Fitur tersebut meliputi:
- Pengoptimalan untuk encoding multi-threading dan tile.
- 5x pengurangan penggunaan memori.
- 6,5x pengurangan penggunaan CPU, seperti yang ditunjukkan pada diagram di bawah.
Perubahan ini secara signifikan mengurangi biaya encoding AVIF—terutama gambar yang paling sering dimuat atau prioritas tertinggi di situs Anda. Seiring encoding AV1 yang dipercepat hardware semakin tersedia di server dan layanan cloud, biaya untuk membuat gambar AVIF akan terus menurun.
Libavif
Libavif, implementasi referensi AVIF, adalah muxer dan parser AVIF open source yang digunakan di Chrome untuk mendekode gambar AVIF. Alat ini juga dapat digunakan dengan library untuk membuat gambar AVIF dari gambar yang tidak dikompresi yang ada, atau melakukan transcoding dari gambar web yang ada (JPEG, PNG, dll).
Libavif baru-baru ini menambahkan dukungan untuk berbagai setelan encoder, termasuk integrasi dengan setelan encoder libaom lanjutan. Pengoptimalan dalam pipeline pemrosesan seperti konversi YUV-ke-RGB yang cepat menggunakan libyuv dan dukungan alfa yang telah dikalikan sebelumnya mendukung lebih mempercepat proses decoding. Dan terakhir, dukungan untuk mode encoding all-intra yang baru ditambahkan di libaom 3.1.0 menghadirkan semua peningkatan libaom yang disebutkan di atas.
Mengenkode gambar AVIF dengan avifenc
Cara cepat untuk bereksperimen dengan AVIF adalah Squoosh.app. Squoosh menjalankan libavif versi WebAssembly, dan menampilkan banyak fitur yang sama dengan alat command line. Ini merupakan cara mudah untuk membandingkan AVIF dengan format lama dan baru. Ada juga versi CLI dari Squoosh yang ditujukan untuk aplikasi Node.
Namun, WebAssembly belum memiliki akses ke semua primitif performa CPU. Jadi, jika Anda ingin menjalankan libavif secepat mungkin, sebaiknya gunakan encoder command line, avifenc.
Untuk memahami cara mengenkode gambar AVIF, kami akan menyajikan tutorial menggunakan gambar sumber yang sama yang digunakan dalam contoh kami di atas. Untuk memulai, Anda perlu:
Anda juga harus menginstal paket pengembangan untuk zlib, libpng, dan libjpeg. Perintah untuk distribusi Debian dan Ubuntu Linux adalah:
sudo apt-get install zlib1g-dev
sudo apt-get install libpng-dev
sudo apt-get install libjpeg-dev
Membuat encoder command line avifenc
1. Mendapatkan kode
Lihat tag rilis libavif.
git clone -b v0.9.1 https://github.com/AOMediaCodec/libavif.git
2. Ubah direktori ke libavif
cd libavif
Ada banyak cara yang berbeda untuk mengonfigurasi avifenc dan libavif. Anda dapat menemukan informasi selengkapnya di libavif. Kita akan membuat avifenc agar terhubung secara statis ke library encoder dan decoder AV1, libaom.
3. Mendapatkan dan membangun libaom
Ubah ke direktori dependensi eksternal libavif.
cd ext
Perintah berikutnya akan menarik kode sumber libaom dan membangun libaom secara statis.
./aom.cmd
Ubah direktori ke libavif.
cd ..
4. Membangun alat encoding command line, avifenc
Sebaiknya buat direktori build untuk avifenc.
mkdir build
Ubah ke direktori build.
cd build
Buat file build untuk avifenc.
cmake -DCMAKE_BUILD_TYPE=Release -DBUILD_SHARED_LIBS=0 -DAVIF_CODEC_AOM=1 -DAVIF_LOCAL_AOM=1 -DAVIF_BUILD_APPS=1 ..
Membangun avifenc.
make
Anda telah berhasil membangun avifenc!
Memahami parameter command line avifenc
avifenc menggunakan struktur command line:
./avifenc [options] input.file output.avif
Parameter dasar untuk avifenc yang digunakan dalam tutorial ini adalah:
| Avifenc | |
|---|---|
| -mnt 0 | Setel kuantizer min untuk warna ke 0 |
| --maks 63 | Setel kuantizer maksimum untuk warna ke 63 |
| --minalpha 0 | Tetapkan kuantizer min untuk alfa ke 0 |
| --maxalpha 63 | Setel kuantizer maksimum untuk alfa ke 63 |
| -a-penggunaan-akhir=q | Setel mode kontrol tarif ke mode Kualitas Konstan (Q) |
| -a cq-level=Q | Atur tingkat kuantisasi untuk warna dan alfa ke Q |
| -a color:cq-level=Q | Atur tingkat kuantisasi untuk warna ke Q |
| -a alpha:cq-level=Q | Setel tingkat kuantisasi untuk alfa ke Q |
| -a tune=ssim | Sesuaikan untuk SSIM (default-nya adalah men-tuning PSNR) |
| --pekerjaan J | Gunakan thread pekerja J (default: 1) |
| --kecepatan S | Setel kecepatan encoder dari 0-10 (paling lambat. default: 6) |
Opsi cq-level menetapkan level kuantisasi (0-63) untuk mengontrol kualitas warna atau alfa.
Membuat gambar AVIF dengan setelan default
Parameter paling dasar untuk menjalankan avifenc adalah mengatur file input dan output.
./avifenc happy_dog.jpg happy_dog.avif
Kami merekomendasikan command line berikut untuk mengenkode gambar, misalnya pada kuantisasi level 18:
./avifenc --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim happy_dog.jpg happy_dog.avif
Avifenc memiliki banyak opsi yang akan memengaruhi kualitas dan kecepatan.
Jika Anda ingin melihat opsi dan mempelajarinya lebih lanjut, cukup jalankan ./avifenc
Sekarang Anda memiliki gambar AVIF sendiri!
Mempercepat encoder
Salah satu parameter yang mungkin perlu diubah
bergantung pada jumlah core yang Anda miliki di mesin adalah parameter --jobs.
Parameter ini menyetel jumlah thread yang akan digunakan avifenc untuk membuat gambar AVIF.
Coba jalankan ini di command line.
./avifenc --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim --jobs 8 happy_dog.jpg happy_dog.avif
Kode ini akan memberi tahu avifenc untuk menggunakan 8 thread saat membuat gambar AVIF, yang mempercepat encoding AVIF sekitar 5x.
Efek pada Largest Contentful Paint (LCP)
Gambar adalah kandidat umum untuk metrik Largest Contentful Paint (LCP). Salah satu rekomendasi umum untuk meningkatkan kecepatan pemuatan gambar LCP adalah memastikan bahwa gambar dioptimalkan. Dengan mengurangi ukuran transfer resource, Anda meningkatkan waktu pemuatan resource, yang merupakan salah satu dari empat fase utama yang harus ditargetkan saat menangani kandidat LCP yang berupa gambar.
Menggunakan CDN gambar sangat direkomendasikan saat mengoptimalkan gambar, karena memerlukan upaya yang jauh lebih mudah daripada menyiapkan pipeline pengoptimalan gambar dalam proses build situs atau secara manual menggunakan biner encoder untuk mengoptimalkan gambar secara manual. Namun, untuk beberapa project, CDN gambar mungkin mahal. Jika demikian, pertimbangkan hal berikut saat melakukan pengoptimalan dengan encoder avifenc:
- Pahami berbagai opsi yang ditawarkan encoder. Anda dapat memperoleh penghematan tambahan sambil tetap mempertahankan kualitas gambar yang memadai dengan bereksperimen menggunakan beberapa fitur encoding AVIF yang tersedia.
- AVIF menyediakan encoding lossy dan lossless. Bergantung pada konten gambar, satu jenis encoding dapat berperforma lebih baik daripada yang lain. Misalnya, foto yang biasanya disajikan sebagai JPEG mungkin akan melakukan yang terbaik dengan encoding lossy, sedangkan encoding lossless kemungkinan terbaik untuk gambar yang berisi detail sederhana atau seni garis yang biasanya berfungsi sebagai PNG.
- Jika menggunakan pemaket dengan dukungan komunitas untuk imagemin, pertimbangkan untuk menggunakan paket imagemin-avif agar pemaket Anda dapat menghasilkan varian gambar AVIF.
Dengan bereksperimen menggunakan AVIF, Anda mungkin dapat mewujudkan peningkatan waktu LCP situs Anda jika kandidat LCP berupa gambar. Untuk mengetahui informasi selengkapnya tentang cara mengoptimalkan LCP, baca panduan cara mengoptimalkan LCP.
Kesimpulan
Dengan libaom, libavif, dan alat open source lainnya, Anda bisa mendapatkan kualitas dan performa gambar terbaik untuk situs menggunakan AVIF. Formatnya masih relatif baru, dan pengoptimalan serta integrasi alat sedang aktif dikembangkan. Jika ada pertanyaan, komentar, atau permintaan fitur, hubungi milis diskusi av1, komunitas GitHub AOM, dan wiki AVIF.