Pernahkah Anda melihat GIF animasi di layanan seperti Imgur atau Gfycat, memeriksanya di alat developer, lalu menemukan bahwa GIF benar-benar video? Ada alasan yang baik untuk itu. GIF animasi dapat berukuran besar.
Untungnya, ini adalah salah satu area performa pemuatan yang memungkinkan Anda melakukan sedikit upaya untuk mewujudkan keuntungan besar. Dengan mengonversi GIF berukuran besar menjadi video, Anda dapat menghemat bandwidth pengguna secara besar.
Ukur terlebih dahulu
Gunakan Lighthouse untuk memeriksa situs Anda apakah ada GIF yang dapat dikonversi menjadi video. Di DevTools, klik tab Audits dan centang kotak Performance. Lalu jalankan Lighthouse dan periksa laporannya. Jika memiliki GIF yang dapat dikonversi, Anda akan melihat saran "Gunakan format video untuk konten animasi":
Membuat video MPEG
Ada sejumlah cara untuk mengonversi GIF menjadi video,
FFmpeg adalah alat yang digunakan dalam panduan ini.
Untuk menggunakan FFmpeg guna mengonversi GIF, my-animation.gif menjadi 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
Kode ini memberi tahu FFmpeg untuk mengambil my-animation.gif sebagai input, yang ditandai dengan
flag -i, dan untuk mengonversinya menjadi video bernama my-animation.mp4.
Encoder libx264 hanya berfungsi dengan file yang memiliki dimensi merata, seperti 320x240 piksel. Jika GIF input memiliki dimensi yang ganjil, Anda dapat menyertakan filter pangkas untuk menghindari FFmpeg menampilkan error 'tinggi/lebar tidak dapat dibagi 2':
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 1999, WebM merupakan format file yang relatif baru dan baru dirilis pada tahun 2010. Video WebM jauh lebih kecil daripada video MP4, namun tidak semua browser mendukung WebM sehingga 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, yaitu 551 KB, dan versi WebM, yang hanya berukuran 341 KB!
Mengganti img GIF dengan video
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>.
<video autoplay loop muted playsinline></video>
Elemen <video> dengan atribut ini diputar secara otomatis, berulang tanpa henti,
tidak memutar audio, dan diputar inline (yaitu, bukan layar penuh), semua perilaku
ciri khas yang diharapkan dari GIF animasi. 🎉
Terakhir, elemen <video> memerlukan satu atau beberapa elemen turunan <source>
yang mengarah ke berbagai file video yang dapat dipilih browser, bergantung pada
dukungan format browser. Berikan WebM dan MP4, sehingga jika browser tidak mendukung WebM, browser dapat beralih 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> adalah kandidat untuk LCP, elemen <video> tanpa gambar poster bukanlah kandidat LCP. Solusi dalam kasus mengemulasi GIF animasi tidak menambahkan atribut poster ke elemen <video> Anda, karena gambar tersebut tidak akan digunakan.
Apa pengaruhnya bagi situs Anda? Sebaiknya tetap gunakan <video>, bukan GIF animasi, tetapi dengan pemahaman bahwa media tersebut tidak akan menjadi kandidat untuk LCP, dan kandidat terbesar berikutnya akan digunakan. Karena GIF dan <video> biasanya lebih besar dan lebih lambat didownload, berpindah ke kandidat LCP yang berbeda kemungkinan besar juga akan meningkatkan LCP situs.