According to Cisco's Visual Networking Index, by 2022 an astonishing 82 percent of all IP traffic will be video.

There are several reasons for this: videos attract and engage users; video is the medium of choice for millennials and beyond; people remember video more easily; video helps to increase brand engagement; and last but not least, video helps to improve SEO ranking.

In the enthusiasm to add video, however, it’s important to avoid common, costly mistakes. Unoptimised bandwidth-heavy video can add to IT and web budgets, and a poor user experience will lose you business.

The heavier the page, the longer it can take to load, and the more likely impatient visitors will abandon your site. Page load speed also impacts SEO ranking.

A major difficulty is that many marketing and web developers, who have to collaborate on video implementation, are unfamiliar with video concepts. They lack a common language to discuss requirements and solve problems, which leads to error-prone implementations.

It’s certainly wise to encourage your teams to learn and grow their video expertise. This guide can serve as a starting point and also help you prevent making some of the most common video handling errors we come across.

1) Use encoding to get the video resolution right and keep bandwidth low

With the best of intentions, videos are often delivered at resolutions too high for many customers’ browsers to display or resize properly. These large videos also require extra bandwidth. You can solve this issue with video codecs - software that encodes and compresses videos.

2) Choose the right video format size with browser support in mind

Developers without specialist skills will often use videos in their original formats instead of optimising them for the web. However, just as there are image formats like JPEG and GIF that vary greatly in size, there are also different video formats.

To decide on the right one, it’s essential to consider the browsers that your web visitors use. Our recent State of Visual Media Report revealed considerable regional differences in terms of the first and second most popular browsers.

Chrome is the clear winner in the US (52.7%) but in the UK, Chrome (45.9%) is neck-in-neck with Safari (41.1%). The research also found that a surprisingly large number of lesser-known browsers and versions in use - in other words, there is a very long browser ‘tail’.

Like JPEG, the old H.264 video codec standard is most widely supported and relatively small. If you want to ensure that people can watch your videos even if they use an old browser, H.264 is a good choice.

3) Do consider modern video formats for better website performance

You don’t always have to play it safe by using the widely supported H.264 format. New, lightweight formats such as VP9 and H.265 are anywhere from 30% to 50% more efficient. If website performance is a priority, these should be seriously considered.

4) Use the HTML5 video player to offer multiple video formats

The HTML5 video player allows you to have multiple video formats and let the browser pick the most efficient one. If you're serious about user experience and saving money, this is the easiest way to do both.

5) Don’t use too high a video bitrate

The bitrate is the number of bits it takes to encode one second of video. A high bitrate means better quality but results in bigger file sizes and higher bandwidth consumption.

However, since you can remove pixels from an image without the human eyes noticing, you don’t always need the highest bitrate. A metric that helps determining the best bitrate for the desired quality is called bits per pixel (bpp).

There are several tutorials available online to help calculate optimal bpp. If that sounds daunting, another alternative is to use a video management tool that automatically sets the optimal bitrate.

6) Use adaptive bitrate streaming for longer videos

Have you ever watched YouTube on a train and noticed a crisp video suddenly becomes a little choppy? This happens when your video player automatically adjusts to changing bandwidth availability through a process known as ‘adaptive bitrate streaming’.

Although the video may look choppy for a few seconds, this is far preferable to losing the video altogether. You only need to apply this technique for videos longer than 20 seconds.

7) Adapt the bitrate for different content

Video does not only get choppy as a result of low bandwidth or screen resolution. It can also lose quality when there is a lot of movement in the video itself.

For high-action scenes, your web developers should consider reducing the video resolution while maintaining a higher bitrate than usual. On the flip side, for scenes with little movement a high bitrate/ resolution is not necessary.

8) Always mute autoplaying videos

Most of the newer browsers do not autoplay video unless they are muted. If you want a background video to play automatically upon page load to catch your visitors’ attention, your web team should ensure they have added the "muted" attribute to the video tag.

If a video isn't autoplaying on mobile devices, it's likely that your web developers didn’t add the "playsinline" attribute; this can be easily fixed.

9) You don’t always need a specialised video player

Any specialized video player requires an extra download for the user. These players add a lot of functionality, like adaptive bitrate streaming support. But for many use cases like background videos or short video clips they are completely unnecessary and a waste of bytes. The lightweight HTML5 video player is also quite good for these use cases.

And last but not least…

10) Don’t use animated GIFs!

Many developers love animated GIFs. These short, funny, video clips add context that an image format like JPEG can't offer. GIF was the very first and therefore also the oldest, web-friendly image format.

However as the last update to GIF was 29 years ago, they are notoriously large. Using more modern, lightweight and web-friendly video formats like MP4 and WebM serves you and your visitors’ bandwidth requirements much better.

These ten points of advice are designed to arm you with basic knowledge to avoid the most common and costly video-related website mistakes.

Hopefully they’ve also given you and your developers a common language and conceptual understanding of web video issues to help you collaborate more productively and create the best possible user experiences.

Sanjay Sarathy is VP Marketing at Cloudinary.