Animated GIF and Video Compared: Which Should You Prefer and Why?

Both video and animated content are robust forms of visual media whose influence on the audience is growing day by day. According to a recent report, people spend 1.5 hours a day on average viewing video content. 81% of businesses utilize video as an influential marketing tool. Add to this the technological advancements in HTML5 videos and HTML video players, and video content is now easier to produce than ever before.

With the rise of visual content, animated GIFs have also grown in popularity. Animated GIFs essentially combine multiple images or ‘frames’ into a single file. These discreet images are displayed in quick succession, similar to a flip book, to convey motion. Each picture can be viewed by pulling apart the GIF file. Animated GIFs are highly visual and are a cheaper option when compared to video content.

Does File Size Matter?

A big concern when it comes to animated GIF is the size of the file. Because the GIF is a flipbook of separate images, compression can occur only at the image level. If you’re curious, try opening a GIF file from your browser. Here’s what you might see.

13.7MB is huge by modern web standards. This is 10 times the size of the content on most websites.

For video files, however, movie codecs allow not only for an x/y compression per frame but also compress across the 3rd dimension of time. The advantage here is that testing across time allows for much higher compression. This is because only changes across frames are recorded in the file.

Let’s look at this example of an animated file. The HD version of the GIF above is 6.6MB in size. If you have multiple GIFs on your website, it could considerably slow down your page and you risk losing your customers. On the other hand, an HD MP4 version of the GIF has a size of 311KB.

Research has concluded that animated GIFs are about 5-10 times larger than an optimally encoded MP4 video which is exactly what we saw in the image above. This difference in size implies that GIFs not only waste a substantial amount of bandwidth but also load slowly and lead to bad user experience.

Converting animated GIFs to video is a great optimization technique simply due to the reduction in file size that video files are capable of. Popular social media sites like Facebook, Twitter, and Imgur silently convert any animated GIFs that a user uploads into an MP4 video file and display that instead.

Impact on Page Performance

Though small file sizes are preferable, it isn’t the only thing that matters. We also need to understand how the media resource performs if it is downloaded. This is important since media files need to be decoded before playback.

Animated GIFs are not the best choice here because image decoding is needed for each frame in the image. This can contribute to jank.

This is how it looks like in the Performance panel in Chrome’s developer tools where the only content of a page is an element pointing to an animated GIF:

The Performance panel in Chrome's developer tools showing browser activity as an animated GIF plays.

The image decodings take place on the rasterizer threads as each new frame of the GIF is decoded. Now, here is a comparison table of total CPU time for GIF versus MPEG-4 and WebM videos:

GIF takes the highest CPU time when compared to both videos, especially MPEG-4. This shows that videos usually use less CPU time than animated GIF, which is a welcome performance improvement above and beyond reducing file size.

That said, some CPUs and GPUs offer hardware-accelerated encoding/decoding of video files (e.g., Quick Sync Video on Intel CPUs). Many processors can encode and decode for MPEG-4; however, WebM codecs like VP8 and VP9 have only just started to benefit from hardware-accelerated encoding/decoding on newer CPUs. You can read more about their performance over at Google Developer’s page.

Another crucial factor is the place where you’ve hosted your media elements and whether you’re optimizing them before they are rendered. For instance, there are many popular cloud strategies for hosting and optimizing video files on the fly. Optimizing GIFs is harder, though you can use image CDNs to host them. For video files, you can use cloud services like Cloudinary, Wistia etc. to host your videos and then link them back using Cloudinary. You can then use an HTML5 video player to render the video on your posts.
When to Use Animated GIFs
There are many advantages to using animated GIFs, especially when attempting to market your product or service. Here are some of the common scenarios where animated GIFs can come in handy.

Event or Product Promotion
Animated GIFs are ideal for marketing an organization’s products online to display the level of detail that can attract potential customers. Additionally, it gives audiences a closer look at your product as they do a great job of putting its features and benefits in the spotlight.

Increase Audience Retention
A recent study showed that visitors tend to read less than 30% of the text on a website and tend to skim through most of it. Additionally, visitors tend to remember only 20% of the text when not accompanied by visuals. Therefore, marketers tend to use more visual content like GIFs to put their brand message across.

To Explain a Process
It has been proven to be easier to explain a process via an image rather than text. Step-by-step and how-to guides, as well as process flows, work better with GIFs rather than text.

To Create a Mini-Presentation
Creating a micro-presentation, a simple cartoon or sharing a mini-screen recording can help drive your point home. Especially on social media platforms like Twitter that have text limitations.

To Animate Data
GIFs can be used to provide your audience with context into a piece of data or statistic via an animated graphics or diagram. Some use cases can be to show, the advancement of deforestation, or flood waters, or changing climate conditions over a period, etc.
When to Use a Video Format
Here are some of the places where video format works better than animated GIFs.

Driving Customer Conversion
A recent study shows that 64% of consumers are more likely to purchase your product or service after they watch a video about it. If your product or service can appeal to the visitor’s emotions, a video does well to stir up those emotions and encourage them to proceed with the CTA.

For Explainer Videos
You can plan to explain your product or service in detail in your video and keep the rest of your web page shorter. As mentioned above, videos engage visitors much more than text. This works well with almost all products or services and can also be used to promote offers

Showcase the Human Connection
If you have a service or a product that can empathize with the human connection, a video can help win over your visitors almost instantly. In addition to being able to pull at the heartstrings, the movement, and sound in a video help in capturing and retaining a visitor’s attention when you need it.

For Email Marketing
It has been established that moving images in an email marketing campaign tend to generate a better response rate. In a study conducted by Playable in 2017, about 27% of emails that had embedded videos elicited a response from the receiver. Integrating high quality, relevant videos result in a better user experience, higher engagement and finally, more conversions
Does the Media Format Impact SEO?
When we think of content while formulating an SEO plan, we tend to default to text. However, other forms of content like video, images, and GIFs also play a crucial role in your site coming up against more queries, more often.

Including rich media like video and GIFs in posts on social platforms increases the likelihood of engagement. The same applies to the organic search channel as well. If you have more than one listing on a search engine results page, let’s say a web page and a video, the visibility of your brand increases.

Videos on your website and in platforms like YouTube improve the user experience and offer additional ways to interact with your business. In June 2014, Google published findings from a study showing how YouTube was an influential medium on the path to conversion for different consumer categories including vehicles, smartphones and beauty products.

If you’re not looking at rich media as part of your content strategy, you’re ignoring the chance of generating more traffic to your brand from organic search results. Images, GIFs, and videos represent more ways to connect with your target audience on their path to purchase, right from the research stage to conversion. If you want to know more about how media files influence SEO, you should consider reading this article published by Search Engine Journal.

Conclusion

Animated GIFs are a fun way to connect with different audiences through engaging and informative content. However, their large file size can be a hindrance, increasing the page load time and consuming data bandwidth.

Here are some aspects to keep in mind when trying to decide on using videos or an animated GIF on your landing page:

1. Well made and professional videos are great to have. Poorly made videos will probably do more harm than good for your conversion rate.
2. At times, animated GIFs can become a distraction from the main idea you want to put across.
3. If your video is a demo of a product, consider using an animated GIF.
4. Use videos to display emotions or if you need sound effects. Animated GIFs are not ideal for this scenario.

If you do want to include animated GIFs in your website or app, consider converting them to video files. This will save your customer’s data costs as well as not hinder your website or app’s speed.