Ditulis oleh: Ditulis pada: 4/24/2019
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfXWkOtAx5rS0jwFJgRoHYFJ-alShbb8tWlh19rRN9MzJvTGnGoaGTK40hVzlGJyobz14t5qOh9VjLTzJHMvl5-8TtEGotv6bVjDnStMrS6LsdKT2iobAe8cUyly8qwVURcGUmv-6MQP5N/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfXWkOtAx5rS0jwFJgRoHYFJ-alShbb8tWlh19rRN9MzJvTGnGoaGTK40hVzlGJyobz14t5qOh9VjLTzJHMvl5-8TtEGotv6bVjDnStMrS6LsdKT2iobAe8cUyly8qwVURcGUmv-6MQP5N/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja96BZW4JDEWBBzdoENH6_N0-uak_w8BxsDxNr7GI_HYu9TP1YzXQrF50KhyphenhyphenqSQmd32ZWIQvO7oRBQWTneJvNP74qGR25FF30e-Jcb47kNOPdPh9ijCRTes42zQbG5gMuTGcBexUpsVKc/s1600/giphy_003.jpg" layout="responsive" autoplay loop muted></amp-video></div>
Hasilnya seperti berikut ini: