Which is better: Animated GIFs vs. video files

I have begun to see many mobile apps relying heavily on animated GIFs and PNGs in their content. There is no question that short video adds motion, interest, and excitement to your website or mobile app – which can help make your customers more immediately interested – and keeping them engaged is an important part of a successful site or app. To support this theory, here is an animated GIF of my goat Nora, eating a fresh cedar branch:

How does this work? Animated GIFs use the frame feature inside the GIF format.  GIFs can host many frames inside one file (essentially discrete images) and then display them in quick succession. You can pull apart the GIF file to see the individual images. To turn my giphy.gif into 33 PNG files into individual images, I used ffmpeg:

ffmpeg -i giphy.gif gify%05d.png

Here are a few of the 33 PNG files:

GIFs only support 256 colors, which adds a ‘grainy’ look to the video, which I believe is an important part of the Animated GIF ‘kitsch’.  You might think that the loss of resolution and color would reduce the file size.

Unfortunately, that is completely incorrect.

The GIF above of Nora eating is 3.3MB. On a slow or congested cellular network, a 3.3MB file might take some time to download. The full color movie that it was sourced from is only 1.4 MB. That file is now 237% larger and has fewer colors and no audio track. (You can see and hear the original video featuring high-definition goat slurping here.)

One major concern with animated GIF files is the file size. Since the GIF is essentially a ‘flipbook’ of discrete images, compression only occurs on a per image basis. Movie codecs allow for x/y compression per frame, but also compress across the third dimension of time. The advantage of testing across time allows for much higher compression, as only changes across frames must be recorded in the file.

Can I Make My Video Loop? 

Yes you can make your video loop! By adding autoplay and loop to the video tag, you can force your video to loop. Here’s how to do it:

<video autoplay loop muted >

<source src=”goats.mp4″ type=”video/mp4″>

</video>

(Note, I also added a muted attribute to avoid repeating goat slurping sounds, which probably won’t engage users.)

Can I Make the Video Loop Look Like a GIF?

Of course you can turn a GIF into a video loop.  Simply convert your animated GIF into a mp4 file, which saves all of that wonderful 256 color resolution and GIF-like feel. I converted my goat GIF back to a video file, and incorporated the video tags above:

This GIF-like MP4 file weighs in at 247KB – a whopping 13x smaller than the GIF!

In conclusion, animated GIFs are cool and a great way to entice your users with engaging content. But they are large files that will delay the load of your website or application, and can really eat into your customer’s data plan. If you want to use an animated GIF style in your app, consider converting them to video files to save bandwidth and speed, to improve your customer experience.