Bagian Peluang di daftar laporan Lighthouse Anda semua GIF animasi, bersama dengan perkiraan penghematan dalam hitungan detik dicapai dengan mengonversi GIF ini ke 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 bandwidth pengguna secara signifikan. Pertimbangkan untuk menggunakan 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 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 my-animation.mp4
Ini memberi tahu FFmpeg untuk mengambil my-animation.gif sebagai input,
yang ditandai oleh flag -i,
dan mengonversinya menjadi video bernama my-animation.mp4.
Membuat video WebM
Video WebM berukuran jauh lebih kecil dibandingkan video MP4, namun tidak semua browser mendukung WebM, jadi masuk akal untuk membuat 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
Mengganti gambar GIF dengan video
GIF animasi memiliki tiga karakteristik utama yang perlu direplikasi oleh video:
- Video akan 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>
<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 akan menampilkan video HTML5.
Panduan khusus stack
AMP
Untuk konten animasi, gunakan
amp-anim untuk meminimalkan penggunaan
CPU saat konten tidak berada di layar.