Ganti GIF dengan video

Rob Dodson

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

Ukur terlebih dahulu

Pertama-tama, ukur performa situs:

  1. Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Kemudian 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 dalam audit "Gunakan format video untuk konten animasi".

Mendapatkan FFmpeg

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

Membuka konsol

Periksa kembali apakah FFmpeg telah diinstal dan berfungsi:

  1. Klik Remix to Edit untuk menjadikan 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

Mengubah GIF menjadi 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

Tindakan ini akan memberi tahu FFmpeg untuk mengambil input, yang ditandai dengan tanda -i, dari cat-herd.gif dan mengonversinya menjadi video bernama cat-herd.mp4. Proses ini memerlukan waktu beberapa saat 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 awalnya dirilis pada tahun 2010. Video WebM dapat 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 beralih 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 asli adalah 3,7 M, sedangkan versi MP4 adalah 551 K, dan versi WebM hanya 341K. Itu adalah penghematan yang sangat besar.

Memperbarui HTML untuk membuat ulang efek GIF

GIF animasi memiliki tiga karakteristik utama yang harus direplikasi:

  • Video akan diputar secara otomatis.
  • Loop ini terus berulang (biasanya, tetapi Anda dapat mencegah looping).
  • Mereka tidak bersuara.

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, tidak memutar audio, dan diputar secara inline (yaitu, tidak dalam layar penuh), semua perilaku yang diharapkan dari GIF animasi. 🎉

Menentukan sumber

Yang perlu Anda lakukan hanyalah menentukan sumber video. Elemen <video> memerlukan satu atau beberapa elemen turunan <source> yang mengarah ke file video berbeda yang dapat dipilih oleh browser, bergantung pada dukungan format. Perbarui <video> dengan elemen <source> yang tertaut ke video kumpulan 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. Kemudian tekan Layar Penuh layar penuh.

Pengalamannya akan terlihat sama. Sejauh ini tidak ada masalah.

Memverifikasi dengan Lighthouse

Dengan situs aktif 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 audit "Gunakan format video untuk konten animasi" kini lulus. Hore! 💪