Ganti GIF animasi dengan video untuk pemuatan halaman yang lebih cepat

Pernahkah Anda melihat GIF animasi di layanan seperti Imgur atau Gfycat, memeriksanya di alat developer, lalu mendapati bahwa GIF tersebut sebenarnya adalah video? Ada alasan yang bagus untuk itu. GIF animasi bisa berukuran sangat besar.

Panel jaringan DevTools yang menampilkan gif berukuran 13,7 MB.

Untungnya, ini adalah salah satu area performa pemuatan tempat Anda dapat melakukan pekerjaan yang relatif sedikit untuk mendapatkan hasil yang besar. Dengan mengonversi GIF besar menjadi video, Anda dapat menghemat bandwidth pengguna secara signifikan.

Ukur terlebih dahulu

Gunakan Lighthouse untuk memeriksa GIF di situs Anda yang dapat dikonversi menjadi video. Di DevTools, klik tab Audit dan centang kotak Performa. Kemudian, jalankan Lighthouse dan periksa laporannya. Jika memiliki GIF yang dapat dikonversi, Anda akan melihat saran untuk "Gunakan format video untuk konten animasi":

Audit Lighthouse gagal, menggunakan 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

Tindakan ini akan memberi tahu FFmpeg untuk mengambil my-animation.gif sebagai input, yang ditunjukkan oleh tanda -i, dan mengonversinya menjadi video yang disebut my-animation.mp4.

Encoder libx264 hanya berfungsi dengan file yang memiliki dimensi genap, seperti 320x 240 piksel. Jika GIF input memiliki dimensi ganjil, Anda dapat menyertakan filter pemangkasan 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

Membuat video WebM

Meskipun MP4 sudah ada sejak tahun 1999, WebM adalah format file yang relatif baru yang awalnya dirilis pada tahun 2010. Video WebM jauh lebih kecil daripada video MP4, tetapi tidak semua browser mendukung WebM sehingga sebaiknya buat keduanya.

Untuk menggunakan FFmpeg guna mengonversi my-animation.gif menjadi video WebM, jalankan perintah berikut di konsol Anda:

ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm

Membandingkan perbedaannya

Penghematan biaya antara GIF dan video bisa sangat signifikan.

Perbandingan ukuran file yang menunjukkan 3,7 MB untuk gif, 551 KB untuk mp4, dan 341 KB untuk webm.

Dalam contoh ini, GIF awal berukuran 3,7 MB, dibandingkan dengan versi MP4, yang berukuran 551 KB, dan versi WebM, yang hanya berukuran 341 KB.

Mengganti img GIF dengan video

GIF animasi memiliki tiga karakteristik utama yang perlu direplikasi oleh video:

  • 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>.

<video autoplay loop muted playsinline></video>

Elemen <video> dengan atribut ini diputar secara otomatis, berulang tanpa henti, tidak memutar audio, dan diputar secara inline (yaitu, bukan layar penuh), semua perilaku khas yang diharapkan dari GIF animasi. 🎉

Terakhir, elemen <video> memerlukan satu atau beberapa elemen turunan <source> yang mengarah ke file video yang berbeda yang dapat dipilih browser, bergantung pada dukungan format browser. Sediakan WebM dan MP4, sehingga jika browser tidak mendukung WebM, browser 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>

Pengaruh pada Largest Contentful Paint (LCP)

Perlu diperhatikan bahwa meskipun elemen <img> adalah kandidat untuk LCP, elemen <video> tanpa gambar poster bukan kandidat LCP. Solusi untuk mengemulasi GIF animasi adalah tidak menambahkan atribut poster ke elemen <video>, karena gambar tersebut tidak akan digunakan.

Apa pengaruhnya bagi situs Anda? Sebaiknya 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 untuk didownload, beralih ke kandidat LCP yang berbeda kemungkinan akan meningkatkan LCP situs.