Optimizing page weight with gif to video
Today I read this article on Replace Animated GIFs with Video, so having a couple gifs on this blog, I was intrigued and decided to follow along.
On my mac I installed ffmpeg, via brew
Running this command below:
It converts the
mp4, but I got an error: The file isn’t compatible with QuickTime Player.. After a little more digging, I found that you needed to pass a few more parameters.
Running this command worked for me:
From my blog post on Phaser Tilemap, size of the gif was 455kb and the conversion to video (.mp4) bumped it down to 65kb!!
From my blog post on PWAs, size of the gif was 901kb and the conversion to video (.mp4) bumped it down to 86kb!!
The article also talks about a lot of things and casing for video type, I just went with .mp4. Here is how you would include a video to your markup and have the same functionality that a .gif would (autoplay, loop, muted). So yes, you have to set a few more attributes but we ain’t lazy so that is fine, considering how much file sizes differ!
All that to say, I lined them both up and I could hardly tell a difference in the visuals, but crazy on the optimization side of things, so I am hooked!