Many modern businesses understand the importance of using a diverse range of content types on websites to keep users engaged. Visual content, in particular, makes a huge impact on how people receive and perceive the messages you convey.
A Hubspot infographic provided some revealing stats on the power of visual content. The infographic contained results from research showing that people remember 80 percent of what they see versus 20 percent of what they read.
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.
This article overviews some pros and cons of using video and animated GIFs on your website or You’ll also find out some best practices for optimizing these files.
Using Video on Your Website
- 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 10 times more likely to engage, embed, share, and comment on video content than blogs.
- 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.
- 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, which 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
- 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, which splits each frame into separate layers for easy editing.
- 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/animated GIFs include:
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:
Compressing your animated GIFs reduces the file size, which means less bandwidth overhead. The Gifsicle algorithm losslessly compresses GIFs, meaning the file size is reduced without a perceptible loss of quality. Web apps that use this algorithm include ImageOptim (Mac) and FileOptimizer (Windows).
You don’t need to restrict your choice to either videos or animated GIFs—both these types of visual content have their own unique benefits and they both be powerful additions to your website. Regardless of the type of visual media you serve to website visitors, always remember to optimize before posting.