Ganti GIF dengan video

Rob Dodson

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

Ukur terlebih dahulu

Pertama, ukur performa situs tersebut:

  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 centang Performa sudah dicentang dalam daftar Kategori.
  5. Klik tombol Buat laporan.

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

Mendapatkan FFmpeg

Ada sejumlah cara untuk mengonversi GIF ke video; yang digunakan panduan ini FFmpeg. Alat ini sudah terinstal di Glitch VM, dan, jika mau, Anda dapat mengikuti petunjuk ini untuk menginstalnya di lokal komputer juga.

Membuka konsol

Periksa kembali apakah FFmpeg terinstal dan berfungsi:

  1. Klik Remix to Edit agar project dapat diedit.
  2. Klik Terminal (catatan: jika tombol Terminal tidak muncul, Anda mungkin perlu 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 gambar.
  • 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

Tindakan ini akan memberi tahu FFmpeg untuk mengambil input, yang ditandai oleh tanda -i, dari {i>cat-herd.gif<i} dan mengubahnya menjadi video yang disebut {i>cat-herd.mp4<i}. Proses ini akan memerlukan kedua untuk dijalankan. Setelah perintah selesai, Anda akan dapat mengetik ls lagi dan melihat dua file:

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

Buat video WebM

Meskipun MP4 sudah ada sejak tahun 1999, WebM adalah pendatang baru yang pertama kali dirilis pada 2010. Video WebM bisa jauh lebih kecil daripada video MP4, jadi masuk akal untuk menghasilkan keduanya. Untungnya, elemen <video> akan memungkinkan Anda menambahkan beberapa sumber, jadi jika browser tidak mendukung WebM, maka browser tersebut 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 harus 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 aslinya adalah 3,7 M, sedangkan versi MP4 adalah 551K, dan Versi WebM hanya 341K. Itu adalah penghematan besar!

Update HTML untuk membuat ulang efek GIF

GIF animasi memiliki tiga karakteristik utama yang harus direplikasi:

  • Video diputar secara otomatis.
  • Metode ini berulang secara terus-menerus (biasanya, tetapi memungkinkan juga untuk mencegah pengulangan).
  • Mereka senyap.

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

  • Dalam 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, tanpa memutar audio, dan memutarnya secara inline (yaitu, bukan layar penuh), semua perilaku yang diharapkan dari GIF animasi. 🎉

Menentukan sumber Anda

Anda hanya perlu menentukan sumber video. Elemen <video> memerlukan satu atau beberapa elemen turunan <source> yang menunjuk ke file video yang berbeda yang dapat dipilih oleh browser, bergantung pada dukungan format. Perbarui <video> dengan elemen <source> yang ditautkan ke video 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.

Pengalamannya akan terlihat sama. Sejauh ini tidak ada masalah.

Verifikasi dengan Lighthouse

Dengan situs live terbuka:

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

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