It is easier than ever to capture stunning HD footage, but is that content helping or hurting your users experience on your site?
138% improvement in conversion when switching to video background on a homepage. – FoodBloggerPro
Videos are a great way to get people interested and engaged in your content, but if the video is not optimized correctly it can do much more harm than good.
In this article we will be going over the best resolutions, running times, and optimization techniques to ensure that your beautiful footage will not turn your users away instead of drawing them in.
Performance Differences
The following charts show download times for varying file sizes on 3 different connections. LAN 10 MB/s is your average desktop system with a high speed connection. 3G and 4G are mobile devices on a 3g and 4g network. These differences may not seem significant, but when considering that almost all content for a page must be loaded before the page can render we can see how an extra couple miliseconds can add up to a multi second delay in pageload.
Speeds from download-time.com
Optimal Specifications
When creating a video for your website, there are a few things that must be kept in mind. Where is the video going to be used on your site? Does it require sound? Will it loop (background videos and hero sections) or be informative with supporting content (intros and general content videos)? The answers to these questions will determine the optimal specifications for the video.
Length
For background videos and hero videos the optimal length is between 5 and 15 seconds, preferabbly not exceeding 30 seconds. After 30 seconds there is a 33% drop off in viewers. Push that to a minute and you are losing almost half of your viewers. This needs to be kept in mind from a cost perspective, since you do not want to be spending money creating a video that not many people will watch.
Content videos can be whatever length they need to be and are not subject to the above statistics. Supporting written content for the video is recommended to give users additional information and paths to digest the video content.
Resolution
Again starting with background and hero videos, the video should be optimized to whatever the largest version of the video will be. Since these videos will most likely be spanning your entire site, the recommended width is 1170px but no larger than 1600px. This will ensure minimal upscaling on very large devices, but native resolution or slight downscaling on most devices.
For content videos, again we should be striving for optimized videos at a pleasing aspect ratio for the content. 480px to 720px width are preferred here.
Audio
For all background and hero section videos, no audio is recommended. Google Chrome will soon be refusing to auto-play videos with sound and obtrusive audio only serves to drive users away from your site, exactly what we dont want.
Content videos can contain sound, but will not be auto-played on the website.
File Type
The final thing to keep in mind once your video is edited down and properly sized is the file type that it should be saved in. Modern web development standards require 2 different versions of the video to ensure browser compatibility and graceful fallbacks for legacy systems.
The file types we need are called .webm and .mp4. Both of these file types can be created using the free, open source software HandBrake.
Technical Details
For the .mp4 use the h.264 codec – Details
For the .webm format there’s 2 codecs to choose from VP8 and VP9. The most promising results have come from dropping the quality from 50 down to 15.
And as far choosing which codec, each has proven itself in different situations. The VP8 provides a smaller file size but does appear to be the first one that looks slightly degraded. It was ideal for the drone footage as the VP9 one was very jittery.
Optimal .webm render settings: 1280×720, 15 Quality, VP8 codec, no audio.
Closing
Background and content videos are excellent ways to draw users in to your site and wow them with your content, but only if we do everything we can to make sure that video is fast and unobtrusive.
Also keep in mind, different people react differently to different videos. If possible, create multiple versions of your video and get feedback on each. This will improve the overall quality of the video and allow it to reach more people!
