Skip to main content

Gunakan Format Video (WebM/MPEG4) untuk Konten Animasi GIF Agar Loading Blog Ngebut

"GIF cenderung besar tidak efisien untuk mengirimkan konten animasi. Pertimbangkan menggunakan video MPEG4/WebM untuk animasi dan PNG/WebP untuk gambar statis". Kira-kira seperti itulah bunyi saran google pagespeed ketika saya mengecek salah satu halaman yang menggunakan konten animasi gif.

Berikut ini adalah contoh hasil tes postingan saya yang menggunakan gif, dan muncul saran untuk beralih ke format video dari google pagespeed.
Contoh hasil tes pagespeed saat menggunakan animasi gif
Hasil tes dari google pagespeed

Pada gambar di atas tertera bahwa kita dapat menghemat waktu sekitar 3.9s ketika menggunakan format video ketimbang menggunakan format gif. Luar biasa kan? 3.9s itu lama loh! Padahal pada artikel tersebut saya hanya menggunakan dua animasi gif. Ya, menurut saya wajar jika google menyuruh untuk menggunakan format video. Karena memang ukuran file gif jauh lebih besar.

File gif yang saya buat awalnya mempunyai ukuran sebesar 2.1 Mb, kemudian file tersebut saya kompress menggunakan semua tools yang ada di internet hasil maksimalnya adalah 702 KB. Setelah saya mengikuti saran dari google pagespeed dan file gif saya ubah ke format video yaitu mp4 dan WebM. Hasilnya sangat luar biasa, untuk format WebM menjadi 215 Kb sedangkan mp4 ukurannya menjadi 456 KB. Selain itu kualitasnya juga masih bagus.

Ini adalah buktinya:
Hasil convert file gif ke WebM dan mp4
Hasil convert ke format WebM dan Mp4

Jika Anda termasuk orang yang biasa menggunakan gif dalam postingan, saya sarankan mulai sekarang ubah semua file gif tersebut ke format WebM dan Mp4. Karena perbedaan waktu yang bisa dihemat sangat besar. Lantas bagimana caranya mengubah animasi gif ke WebM atau mp4? Silahkan ikuti caranya berikut.

Cara mengubah file gif ke format video (WebM dan mp4)


Untuk mengubah formatnya, kita menggunakan bantuan program FFmpeg. FFmpeg adalah aplikasi command line yang dapat mengkonversi audio maupun video digital dalam berbagai format. Silahkan download FFmpeg terlebih dahulu di halaman ini. Klik pada bagian download build.

Setelah terdownload ikuti cara installnya berikut ini:
  1. Ekstrak terlebih dahulu file yang telah terdownload.
  2. Copy file yang sudah di ekstrak tadi ke folder C (local disk).
  3. Klik kanan "This PC" > properties > Advanced system settings > pilih menu Environment Variable pada bagian bawah.
  4. Perhatikan kotak pada bagian bawah yaitu "system variable" yang bertuliskan "Path". Klik dua kali tulisan tersebut.
  5. Akan terbuka kotak dialog baru, klik "New" kemudian copykan path berikut C:\ffmpeg\bin.
  6. Klik OK semua.

Silahkan lihat video ini jika masih bingung cara instalnya.

youtube image


Setelah berhasil terintall, ikuti cara berikut ini untuk mengkonversi file gif ke format WebM dan mp4.

1. Perhatikan letak file video Anda, supaya tidak pusing pindahkan video gif yang akan di konversi ke folder "Videos" windows seperti punya saya pada gambar berikut.
Contoh file yang akan di konversi

2. Silahkan buka CMD atau powershell (buka sebagai user biasa jangan run sebagai administrator).

3. Ketikkan perintah "cd videos" tanpa tanda petik.

4. Sekarang kita sudah masuk di folder tempat video tadi berada. Selanjutnya untuk konversi ke format WebM dan Mp4 gunakan kode berikut.

Perintah convert gif ke WebM:
ffmpeg -i input.gif -c vp9 -b:v 0 -crf 41 output.webm

Perintah convert gif ke Mp4:
ffmpeg -i input.gif -b:v 0 -crf 25 output.mp4

Ubah input.gif sesuai dengan nama file gif yang akan diconvert. Begitu juga dengan file outputnya.

Untuk penjelasan lengkap kode tersebut silahkan Anda baca Replace Animated GIFs with Video. Kemudian hasil dari video yang diconvert tadi akan tersimpan di folder yang sama dengan video awal yang berformat gif.

Cara menerapkannya di postingan blogger


Setelah file gif berhasil dikonversi ke dalam format video, selanjutnya adalah cara untuk menerapkan video tersebut di blogger. Kita tidak bisa menggunakan cara yang sama saat kita mengupload file gif. Berikut cara untuk menerapkan video tersebut agar bisa berfungsi layaknya animasi gif.

1. Silahkan upload video animasi Anda ke https://cloudinary.com (ini adalah penyedia hosting gratis berbasis cdn). Jika belum punya akun daftar terlebih dahulu. Kemudian klik "Media Library" kemudian upload kedua file WebM dan Mp4 tadi ke web ini.

2. Setelah terupload, copy kedua url video tersebut. Ganti url video di bawah ini dengan url video yang Anda upload.


<video loop muted autoplay playsinline>
  <source src="https://res.cloudinary.com/drp9iwjqz/video/upload/v1520632785/test_ivml8o.webm" type="video/webm">
  <source src="https://res.cloudinary.com/drp9iwjqz/image/upload/v1520628311/webfu/test.mp4" type="video/mp4">
</video>

Catatan:
Kode di atas menggunakan dua sumber video yaitu WebM dan Mp4. Tujuannya supaya browser yang tidak mendukung format WebM, masih bisa berjalan dengan format mp4. Sesuai urutan source video, maka browser akan terlebih dahulu membaca file WebM, jika tidak mendukung barulah membaca format mp4.

Supaya rapi tambahkan css berikut ini khusus untuk halaman posting:

video{
  max-width: 100%;
}

Jika pemasangan Anda benar maka hasilnya akan tampak seperti video animasi gif, contohnya seperti berikut ini.



Update Juli 2019:
Mungkin ada beberapa orang yang mengalami kegagalan seperti gambar berikut saat proses convert gif ke format video.

Gagal convert gif ke video

Silahkan ubah nama file gifnya menjadi satu kata saja, misal "Animasi.gif". Jika dengan cara tersebut masih gagal juga kemungkinan diblock oleh antivirus. Untuk pengguna windows defender silahkan buka antivirusnya > virus & threat protection > pada bagian ransomware protection klik manage ransomeware protection > Allow an app through controlled folder acces > klik add an allowed app (tambahkan aplikasi ffmpeg.exe).
author photo Published by:
Comment Policy: Silahkan berkomentar, kami pasti akan membalas komentar Anda. NO #linkaktif dan #promosi!.
Buka Komentar
Tutup Komentar

Coba aplikasi TediEka.com

Tambahkan aplikasi TediEka di smartphone tanpa install, buka TediEka dengan browser Chrome di smartphone. Kemudian klik ikon 3 titikdi browser dan pilih "Tambahkan ke layar utama". Selanjutnya klik aplikasi TediEka dari layar utama smartphone Anda.