Skip to main content

Penggunaan animasi GIF membuat loading blog berat


Selamat Datang di Blog Orang IT. Saat mengecek performa sebuah halaman digoogle pagespeed insight saya mendapatkan saran menggunakan format gambar WebP/JPEG dibandingkan PNG agar ukuran gambar tidak terlalu besar selain itu penggunaan format GIF untuk konten animasi juga tidak efisien mereka merekomendasikan denggan format video MPEG4/WebM agar loading blog tidak berat. Sekali lagi ini hanya saran untuk meningkatkan pengalaman pengguna yang efek akhirnya juga meningkatkan SEO

Berikut ini contoh hasil analisis dihalaman google pagespeed insight dimana saya mendapat saran untuk mengubah format konten animasi menjadi format video MPEG4/WebM supaya loading halaman blog lebih ringan :

1 hasil analisis

Ukuran file GIF jauh lebih besar dan itu tidak efisien , lihatlah pada hasil analisis diatas bahwa dengan mengubah format animasi/video dari GIF ke MPEG4/WebM membuat halaman lebih cepat dimuat / menghemat waktu selama 3.9s , itu waktu 3 detik yang dihabiskan browser untuk mengunduh file GIF anda dan ini adalah waktu yang lama jadi wajar kalau google menyarankan untuk mengganti jenis format animasi ini

Normalnya file GIF berdurasi 5 detik dengan ukuran 1000x400 kualitas low memiliki ukuran 2.1 Mb dan setelah di compress dengan tools-tools yang ada di internet size nya berkurang menjadi 720Kb . Lebih hemat 60% , meskipun untuk ukuran halaman sebesar ini membutuhkan banyak kuota untuk memuat seluruh elemenya

Tapi setelah saya mengikuti saran google pagespeed untuk mengubah formatnya menjadi WebM dan Mp4 ukuranya berkurang sangat banyak namun kualitasnya tetao terjaga. Untuk format WebM ukuranya menjadi 215Kb sementara untuk format Mp4 ukuranya menjadi 456Kb  

Ini adalah buktinya hasil convert file GIF :

2 hasil convert

Jika anda adalah blogger yang terbiasa menggunakan format GIF untuk menjelaskan video singkat dalam postingan , saya sarankan mulai sekarang untuk mengubah semua format GIF menjadi WebM atau Mp4. Karena perbedaan waktu pemuatan yang sangat besar

Berikut cara mengubah format file GIF ke video WebM / Mp4

Bagi anda yang ingin mencobanya, silahkan gunakan bantuan software FFmpeg andalan saya untuk merubah format audio maupun video digital kedalam berbagai format populer seperti GIF to WebM/Mp4 yang saya contohkan

Silahkan download program FFmpeg pada link ini >> https://ffmpeg.zeranoe.com/builds/

Klik download build untuk mengunduhnya , seseuaikan dengan versi windows anda saat ini baik 64/32bit agar tools dapat bekerja 

Tutorial menggunakan FFmpeg lengkap :

1. Extract dulu file yang telah didownload , klik kanan extract pastikan komputer sudah terinstall winrar/winzip

2. Copy folder instalan FFmpeg kedalam drive C (local disk C)

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. Klik OK semua

Proses instalasi telah selesai, sekarang mari kita coba gunakan FFmpeg untuk merubah format animasi GIF ke format webm atau Mp4 

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

pindah kefolder video

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

8. Ketikkan perintah "cd videos" tanpa tanda petik

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

Hasil convert video dalam format Webm dan Mp4 akan tersimpan dalam folder yang sama dengan video original GIF. 

Penjelasan lengkap cara kerja replace animasi GIF ke format video dapat anda baca disini > https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/replace-animated-gifs-with-video/

Cara memasukkan animasi kepostingan blogger

Sebelumnya kita telah berhasil mengubah format animasi GIF menjadi video webM dan Mp4, sekarang kita masukkan kedalam artikel blog. Untuk caranya sedikit berbeda dengan mengunggah animasi GIF. 

Ikuti panduan berikut agar video dapat berjalan selayaknya animasi GIF dalam pos anda :

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 berhasil diupload , copas url video tersebut lalu pada script dibawah ini silahkan ganti url video saya dengan url video anda yang sudah diupload
<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>

Penjelasan :

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.

Agar tampilanya lebih rapih , tambahkan css berikut dihalaman posting (opsional) :
video{ max-width: 100%; }
Sekarang tampilan video anda akan otomatis lebar 100% menyesuaikan batas halaman, silahkan dicoba sendiri

Demikian postingan mengenai cara merubah animasi GIF menjadi format video WebM dan Mp4 guna mengurangi beban halaman saat dimuat , semoga bermanfaat dan apabila ada yang ingin menambahkan jangan sungkan memberikan komentar yang membangun . Sekian pos by my blog www.helmykediri.com