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:

ffmpeg -i input.gif output.mp4

It converts the gif to 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:

ffmpeg -i input.gif -pix_fmt yuv420p output.mp4

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!

<video autoplay loop muted playsinline>
  <source src="/path/to/video/output.mp4" type="video/mp4">
</video>

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!