Last updated: October 15, 2019
Online video continues to dominate the internet and it’s now become a common element in web design.
Videos engage attention and spark the imagination, so it’s no wonder we’re seeing them being embedded in many home pages to draw the user’s gaze. Almost all web browsers now support HTML5 video so it’s the perfect time to add a background or header video to your website.
Clipchamp has some great templates that could be perfect for your website design, such as this gorgeous cinemagraph:
There are plenty of reasons you should be adding HTML5 video to your site, but don’t rush straight in. There are a few issues that can arise and you’ll need to optimize your videos to ensure smooth performance. Here’s what we’ll cover:
- Why you need to optimize videos for your site
- Slow websites lose customers
- Video formats are not all created equal
- How to optimize your videos with Clipchamp
- Compress your videos for HTML5
- Convert your video for browser compatibility
1. Why you need to optimize videos for your site
The benefits of HTML5 video don’t come without a price. Embedded video content that auto-plays can cause pages to load slowly, which is a huge traffic-killer. You may also run into issues if your videos aren’t compatible with the browsers your customers are using.
Slow websites lose customers
If your HTML5 video is too large it can significantly slow down your website. This can lead to an unpleasant experience for users watching your video pause and buffer as the site loads.
Thus, what’s supposed to be a nice design feature that adds to the overall impression of a website can turn into a nuisance for visitors if they have to wait for all elements to load and display correctly.
Even if you have great SEO and fantastic offerings that are bringing people to your site, poor user experience can undo it all. Not only will people click away from your site, but Google will take notice. Page loading times and click-away rates are both important factors that affect your page’s Google ranking. So make sure you compress videos for your site.
Video formats are not all created equal
The best HTML5 video in the world won’t help you if it won’t load in people’s browsers. Not all video formats will load in all browser types, so you need to convert your videos to avoid that awkward moment when the flashy video content doesn’t load. This is important to ensure videos get accepted by as many browsers as possible on as many devices as possible.
Unfortunately, there is no one format to rule them all but your best bet is either WebM (VP8) or MP4 (H264). These will load in most browsers, but not all.
In fact, the best thing to do is to convert your video content to WebM before using it in your website design but also provide an MP4 alternative. That way, in the rare case that WebM isn’t supported, the MP4 version will load instead.
2. How to optimize your videos with Clipchamp
The two most important ways to optimise videos for your web design are compression and conversion – and you can do both for free using Clipchamp Utilities!
As mentioned above, the best ways to optimize videos for web design are compression and conversion, which will help to drastically improve page load times and playback performance.
But before that, we have one recommendation: To maintain quality, we usually don’t propose reducing the resolution and bitrate of your videos too much, but you might have a bit more flexibility if you design videos mainly to be played in the background of your website. These videos aren’t the sole focus of attention, and they can often be displayed on smaller screens since so much browsing happens on mobile phones.
Looped HTML5 videos are usually displayed behind transparent layers or text elements and need to load and play quickly on any device, regardless of the internet connection. Thus, small file size trumps resolution. Clipchamp’s own website is actually an example of this advice in action. Now back to optimizing your videos:
Compress your videos for HTML5
As you might have guessed, if creating a small video file in good quality is the goal, our free online video converter and video compressor Clipchamp is a good tool to help.
It’s already popular among web designers, web developers, graphic designers, WordPress, Wix and Squarespace creators. It has also been recommended as a useful app by web design bloggers and visual website building platforms like Webflow specifically for the purpose of compressing background videos and cinemagraphs for websites.
Clipchamp compresses and converts videos locally in your browser before you upload them to your server, hosting provider, or website builder. So it’s not only useful once the video is up on the website but also makes the initial upload faster.
For use on websites, we generally recommend compressing videos down to at least 720p, using either the medium or low-quality setting in Clipchamp. Both the Web and Mobile output options are possible – the Mobile preset will produce smaller output files than Web at slightly reduced visible quality.
Convert your video for browser compatibility
You can easily convert your video to increase browser compatibility using Clipchamp Utilities. Simply upload your video, choose the desired format under Customize settings and Clipchamp’s free converter will do the rest:
If you want to add a backup MP4 for your site, just repeat the process but choose MP4 instead.