Skip to main content
KOMPI AJAIB

follow us

Optimasi Halaman Dengan Mengganti GIF Animation Dengan Video


Optimasi Halaman Dengan Mengganti GIF Animation Dengan Video - Secara sederhana, GIF Animation bisa kita sebut sebagai gambar bergerak. Karena kita sebut sebagai gambar bergerak, maka ketika disematkan pada sebuah halaman website, kita bisa menggunakan kode HTML seperti halnya untuk gambar biasa.

Meski sama disebut sebagai gambar, namun biasanya GIF memiliki size yang lebih besar dari gambar biasa. Bahkan bisa lebih besar dari size halamannya itu sendiri.

Tentu saja hal tersebut bisa berimbas pada pemuatan halamannya menjadi lebih lama dan lebih banyak memakai data. Oleh karena itu, kita perlu mengoptimasi penyimpanan GIF Animasi di halaman ini dengan menggantinya menggunakan video.

Mengapa video bisa menggantikan GIF Animation untuk optimasi kecepatan loading halaman?

Karena pada dasarnya GIF Animation dan video memiliki konsep yang sama yaitu gambar bergerak. Namun di sisi lain, format video bisa memiliki size yang lebih kecil dari GIF Animation.

Berikut ini saya memilik 2 file GIF dan video dari konten yang sama dari GIPHY. File video memiliki ukuran yang jauh lebih kecil dibanding dengan GIF.

Hal itulah yang bisa kita jadikan dasar bahwa video bisa menggantikan GIF Animation untuk mengoptimalkan loading blog.

Sebagai contoh, bisa kita lihat pada Twitter. Jika kita melihat source GIF pada Twitter, maka sebenarnya itu bukan GIF sungguhan, melainkan sebuah file MP4. Ini berujuan agar para pengguna Twitter tidak menghabiskan lebih banyak data ketika melihat GIF.

Jika pada sebuah blog, GIF biasanya digunakan pada banner-banner iklan. Atau juga digunakan sebagai ilustrasi sebuah artikel sehingga artikel bisa menjadi lebih menarik.

Jika kita sudah memiliki gambar atau banner GIF sendiri, kita bisa memanfaatkan tool online untuk mengkonversi GIF menjadi MP4, bisa menggunakan tool berikut https://ezgif.com/gif-to-mp4

Untuk menghosting file MP4, kita bisa memanfaatkan hosting gratis dari Github.

Sebagai contoh seperti berikut ini.

1. Untuk AMP HTML

Agar dapat menggunakan amp-video, maka pastikan js-nya sudah ada pada blog Anda seperti berikut:


<script async='async' custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>

Kemudian gunakan kode berikut untuk menampilkan bannernya.


<amp-video class="animgif" width="480" height="240" poster="https://4.bp.blogspot.com/-trPJlYj5vRM/XMAYLlaLFBI/AAAAAAABKHU/cG4Ti_gIp6oaakmXLrpZt4ctgPoCpasIwCLcBGAs/s1600/hi_000.jpg" autoplay="" loop="" muted="">
  <source src="https://cdn.staticaly.com/gh/animovi/x-files/fcada3e7/hi.mp4" type="video/mp4" />
</amp-video>

Lalu tambahkan CSS berikut pada style amp-custom agar videonya responsive.


.animgif {
  width: auto;
  max-width: 100%;
  height: auto;
}

Untuk mendapatkan poster dari file MP4, gunakan tool online ini https://image.online-convert.com/convert-to-jpg

Hasilnya akan tampak seperti berikut ini.

Siapa yang menyangka kalau itu adalah video, bukan? Tampak seperti GIF Animation pada umumnya.

2. Untuk NON AMP

Gunakan kode berikut untuk menampilkan animasinya


<video class="animgif" width="480" height="240" poster="https://4.bp.blogspot.com/-trPJlYj5vRM/XMAYLlaLFBI/AAAAAAABKHU/cG4Ti_gIp6oaakmXLrpZt4ctgPoCpasIwCLcBGAs/s1600/hi_000.jpg" autoplay="" loop="" muted="" playsinline="">
  <source src="https://cdn.staticaly.com/gh/animovi/x-files/fcada3e7/hi.mp4" type="video/mp4" />
</video>

Lalu tambahkan CSS berikut pada style agar videonya responsive.


.animgif {
  width: auto;
  max-width: 100%;
  height: auto;
}

Jika Anda mengambil GIF dari GIPHY, Anda tinggal copy URL media MP4 dari GIF yang kita inginkan, jadi tidak perlu menghosting sendiri file MP4, seperti berikut ini (kodenya berbeda dengan kode di atas tapi pada dasarnya sama, sebagai alternative):


<div class="img-width-400 img-center">
<amp-video width="480" height="390" src="https://media.giphy.com/media/4dLGQTeThvYAw/giphy.mp4" poster="https://1.bp.blogspot.com/-5AL2gGQdqbQ/XMAlv-FP22I/AAAAAAABKHg/OBmrACzXLXMvH0SN7ABPFFY4xAsGGJXfwCLcBGAs/s1600/giphy_003.jpg" layout="responsive" autoplay loop muted></amp-video></div>

Hasilnya seperti berikut ini:

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar