Menayangkan Gambar AVIF

1. Pengantar

Gambar menyumbang lebih dari 60% byte rata-rata yang diperlukan untuk memuat halaman web. Dengan AVIF, Anda dapat memperkecil gambar dan membuat situs Anda dimuat lebih cepat.

Apa itu AVIF?

AVIF adalah format gambar baru yang berasal dari bitream video AV1. AVIF dibuat untuk efisiensi kompresi.

Mengapa AVIF?

Gambar AVIF jauh lebih kecil daripada gambar JPEG, PNG, GIF, atau WebP dengan kualitas yang sama atau lebih baik.

Yang akan Anda pelajari

• Cara membuat gambar AVIF dari gambar Anda
• Cara merender gambar AVIF di halaman web

Yang Anda butuhkan

• Chrome versi 85 atau yang lebih baru
• Editor teks
• cmake
• git
• ninja
• Gambar. Saya menyediakannya di sini
• FFmpeg

2. Membuat gambar AVIF dengan Squoosh

Squoosh adalah aplikasi web kompresi gambar. Dengan squoosh, Anda dapat dengan mudah mengompresi gambar menjadi gambar AVIF.

1. Buka https://squoosh.app
2. Letakkan gambar lokal ke Squoosh.

3. Pilih AVIF dari kotak drop-down Compress.

Squoosh kemudian akan mengompresi gambar Anda menjadi gambar AVIF. Setelah Squoosh selesai, tombol download akan ditampilkan dengan beberapa statistik pada gambar AVIF di sudut kanan bawah.

Gambar sampel asli adalah 3340 kB dan gambar terkompresi adalah 378 kB. Gambar sampel dikompresi hampir 10x lebih kecil dari gambar aslinya.

4. Download gambar AVIF

Klik tombol download dan gambar AVIF akan disimpan ke drive lokal Anda.

Anda dapat melihat gambar AVIF dengan menarik gambar ke Chrome.

Anda sekarang memiliki gambar AVIF Anda sendiri!

3. Membuat arsitektur command line encoder

avifenc adalah aplikasi command line yang dapat mengonversi gambar PNG dan JPEG menjadi gambar AVIF. avifenc menggunakan libavif, yang merupakan {i>library<i} yang dapat mendekode dan mengenkode gambar AVIF. Jika Anda memiliki banyak gambar yang ingin dikonversi ke AVIF, maka menggunakan encoder baris perintah, avifenc, mungkin merupakan pilihan yang baik.

Chrome menggunakan libavif untuk merender gambar AVIF.

1. Dapatkan kodenya.

git clone 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 av1 encoder dan decoder, libaom.

3. Dapatkan dan bangun libaom.

Ubah ke direktori ekstensi libavif.

cd ext

Perintah berikutnya akan menarik kode sumber libaom dan membangun libaom secara statis.

./aom.cmd

Ubah direktori ke libavif.

cd ../

4. Buat alat encoding command line, yakni 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 -DAVIF_LOCAL_AOM=1 -DAVIF_CODEC_AOM=1 -DBUILD_SHARED_LIBS=0 -DAVIF_BUILD_APPS=1 ../

Membuat Avifenc.

make

Kamu berhasil membuat pesawat!

4. Membuat gambar AVIF dengan avifenc

1. Buat image AVIF dengan setelan default.

Parameter yang paling dasar untuk menjalankan avifenc, adalah menetapkan file input dan output.

./avifenc happy_dog.jpg example.avif --min 0 --max 63 -a end-usage=q -a cq-level=32 -a tune=ssim -a deltaq-mode=3 -a sharpness=3 -y 420

"–min 0 –max 63 -a end-usage=q -a cq-level=32 -a tune=ssim -a deltaq-mode=3 -a-ketajaman=3 -y 420" adalah pengaturan yang direkomendasikan untuk gambar 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 kedua Anda sendiri!

2. 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 command line ini.

./avifenc happy_dog.jpg example.avif --jobs 8

Ini memberi tahu avifenc untuk menggunakan 8 thread saat membuat gambar AVIF. Di komputer saya, cara ini mempercepat pengkodean AVIF hingga 5x.

5. Merender gambar AVIF di halaman web.

