GIF or video for website?
It’s a choice that many website owners face when designing their sites and putting together their pages and posts.
Virtually everyone understands that visual content makes a huge impact on how people receive and perceive the messages you convey. That intuitive hunch is backed by research, which shows that people remember 80 percent of what they see versus 20 percent of what they read [1].
That part is clear. What’s not as clear, and the reason why you’re reading this right now, is whether or not to use GIF or video for website visual content purposes. We’ll explore that in the paragraphs that follow.
📚 More specifically, we’ll look closely at the following:
- Pros and cons of using video on your website
- Pros and cons of using animated GIFs on your website
- Best practices for optimizing both videos and GIFs
Quick primer on videos vs GIFs
Video content and animated content are powerful forms of visual media which are on the rise. People spend an average of 1.5 hours each day watching video content, and 81% of businesses use video as a marketing tool. And thanks to the HTML5 video element and HTML5 video players, video content is easier than ever to serve to website visitors.
Animated GIFs have also grown in popularity with the rise of visual content. These animated GIFs combine multiple images or “frames” in a single file to convey motion, and they are a highly visual yet cheaper alternative to video content.
Now let’s take a closer look at both formats.
Using Video on Your Website
Pros
- Informative: Videos are ideal for demonstrating how things work. Businesses often use explainer videos to inform audiences on products/services they offer, how the product or service works, and how customers can benefit. All of these things can be achieved more clearly and more efficiently by video versus text: a two-minute video trumps a PDF that takes 20 minutes to read.
- Highly engaging: Engagement is an important concept in content marketing lexicon. Broadly speaking, engagement refers to people responding in measurable ways to your content with social media likes/shares and time spent on your website’s pages. Video is excellent at driving user engagement. The Content Marketing Institute reported that audiences are ten times more likely to engage, embed, share, and comment on video content than blogs [2].
- Emotional: Video is an excellent medium for telling stories because it can provoke a wide range of emotional responses in audiences.
- Improves conversion rates: Video content can play an important role in improving conversion rates on important website pages, such as landing pages.
Cons
- Time-consuming: Creating high-quality video content is often extremely time-consuming. To get a professional vibe in even the most basic video, you have to pay attention to scripts, sound quality, and lighting. Furthermore, most videos require extensive editing before publishing. This also takes a lot of time.
- Expensive: It can become quite expensive to create high-quality videos when you consider cameras, microphones, editing software, human resources, and perhaps even a studio. Creating professional-grade videos for business purposes requires significant investment.
- Reach dependent on connection speed: Even though the speed of Internet connections continues to improve globally, quite a significant portion of web users still browse websites on slower mobile network connections. Without sufficient speed or optimizations, slow loading times will limit the reach of any high-quality video compared to a blog post or static media.
Using Animated GIF on Your Website
Pros
- Cost-effective: Aside from the need to pay someone with the necessary skills to make animations look good, animated GIFs are a much more cost-effective content format to create than video.
- Straightforward to make: Armed with some images and animation software, you can quickly get to work in creating attractive animations that enhance your other content.
- Easy to edit: Some online resources discussing GIFs make the erroneous assumption that it’s not possible to edit them. However, editing an animated GIF is possible and it is much easier than editing a video file. To edit a GIF, you can use the free GIMP image manipulation platform. It splits each frame into separate layers for easy editing.
Cons
- Color limitations: The color palette for animated GIFs is limited to 256 colors, which can noticeably affect their quality and make them appear pixelated.
- Overheads: Websites that heavily use animated GIFs tend to experience significant overhead in terms of page loading times. Such overheads can damage user engagement.
- Can appear spammy: There is a fine balance between the level of animated GIFs that complement your on-page content and the level that looks spammy. People tend to skip a blog post littered with GIFs because they become too distracting.
How to Optimize Your Videos/GIFs
Optimization improves both performance and presentation for videos and GIFs, ensuring the content you’ve worked hard to create has the best chance of resonating.
Some best practices for optimizing videos and animated GIFs include:
Multiple Versions
Serve multiple versions of GIFs in different file sizes by using the srcset attribute in HTML. This attribute tells visitor’s browsers which GIF animations are available to serve and what size they are, and the browser then chooses the optimum file based on the specific device.
Convert animated GIFs to HTML5 videos
With the introduction of HTML5, browsers can now play video content online without needing to use plugins like Flash. By converting your animated GIFs to MP4 files, you can reduce their size and any associated bandwidth overheads dramatically. There are plenty of websites that convert GIFs to MP4 files for you.
Use an HTML5 player
To better optimize your animated GIFs (and videos), it’s recommended to serve them in an HTML5 video player. For business purposes, the default browser HTML5 player isn’t optimum. Dedicated HTML5 video players can provide branding, custom skins, and a slew of performance features.
HTML5 video players are available as both commercial software and open-source, and some examples include:
Compress
Compressing your animated GIFs reduces the file size, which means less bandwidth overhead. The Gifsicle algorithm losslessly compresses GIFs. This means the file size is reduced without a visible loss to quality. Web apps that use this algorithm include ImageOptim (Mac) and FileOptimizer (Windows).
So should you choose GIF or video for website content?
Hopefully what you just read helped you understand why people often debate between choosing GIF or video for website visual content. More importantly, we hope you now understand that they both have pros and cons. You don’t need to restrict your choice to either videos or animated GIFs. Both can serve as powerful additions to your website. In the end, regardless of the type of visual media you choose to show to website visitors, always remember to optimize before posting.
If you found this helpful, you might also want to check out our tips on getting faster results from blogging.
