April 4, 2019 | Lauren Nettles

Throw Out Your GIFs and Improve Page Load Times with MP4s

We at VIEO love a good GIF – you should see our Slack channels – but we have to acknowledge a sad truth about these excellent ways to express emotions:

They’re inefficient, they don’t look as good as they could, and they slow down your page load time.

Definitely not an overreaction.

No need to go on a sad Simon & Garfunkel spiral – there’s a solution! And it isn’t just using your words. By converting GIFs to MP4s, you’ll get higher quality reactions in a much smaller file size, meaning better page load times! 

Why Convert GIFs to MP4s

I promise I'm not just throwing out a wild, unfounded opinion to start fights on the internet. The fact of the matter is GIFs were never meant for animation, which leads to quite a few problems when they are used that way. 

If you spend time writing and designing a beautiful blog post optimized for inbound marketing, you want the images on it to look nice too. Compared to the multitude of other digital formats available now, GIFs just don’t look that great. GIF image standard can only support 256 colors compared to a PNG which can support 16.9 million colors. That’s one of the reasons GIFs with a lot of colors can look jerky instead of smooth.

In addition to not being very pretty, GIFs are extremely inefficient compared to MP4s. That means the file sizes of GIFs are HUGE compared to MP4s. I downloaded the clip below as both a GIF and an MP4. The MP4 file is a petite 178 KB. In contrast the GIF version is 3.5 MB – or 3500 KB.

Sorry, GIFs. The truth hurts.

The reason a GIF is so much bigger than an MP4 has to do with the way the files store information. Modern video files, like MP4s, only take the tiny changes frame to frame into account when storing information from a video. A GIF, on the other hand, stores the entirety of each frame separately and compresses each one individually. That’s a lot more data that the file has to contain, leading to a much bigger file.

This size difference matters because big files slow down page load speeds. And the slower your page loads, the less likely people are to stick around to see what’s on it. Fast blog loads should be an important part of your inbound marketing strategy. In fact, according to marketing expert Neil Patel, 40% of people abandon a website that takes more than 3 seconds to load

How to Convert GIFS to MP4s

So I’ve convinced you that MP4s are the way to go – now what?

The simplest solution is to visit a website that will convert your GIF to an MP4 for you, like ezgif.com. Just upload your GIF file, and it will spit out an MP4 that you can add to your post as usual. For the best cross-browser compatibility, you'll want to make sure it's converted using the h264 codec, which ezgif.com should use automatically.

If you want a little more control over your conversion, VIEO’s Junior Front End Developer Cody Rose has the scoop! 

Heads up: if you aren’t familiar with web development, this may be a little more complex than you need. The above converter works great if you don’t want to start messing with code.

You can use FFMpeg CLI to convert your GIFs into MP4s. If you use the FFMpeg line below, the resulting file will be compatible across a wide variety of browsers – and it’ll likely be smaller than the web version.  

ffmpeg -f gif -i input.gif -pix_fmt yuv420p -c:v libx264 -movflags +faststart -filter:v crop='floor(in_w/2)*2:floor(in_h/2)*2' output.mp4

 

Run this command in your terminal from the folder that contains the GIF that you want to convert. Replace input.gif (near the beginning of the line) with the file name of your GIF, and replace output.mp4 (at the end) with the desired name of your new MP4.

The other parts of this command are settings that will give you the best browser compatibility and compression without loss of quality.

“Both these methods will get you an MP4 version of a GIF in the end,” says Cody, “but the more technical solution will likely give a more optimized result.”

Finally, here’s what you need to do to embed your new MP4.  

<video width="" height="" muted="" playsinline="playsinline" loop="loop" autoplay="autoplay" alt=""> 
	<source src="https://url-to.mp4" type="video/mp4"> 
	<img src="https://url-to-fallback.gif"> 
</video>

 

The video tag must have the muted attribute, otherwise Chrome will not allow it to auto play. Similarly, the playsinline attribute is needed for the MP4 to autoplay in iOS.

Some iOS versions don’t allow autoplay even with that attribute, but your MP4 will still be there – the user will just have to click or tap it for the MP4 to start its loop.

You can fill in the width and height attributes if you'd like to constrain the video to a certain size.

After converting your GIF to an MP4 and uploading it to your sites file manager, replace https://url-to.mp4 with the URL to your MP4 file.

https://url-to-fallback.gif should be the URL of the original GIF. According to Cody, “the fallback.gif img tag isn’t actually necessary since every browser supports HTML5 video tags and mp4s, but it’s generally a good idea to have a fallback. Both the GIF and the MP4 will not be loaded, just the one that the browser picks - which should be the MP4.”

But, if for some reason a browser doesn’t load your MP4, at least your post will have something there instead of a big blank space.

GIFs still have their place. They’re perfect for social media posts, for example. But, if you’re uploading clips to a blog or webpage, MP4 is the way to go to help your page load faster while still looking crisp.

Looking for more inbound marketing tips? Download our ebook on creating an effective (and quick-loading) inbound marketing campaign.

New Call-to-Action

Lauren Nettles

Lauren Nettles

As VIEO's content marketing strategist, Lauren Nettles creates content strategy for VIEO and our clients. She works with the content team to create, document, and revise creative content strategies that help clients and customers better understand each other.

Related Post: