Kami sering menulis tentang penggelembungan situs pada situs dari gambar, dan alat seperti Lighthouse menonjol saat pemuatan gambar berdampak negatif terhadap pengalaman pengguna, seperti meningkatkan waktu pemuatan, atau mengurangi bandwidth dari resource yang lebih penting. Salah satu cara untuk memperbaikinya adalah menggunakan kompresi modern untuk mengurangi ukuran file gambar, dan opsi baru untuk developer web adalah format gambar AVIF. Postingan blog ini membahas update terbaru alat open source untuk AVIF, memperkenalkan library encoding libaom dan libavif, dan menyertakan tutorial penggunaan library tersebut untuk mengenkode gambar AVIF secara efisien.
AVIF adalah format gambar berdasarkan codec video AV1, dan distandarisasi 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 yang lain telah mengalami 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, film grain synthesis, dan progressive decoding.
Yang Baru
Sejak mendapatkan dukungan AVIF di Chrome M85, dukungan AVIF di ekosistem open source telah ditingkatkan di sejumlah aspek.
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 dan perusahaan anggota lainnya. Antara rilis libaom 2.0.0—sekitar waktu yang sama dengan Chrome menambahkan dukungan AVIF—dan rilis 3.1.0 terbaru, terdapat pengoptimalan encoding gambar diam yang signifikan yang ditambahkan ke codebase. Contoh tersebut meliputi:
- Pengoptimalan untuk multi-threading dan encoding bersusun.
- Pengurangan 5x dalam penggunaan memori.
- 6,5x penurunan penggunaan CPU, seperti yang ditunjukkan pada diagram di bawah ini.
Perubahan ini secara signifikan mengurangi biaya encoding AVIF—terutama gambar yang paling sering dimuat atau gambar dengan prioritas tertinggi di situs Anda. Seiring dengan encoding dengan akselerasi hardware pada AV1 yang makin 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 libaom untuk membuat gambar AVIF dari gambar yang sudah tidak dikompresi, atau melakukan transcoding dari gambar web yang sudah ada (JPEG, PNG, dll.).
Libavif baru-baru ini menambahkan dukungan untuk berbagai setelan encoder, termasuk integrasi dengan setelan encoder library lanjutan. Pengoptimalan dalam pipeline pemrosesan seperti konversi YUV ke RGB yang cepat menggunakan libyuv dan dukungan alfa yang dilipatgandakan akan semakin 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 adalah cara mudah untuk membandingkan AVIF dengan format lama dan baru. Ada juga Squoosh versi CLI yang ditujukan untuk aplikasi Node.
Namun, WebAssembly belum memiliki akses ke semua primitif performa CPU, jadi jika Anda ingin menjalankan libavif dalam kecepatan paling cepat, 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 di atas. Untuk memulai, Anda akan memerlukan:
Anda juga perlu 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 arsitektur command line encoder
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 berbeda untuk mengkonfigurasi 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. Dapatkan dan bangun 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 {i>build <i}untuk {i>avifenc<i}.
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 ..
Membuat Avifenc.
make
Kamu telah berhasil membuat pesawat!
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 | Tetapkan quantizer min untuk warna ke 0 |
| --maks 63 | Tetapkan quantizer maksimum untuk warna ke 63 |
| --minalpha 0 | Tetapkan quantizer min untuk alfa ke 0 |
| --maxalpha 63 | Tetapkan quantizer maksimum untuk alfa ke 63 |
| -a end-usage=q | Menetapkan mode kontrol tarif ke mode Kualitas Konstan (Q) |
| {i>-a cq-level=Q<i} | Setel tingkat kuantisasi untuk warna dan alfa ke Q |
| -a color:cq-level=Q | Menyetel tingkat kuantisasi untuk warna ke Q |
| -a alpha:cq-level=Q | Menyetel level kuantisasi untuk alfa ke Q |
| -sebuah lagu=ssim | Sesuaikan SSIM (setelan default untuk PSNR) |
| --pekerjaan J | Menggunakan thread pekerja J (default: 1) |
| --kecepatan S | Menyetel kecepatan encoder dari 0-10 (paling lambat-cepat. default: 6) |
Opsi level cq menetapkan level kuantisasi (0-63) untuk mengontrol kualitas warna atau alfa.
Membuat gambar AVIF dengan setelan default
Parameter yang paling dasar untuk menjalankan avifenc, adalah mengatur file input dan output.
./avifenc happy_dog.jpg happy_dog.avif
Sebaiknya gunakan command line berikut untuk mengenkode gambar, misalnya pada level kuantisasi 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
Anda sekarang memiliki gambar AVIF Anda sendiri!
Mempercepat encoder
Salah satu parameter yang mungkin perlu diubah
bergantung pada jumlah core yang Anda miliki pada mesin adalah parameter --jobs.
Parameter ini menetapkan 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
Tindakan ini memberi tahu avifenc untuk menggunakan 8 thread saat membuat image AVIF, yang mempercepat encoding AVIF sekitar 5x.
Efek pada Largest Contentful Paint (LCP)
Gambar merupakan 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, yaitu gambar.
Menggunakan CDN gambar sangat direkomendasikan saat mengoptimalkan gambar karena prosesnya jauh lebih mudah daripada menyiapkan pipeline pengoptimalan gambar dalam proses build situs atau secara manual menggunakan biner encoder untuk mengoptimalkan gambar secara manual. Namun, CDN gambar mungkin mahal untuk sebagian project. Jika Anda mengalaminya, pertimbangkan hal-hal berikut saat melakukan pengoptimalan dengan encoder avifenc:
- Pelajari opsi yang ditawarkan encoder. Anda dapat menghemat lebih banyak sambil tetap mempertahankan kualitas gambar yang memadai dengan bereksperimen dengan beberapa fitur encoding AVIF yang tersedia.
- AVIF menyediakan encoding lossy dan lossless. Tergantung pada konten gambar, satu jenis encoding mungkin memiliki performa yang lebih baik daripada yang lain. Sebagai contoh, foto yang biasanya disajikan sebagai JPEG mungkin akan berfungsi optimal dengan encoding lossy, sedangkan encoding lossless kemungkinan paling baik untuk gambar yang berisi detail sederhana atau seni garis yang biasanya disajikan sebagai PNG.
- Jika menggunakan bundler dengan dukungan komunitas untuk imagemin, pertimbangkan untuk menggunakan paket imagemin-avif agar bundler Anda dapat menghasilkan varian image AVIF.
Dengan bereksperimen menggunakan AVIF, Anda mungkin dapat memperoleh peningkatan kualitas untuk waktu LCP situs Anda jika kandidat LCP adalah gambar. Untuk informasi selengkapnya tentang mengoptimalkan LCP, baca panduan tentang mengoptimalkan LCP.
Kesimpulan
Dengan libaom, libavif, dan alat open source lainnya, Anda bisa mendapatkan kualitas dan performa gambar terbaik untuk situs menggunakan AVIF. Format ini masih relatif baru, dan pengoptimalan serta integrasi alat terus dikembangkan. Jika ada pertanyaan, komentar, atau permintaan fitur, hubungi milis av1-discuss, komunitas GitHub AOM, dan AVIF wiki.