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 doubt that short video adds motion, interest and excitement to your website or mobile app.  It immediately draws interest to your customers, and keeping customers engaged is an important part of the process.

To prove this fact, here is an animated GIF of my goat Nora, eating a fresh cedar branch:

Adorable, am i right?

How do these 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 view each individual image by pulling apart the GIF file. I used ffmpeg:

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

This turned my giphy.gif into 33 png files (I feature a few below):

 

GIFs are limited in that they only support 256 colors, which adds a ‘grainy’ look to the video, which I believe that 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.3 MB.  3.3MB on a slow or congested cellular network might take some time to download.  The full color movie that it was sourced from is only 1.4 MB.  That’s a 237% larger file, with fewer colors and no audio track.  (The original video, with high definition goat slurping audio can be seen – and heard- 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 3rd 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.

But can I make my video loop? 

Yes you can!  By adding autoplay and loop to the video tag, you can force your video to loop?

<video autoplay loop muted controls = "false">
  <source src="goats.mp4" type="video/mp4">

(Note, I also added a muted attribute to avoid repeating goat slurping sounds, which is probably not engaging to your users.)

But can I make it look like a GIF?

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

This GIF-like MP4 file weighs in at 247 KB – 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 your customer experience.