Sekarang mari kita tunjukkan semua kerja keras Anda kepada dunia.

1. Buat halaman web untuk menayangkan gambar AVIF Anda.

Buat file bernama avif_example.html.

Buka avif_example.html di editor teks Anda dan ketik kode ini:

<html>
  <head>
    <title>AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="example.avif" />
      <img src="happy_dog.jpg" />
    </picture>
  </body>
</html>

Salin file sumber (dalam kasus saya happy_dog.jpg) dan file AVIF (eaxmple.avif) ke direktori yang sama dengan avif_example.html.

Kita menggunakan elemen untuk merender gambar AVIF jika browser mendukung AVIF, dengan penggantian ke JPEG jika browser tidak mendukung. Anda dapat menemukan informasi selengkapnya tentang di sini.

2. Buka halaman web di Chrome.

Salah satu cara untuk membuka file html adalah dengan menarik avif_example.html ke Chrome. Opsi lain untuk membuka file html adalah menyajikan avif_example.html dari server HTTP.

Sekarang, gambar AVIF Anda akan dirender di Chrome. Anda dapat mengujinya dengan mengklik kanan gambar dan memilih Save image as..., yang akan membuka kotak dialog dengan example.avif. Opsi lainnya adalah membuka Chrome Developer Tools dan melihat bahwa example.avif telah didownload.

6. Membuat gambar AVIF Animasi

1. Konversikan media sumber ke format y4m.

avifenc mendukung y4m sebagai input untuk membuat gambar AVIF animasi. Opsi yang bagus untuk membuat file y4m adalah menggunakan FFmpeg.

File Y4m tidak dikompresi sehingga bisa menjadi sangat besar.

ffmpeg -i input.gif -pix_fmt yuv420p -f yuv4mpegpipe output.y4m

2. Buat gambar animasi AVIF.

Saya sudah membuat file y4m untuk Anda gunakan jika Anda tidak memiliki file media sumber: ice_qcif_15fps.y4m. File tersebut berasal dari Xiph.org Video Test Media.

Jalankan perintah ini untuk membuat gambar animasi AVIF dari file y4m.

avifenc ice_qcif_15fps.y4m animated.avif

Anda sekarang memiliki gambar animasi AVIF Anda sendiri!

3. Merender gambar AVIF animasi di halaman web.

Buat file bernama avif_animated_example.html.

Saya sudah membuat file gif untuk digunakan apabila Anda tidak memiliki file media sumber: ice_qcif_15fps.gif.

Perhatikan bahwa file gif berukuran ~35x lebih besar dan kualitas filenya jauh lebih buruk.

Buka avif_animated_example.html di editor teks Anda dan ketik kode ini:

<html>
  <head>
    <title>Animated AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="animated.avif" />
      <img src="ice_qcif_15fps.gif" />
    </picture>
  </body>
</html>

Salin file sumber (dalam kasus di atas ice_qcif_15fps.gif) dan file AVIF (animated.avif) ke direktori yang sama dengan avif_animated_example.html.

4. Buka halaman web di Chrome.

Salah satu cara untuk membuka file html adalah dengan menarik avif_animated_example.html ke Chrome. Opsi lain untuk membuka file html adalah menyajikan avif_animated_example.html dari server HTTP.

Sekarang, gambar animasi AVIF Anda akan dirender di Chrome.

Jika menggunakan media contoh yang disediakan, contohnya akan terlihat seperti ini:

Kecuali dengan AVIF animasi, kualitas jauh lebih baik.

Anda dapat menguji ini adalah gambar animasi AVIF dengan mengklik kanan gambar dan memilih Save image as..., yang akan membuka kotak dialog dengan animated.avif. Opsi lainnya adalah membuka Chrome Developer Tools dan melihat bahwa animated.avif telah didownload.

7. Selamat!

Anda telah menyelesaikan codelab penyajian gambar AVIF!

Saya harap Anda dapat memahami bagaimana AVIF dapat membantu membuat gambar menjadi lebih kecil dan lebih efisien untuk ditransmisikan melalui web. Anda dapat mempelajari lebih lanjut fitur AVIF di postingan menarik yang ditulis oleh Jake Archibald.