Ganti GIF dengan video

Raditya Kusuma

Dalam codelab ini, tingkatkan performa dengan mengganti GIF animasi dengan video.

Ukur terlebih dahulu

Pertama, ukur performa situs:

  1. Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar Penuh layar penuh.
  2. Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
  3. Klik tab Lighthouse.
  4. Pastikan kotak Performa dicentang pada daftar Kategori.
  5. Klik tombol Buat laporan.

Setelah selesai, Anda akan melihat bahwa Lighthouse telah menandai GIF sebagai masalah dalam audit "Gunakan format video untuk konten animasi".

Dapatkan FFmpeg

Ada sejumlah cara untuk mengonversi GIF menjadi video. Panduan ini menggunakan FFmpeg. Alat ini sudah terinstal di Glitch VM, dan jika ingin, Anda juga dapat mengikuti petunjuk berikut untuk menginstalnya di komputer lokal.

Membuka konsol

Periksa kembali apakah FFmpeg sudah terinstal dan berfungsi:

  1. Klik Remix untuk Mengedit agar project dapat diedit.
  2. Klik Terminal (catatan: jika tombol Terminal tidak muncul, Anda mungkin harus menggunakan opsi Layar Penuh).
  3. Di konsol, jalankan:
which ffmpeg

Anda akan mendapatkan jalur file kembali:

/usr/bin/ffmpeg

Ubah GIF ke video

  • Di konsol, jalankan cd images untuk masuk ke direktori image.
  • Jalankan ls untuk melihat kontennya.

Anda akan melihat sesuatu seperti ini:

$ ls
cat-herd.gif
  • Di konsol, jalankan:
ffmpeg -i cat-herd.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p cat-herd.mp4

Kode ini akan memberi tahu FFmpeg untuk mengambil input, yang ditandai dengan flag -i, dari cat-herd.gif dan mengonversinya menjadi video bernama cat-herd.mp4. Proses ini memerlukan waktu satu detik untuk dijalankan. Setelah perintah selesai, Anda dapat mengetik ls lagi dan melihat dua file:

$ ls
cat-herd.gif  cat-herd.mp4

Buat video WebM

Meskipun MP4 sudah ada sejak 1999, WebM adalah pendatang baru yang relatif baru dirilis pada tahun 2010. Video WebM bisa jauh lebih kecil daripada video MP4, jadi sebaiknya buat keduanya. Untungnya, elemen <video> akan memungkinkan Anda menambahkan beberapa sumber, sehingga jika browser tidak mendukung WebM, browser dapat kembali ke MP4.

  • Di konsol, jalankan:
ffmpeg -i cat-herd.gif -c vp9 -b:v 0 -crf 41 cat-herd.webm
  • Untuk memeriksa ukuran file, jalankan:
ls -lh

Anda seharusnya memiliki satu GIF dan dua video:

$ ls -lh
total 4.5M
-rw-r--r-- 1 app app 3.7M May 26 00:02 cat-herd.gif
-rw-r--r-- 1 app app 551K May 31 17:45 cat-herd.mp4
-rw-r--r-- 1 app app 341K May 31 17:44 cat-herd.webm

Perhatikan bahwa GIF asli adalah 3,7 M, versi MP4 551K, dan versi WebM hanya 341K. Itu penghematan yang besar!

Mengupdate HTML untuk membuat ulang efek GIF

GIF animasi memiliki tiga karakteristik utama yang harus direplikasi oleh video:

  • Iklan diputar secara otomatis.
  • Pengulangan operasi berlangsung terus-menerus (biasanya, tetapi dapat juga mencegah pengulangan).
  • Mereka diam.

Untungnya, Anda dapat membuat ulang perilaku ini menggunakan elemen <video>.

  • Di file index.html, ganti baris dengan <img> dengan:
<img src="/images/cat-herd.gif" alt="Cowboys herding cats.">
<video autoplay loop muted playsinline></video>

Elemen <video> yang menggunakan atribut ini akan diputar secara otomatis, berulang tanpa henti, tidak memutar audio, dan diputar inline (yaitu, bukan layar penuh), semua perilaku yang diharapkan dari GIF animasi. 🎉

Menentukan sumber Anda

Hal yang harus dilakukan hanyalah menentukan sumber video Anda. Elemen <video> memerlukan satu atau beberapa elemen turunan <source> yang mengarah ke file video berbeda yang dapat dipilih browser, bergantung pada dukungan format. Perbarui <video> dengan elemen <source> yang tertaut ke video penggembala kucing Anda:

<video autoplay loop muted playsinline>
  <source src="/images/cat-herd.webm" type="video/webm">
  <source src="/images/cat-herd.mp4" type="video/mp4">
</video>

Pratinjau

  • Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar Penuh layar penuh.

Pengalaman akan terlihat sama. Sejauh ini tidak ada masalah.

Verifikasi dengan Lighthouse

Saat situs live terbuka:

  1. Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
  2. Klik tab Lighthouse.
  3. Pastikan kotak Performa dicentang pada daftar Kategori.
  4. Klik tombol Buat laporan.

Anda akan melihat bahwa audit "Gunakan format video untuk konten animasi" kini lulus. Hore! 💪