Dalam codelab ini, tingkatkan performa dengan mengganti GIF animasi dengan video Anda.
Ukur terlebih dahulu
Pertama, ukur performa situs tersebut:
- Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar penuh .
- Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
- Klik tab Lighthouse.
- Pastikan kotak centang Performa sudah dicentang dalam daftar Kategori.
- 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:
- Klik Remix to Edit agar project dapat diedit.
- Klik Terminal (catatan: jika tombol Terminal tidak muncul, Anda mungkin perlu menggunakan opsi Layar penuh).
- 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 akhir, memutar tanpa audio, dan memutar 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 .
Pengalamannya akan terlihat sama. Sejauh ini tidak ada masalah.
Verifikasi dengan Lighthouse
Dengan situs live terbuka:
- Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
- Klik tab Lighthouse.
- Pastikan kotak centang Performa sudah dicentang dalam daftar Kategori.
- Klik tombol Buat laporan.
Anda akan melihat bahwa kotak "Gunakan format video untuk konten animasi" audit kini menjadi lulus! Hore! 💪