Pernahkah Anda melihat animasi GIF pada layanan seperti Imgur atau Gfycat, yang diperiksa di alat developer Anda, tetapi baru tahu bahwa GIF benar-benar sebuah video? Terdapat memiliki alasan kuat untuk itu. GIF animasi bisa berukuran sangat besar.
Untungnya, ini adalah salah satu area performa pemuatan yang dapat Anda lakukan hanya sedikit pekerjaan untuk merealisasikan keuntungan yang besar! Dengan mengonversi GIF berukuran besar menjadi video, Anda dapat menghemat biaya {i>bandwidth<i} Anda.
Ukur terlebih dahulu
Gunakan Lighthouse untuk memeriksa situs Anda guna menemukan GIF yang dapat dikonversi menjadi video. Di beberapa DevTools, klik tab Audits dan centang kotak Performance (Performa). Kemudian jalankan Lighthouse dan memeriksa laporannya. Jika memiliki GIF yang dapat dikonversi, Anda akan melihat saran "Gunakan format video untuk konten animasi":
Buat video MPEG
Ada sejumlah cara untuk
mengonversi GIF ke video,
FFmpeg adalah alat yang digunakan dalam panduan ini.
Untuk menggunakan FFmpeg guna mengonversi GIF, my-animation.gif ke video MP4, jalankan
perintah berikut di konsol Anda:
ffmpeg -i my-animation.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4
Tindakan ini memberi tahu FFmpeg untuk mengambil my-animation.gif sebagai input, yang ditunjukkan oleh
-i, dan untuk mengonversinya menjadi video bernama my-animation.mp4.
Encoder libx264 hanya berfungsi dengan file yang memiliki dimensi genap, seperti 320 px kali 240 piksel. Jika GIF input memiliki dimensi yang ganjil, Anda dapat menyertakan filter pangkas untuk hindari FFmpeg menampilkan 'height/width tidak dibagi 2' {i>error<i}:
ffmpeg -i my-animation.gif -vf "crop=trunc(iw/2)*2:trunc(ih/2)*2" -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4
Buat video WebM
Meskipun MP4 sudah ada sejak tahun 1999, WebM adalah format file yang relatif baru pertama kali dirilis pada 2010. Video WebM jauh lebih kecil dibandingkan video MP4, tetapi tidak semua browser mendukung WebM jadi masuk akal untuk membuat keduanya.
Untuk menggunakan FFmpeg guna mengonversi my-animation.gif ke video WebM, jalankan perintah berikut
di konsol Anda:
ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm
Bandingkan perbedaannya
Penghematan biaya antara GIF dan video bisa sangat signifikan.
Dalam contoh ini, GIF awal adalah 3,7 MB, dibandingkan dengan versi MP4, adalah 551 KB, dan versi WebM, yaitu hanya 341 KB!
Ganti gambar GIF dengan video
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>.
<video autoplay loop muted playsinline></video>
Elemen <video> dengan atribut ini diputar secara otomatis, berulang tanpa batas,
tidak memutar audio, dan memutar inline (yaitu, bukan layar penuh), semua karakteristik
perilaku yang diharapkan dari GIF animasi. 🎉
Terakhir, elemen <video> memerlukan satu atau beberapa elemen turunan <source>
merujuk ke file video berbeda yang dapat dipilih oleh browser, tergantung
dukungan format browser. Sediakan WebM dan MP4, agar jika browser
tidak mendukung WebM, tetapi dapat kembali ke MP4.
<video autoplay loop muted playsinline>
<source src="my-animation.webm" type="video/webm">
<source src="my-animation.mp4" type="video/mp4">
</video>
Efek pada Largest Contentful Paint (LCP)
Perlu diperhatikan bahwa meskipun elemen <img> merupakan kandidat untuk LCP, elemen <video> tanpa gambar poster bukan kandidat LCP. Solusi dalam kasus mengemulasi GIF animasi adalah tidak dengan menambahkan atribut poster ke elemen <video>, karena gambar tersebut akan tidak digunakan.
Apa pengaruhnya bagi situs Anda? Rekomendasinya adalah tetap menggunakan <video>, bukan GIF animasi, tetapi dengan pemahaman bahwa media tersebut tidak akan menjadi kandidat untuk LCP, dan kandidat terbesar berikutnya akan digunakan sebagai gantinya. Karena GIF dan <video> biasanya lebih besar sehingga lebih lambat didownload, berpindah ke kandidat LCP yang berbeda kemungkinan besar akan meningkatkan LCP situs.