Using video backgrounds on your website can be a great way to grab the initial attention of viewers. Video has become increasingly popular over the years as a background design feature, and will only continue to grow as support for HTML5 video in all modern browsers is edging towards becoming the default.

Some of the most frequently asked questions we’ve seen online about how to optimize videos for web design come down to 2 common problems you might encounter when creating and implementing background videos in your projects.

1) Compressing videos for use on websites

The first one relates to files often being too large when they come out of editing or authoring applications. This is a big issue as limited bandwidth and poor internet connections can lead to videos pausing and buffering a lot before they’re loaded in full.

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.

compress-web-design

Large videos are not just bad for overall page load times and provide a negative user experience, esp. if your site is accessed for the first time and not cached yet. They can also negatively impact your site’s SEO as fast page load times are an important factor that Google and others take into consideration. Therefore, compressing videos before using them on a website is the way to go.

2) Converting videos for HTML5

Secondly, videos you get from colleagues or create in editing suites can often be in a format that can cause problems at run time as most browsers (Chrome, Firefox,Edge, Opera, Internet Explorer, Safari, etc.) are able to recognize some but not other video formats, video codecs and (if it’s in the container) audio codecs without extra plugins.

MP4 and WebM are arguably the most common video formats for web use. Due to possible licencing issues with MP4, it’s best to convert videos to WebM (VP8) before using them on websites and optionally provide an MP4 (H264) video as an alternative for browsers that do not support WebM.

This is important so as to ensure videos get accepted by as many browsers on as many phones, tables, laptops and operating system combos as possible. Unfortunately to-date, there is no one format/video codec/audio codec combination to rule them all.

Optimize videos for web design

As mentioned above, one way for optimizing videos for web design is to reduce the video’s file size, which will help to drastically improve page load times and playback performance.

Additional options include reducing the video’s resolution and quality (compression level and bit rate). Yet another factor is to pick a widely recognized video format.

While we usually don’t recommend to reduce resolution and bit rate of your videos too much as these 2 are important for the visible quality of a video, this is less of a concern when it comes to website background videos due to the fact that these kinds of clips are often not what visitors are focusing on.

Instead, looped HTML5 videos are getting displayed behind transparent layers and/or text elements and are a supporting design item that needs to load and play quickly on any device your visitors use to access your site, regardless of the internet connection they’re on.

Thus, small file size trumps resolution, bit rate and visible quality to a certain extent.

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.

compress-video-web-design

 

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 to compress 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 more reduced visible quality.

In summary, the best settings for background videos are either Web, 720p, medium quality, MP4 or WebM or Mobile, 720p, medium quality, MP4. Depending on your input file and the quality as well as file size of output videos Clipchamp produces in your scenario, it’s best to try a combination of different settings to achieve a result you’re happy with.

 

HTML5-background-video

 

We understand that it can be tempting to use high quality videos of 1080p or more, but would advise against it, considering that the average time visitors spend on any given website is less than 15 seconds. You’ll want to make a good first impression in those crucial first few seconds and our online video converter can help with that.

 


*What are cinemagraphs you ask? Check out this subreddit and its beautiful examples.