Menggunakan format video untuk konten animasi

Bagian Peluang pada laporan Lighthouse Anda mencantumkan semua GIF animasi, beserta perkiraan penghematan dalam hitungan detik yang dicapai dengan mengonversi GIF ini menjadi video:

Screenshot format video Lighthouse Use untuk audit konten animasi

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.

Referensi