GIF animasi memang menyenangkan, tetapi bisa menjadi besar (ukuran file) dengan cepat. Pada titik tertentu, mungkin setelah beberapa frame beresolusi rendah lebih baik menggunakan MP4 dan HTML elemen. Idealnya Anda juga menginginkan gambar “poster” video Anda sehingga orang dapat melihat pratinjau cepat sebelum mereka memutuskan untuk memutar video Anda. Prosesnya bisa sangat sederhana berkat alat baris perintah sumber terbuka luar biasa yang tersedia secara gratis.
Langkah 1: MP4
Untuk ini kami menggunakan ffmpeg:
$ ffmpeg -i amazing.gif amazing.mp4
Langkah Kedua: Gambar Poster
Di sini kita menggunakan ImageMagick untuk mendapatkan frame pertama di gif dan mengekspornya ke PNG:
$ magick "amazing.gif[0]" amazing.png
…atau JPEG, tergantung pada jenis videonya (Fotografi vs. Video Berbentuk Lainnya)
Langkah Tiga: Tag Video
Langkah 4: Optimalkan gambar Anda
….gunakan alat pencampuran gambar favorit Anda seperti ImageOptim
Komentar
Saya melakukan ini di postingan kalender Perfplanet baru-baru ini dan gif 2,5MB menjadi mp4 270K. GIF 23MB lainnya menjadi mp4 1,2MB.
Saya tidak tahu apakah ada yang salah dengan instalasi ffmpeg saya, tetapi video tidak diputar di QuickTime/FF/Safari, hanya di Chrome. Jadi saya menjalankannya melalui HandBrake dan memecahkan masalahnya. Karena… opsi ffmpeg bukan untuk orang yang lemah hati.
menggunakan preload="none" Dengan cara ini browser tidak akan memuat seluruh video kecuali pengguna memutuskan untuk memutarnya. Dalam pengujian saya, tanpa preload=none Chrome dan Safari mengirimkan permintaan cakupan seperti header HTTP Range: bytes=0-) untuk bagian 206. Firefox memiliki semuanya
TIDAK loading="lazy" Untuk gambar poster 🙁
Komentar? Temukan saya di BlueSky, Mastodon, LinkedIn, Threads, Twitter
About The Author
