Bagian Peluang pada laporan Lighthouse Anda mencantumkan semua GIF animasi, beserta perkiraan penghematan dalam hitungan detik yang dicapai dengan mengonversi GIF ini menjadi video:
Alasan Anda harus mengganti GIF animasi dengan video
GIF berukuran besar tidak efisien untuk menayangkan konten animasi. Dengan mengonversi GIF besar menjadi video, Anda dapat menghemat banyak bandwidth pengguna. Sebaiknya gunakan video MPEG4/WebM untuk animasi dan PNG/WebP untuk gambar statis, bukan GIF, untuk menyimpan byte jaringan.
Membuat video MPEG
Ada sejumlah cara untuk mengonversi GIF menjadi video.
FFmpeg adalah alat yang digunakan dalam panduan ini.
Agar dapat menggunakan FFmpeg untuk mengonversi GIF, my-animation.gif
menjadi video MP4,
jalankan perintah berikut di konsol Anda:
ffmpeg -i my-animation.gif my-animation.mp4
Kode ini memberi tahu FFmpeg untuk mengambil my-animation.gif
sebagai input,
yang ditandai dengan tanda -i
,
dan mengonversinya menjadi video bernama my-animation.mp4
.
Buat video WebM
Video WebM jauh lebih kecil daripada 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
Mengganti gambar GIF dengan video
GIF animasi memiliki tiga karakteristik utama yang harus direplikasi oleh video:
- Diputar secara otomatis.
- Pengulangan loop terus-menerus (biasanya, tetapi bisa juga untuk mencegah pengulangan).
- Mereka diam.
Untungnya, Anda dapat membuat ulang perilaku ini menggunakan elemen <video>
.
<video autoplay loop muted playsinline>
<source src="my-animation.webm" type="video/webm" />
<source src="my-animation.mp4" type="video/mp4" />
</video>
Menggunakan layanan yang mengonversi GIF menjadi video HTML5
Banyak CDN gambar mendukung konversi video GIF ke HTML5. Anda mengupload GIF ke CDN gambar, dan CDN gambar menampilkan video HTML5.
Panduan khusus stack
AMP
Untuk konten animasi, gunakan
amp-anim
untuk meminimalkan penggunaan
CPU saat konten berada di luar layar.