GIFs vs. Animated Videos – Which Should You Use?

GIFs, as well as animated videos, are compelling forms of media, especially in the eCommerce space. Its influence on audiences and target customers are growing each day.  A recent report found that people spend an average of an hour and a half each day consuming video comment. More than 80% organizations said they use videos and GIFs as marketing tools for added influence.

Along with the technological advancements making it easier to produce video content, GIFs have also grown in popularity. GIFs stitch together multiple images into a single file. Each image is then displayed in quick succession to convey motion. A concept that GIFs seem to have borrowed from popular flipbooks to tell a story. GIFs are also highly visual but are a cheaper option when compared with videos.

Does file size matter?

When it comes to using GIFs, a significant concern is the size of the file. This is because GIFs are essentially many individual images. Compression occurs only at the image level.

When it comes to videos though, codecs can conduct an x/y compression per frame as well as a compression across the 3rd dimension of time. Testing across time allows for a higher rate of compression.

GIFs are an average of 5-10 times larger than an efficiently encoded MP4 video. This difference in size means that GIFs waste a large amount of bandwidth and also load at a slower rate leading to a bad user experience.

Just the reduction in file size makes converting GIFs to animated videos a fantastic optimization option. Many social media sites silently convert uploaded GIFs into animated video files and display the saved file instead of the original one.

 

 

Let’s have a look at an example 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. Here’s how it looks like:

https://filebin.net/id6l2c1s0c67h83m

How do they Impact Page Performance?

Small file sizes though preferred are not the only aspect when it comes to making a decision. There is also a need to understand how a media resource is likely to perform when download. This is especially important as media files need to be first decoded before playback.

GIFs may not be the best option here as image decoded is required for each frame in the GIF. This tends to contribute to jank.

Here is how the Performance panel looks in Chrome’s developer tools when an <img> is the only content on the page and points to an animated GIF.

 

 

The image is decoded on rasterizer threads as each GIF frame is decoded. The table below compares the total CPU time for a GIF vs. WebM and MPEG-4 videos.

Format	CPU Time
GIF	2,668 ms
MPEG-4	1,994 ms
WebM	2,330 ms

You can easily embed WebM & MPEG-4 videos into your page using any standard HTML5 video player available today.

When it comes to eCommerce sites, page performance is especially important as organizations do not want to have visitors having to wait before the content can be viewed. A high bounce rate is not ideal for eCommerce sites.

When Should an eCommerce Site Use GIFs?

GIFs come with their own set of benefits, especially when trying to market a particular service or product. Listed below are some scenarios where GIFs can be useful.

Event or Product Promotion

GIFs are great for marketing an business’s products on the web and display details at a level that attracts potential customers. Also, it gives potential customers a closer look at the organization’s product since they are great at putting the spotlight on the features and benefits of the offering.

Increase Audience Retention

According to a study, visitors read less than 30% of the text on a website and usually skim through most of it. They also tend to remember only 20% of the text when not accompanied by visuals. Therefore, marketers increasingly depend on visual content like GIFs to convey a brand message.

To Explain a Process

It is usually easier to explain a process using an image instead of text. How-tos, step-by-step guides, and process flows are better with GIFs.

1. To Create a Mini-Presentation – Designing a micro-presentation, a simple cartoon or sharing a mini-screen recording helps drive an organization’s point home. This holds especially true for social media platforms that have text limitations.
   
2. To Animate Data – GIFs can provide a target audience with context into a piece of data or statistic using an animated diagram or graphic. For example- the advancement of flood waters, deforestation, and changing climate conditions over a period.

***
Limor is a technical writer and editor at Agile SEO, a boutique digital marketing agency focused on technology and SaaS markets. She has over 10 years’ experience writing technical articles and documentation for various audiences, including technical on-site content, software documentation, and dev guides. She specializes in big data analytics, computer/network security, middleware, software development and APIs.