Sustainable Websites: Optimising Website Banner Videos
Reduce your website carbon footprint - A practical example
We talk a lot about why you should take an interest in reducing the carbon footprint of your website and broadly discussed steps you can take here and here but today we're going to give you an example of how you can reduce the page load of your site and why it’s important.
Rich had the pleasure of spending an afternoon with Dan from Right Here Creative as we experimented with a specific video use case on websites - the banner video, in this case it was a full screen banner video as you can see from the finished product here.
The banner video often used to engage users on your website as it tells a story as soon as someone lands on your website. They can be very powerful and certainly something we at Ampersand Studio and Right Here Creative would recommend considering but it comes at a cost. Videos will slow the page load time of your site which in turn will increase the energy used by your website.
Knowing how to optimise and reduce the impact of both is therefore essential.
TL;DR
This article goes through the steps we took to get to a conclusion, what we tried and where you might be able to adjust your setup depending on the various factors used. In conclusion this was the video configuration we settled on but if you want to know how and why and what variations you can make then please read on.
Video Dimensions: HD 1920 x 1080
Length of video: 10 seconds
Bitrate: 6000kb/s
Inclusion of audio: no
Network Optimisation: yes
The Experiment
As with all good experiments we started with a set of parameters and then adjusted one at a time, with our target being to ensure the page loaded in less than 2 seconds, which we believed was going to need a video at around the 6Mb size. This will get a bit technical but bear with us you don’t need to understand it all just know what impact each element can have and therefore help you plan the production of your video.
First things to note, the fixed elements. We used a desktop machine connected to broadband with a speed of ~70Mb. This is the first important variable, if you’re on a faster network it’s going to load faster, so take this in to account and adjust accordingly to a more average speed.
Changeable variables
- Video Dimensions
- Length of video
- Bitrate
- Inclusion of audio
- Network Optimisation*
We won’t list every attempt we made but as a starting point we used the following:
Video Dimensions: 4k 3840 x 2160
Length of video: 19 seconds
Bitrate: 8000kb/s
Inclusion of audio: yes
Network Optimisation: no
Needless to say this was 110Mb in size and buffered when using on the website so we reduced the video to a more realistic dimension that would suit the majority of monitors.
Video Dimensions: HD 1920 x 1080
Length of video: 19 seconds
Bitrate: 8000kb/s
Inclusion of audio: yes
Network Optimisation: no
Now we had a more respectable 29Mb file and a page load of 5 seconds. From here we adjusted the bitrate until we got to the 2 second mark which gave us this configuration:
Video Dimensions: HD 1920 x 1080
Length of video: 19 seconds
Bitrate: 2500kb/s
Inclusion of audio: yes
Network Optimisation: no
File size was now 6Mb and page load was 2 seconds - job done, you might think, however such a low bitrate caused the quality of the video to be too low, giving it a very blocky feel, blurry for fast moving shots and made the experience more detrimental by having the video. If you’re planning to use a video that has slow movements, maybe mainly text then you may find this configuration will work for you but test it before you commit to it.
The next step was to look at another option to adjust so we turned the audio off.
This is actually recommended as most browsers won’t autoplay a video if it’s not muted so for banner videos that you want to play on page load it makes sense to take the audio out. Use videos with audio elsewhere where a play button can be used. We also rowed back the bitrate to a level that made the quality of the video acceptable.
Video Dimensions: HD 1920 x 1080
Length of video: 19 seconds
Bitrate: 4000kb/s
Inclusion of audio: no
Network Optimisation: no
Now we had a 10Mb video and 2.5 second page load speed, so close but not close enough.
Next step reduce the length of time the video played for to 10 seconds.
Video Dimensions: HD 1920 x 1080
Length of video: 10 seconds
Bitrate: 4000kb/s
Inclusion of audio: no
Network Optimisation: no
Target met!
Less than 2 second page load and a 5.2Mb file. From here you can increase the bitrate to improve quality until you push it over the 2 seconds. We found 5000kb/s was still OK.
We still had one variable to play with though - network optimisation. This was specific to Davinci Resolve, the video editing software we used, so we turned this on and tested again.
Video Dimensions: HD 1920 x 1080
Length of video: 10 seconds
Bitrate: 5000kb/s
Inclusion of audio: no
Network Optimisation: yes
No change in the file size but the page load dropped to 1.5 seconds, giving us some room for manoeuvre with the quality of the video. We pushed it all the way up to 8000kb/s with the following outcome.
Video Dimensions: HD 1920 x 1080
Length of video: 10 seconds
Bitrate: 5000kb/s
Inclusion of audio: no
Network Optimisation: yes
A file size of 10.6Mb but still a page load of less than 2 seconds. At this specification we’re compromising the size of the resources for a better quality video so our advice would be to adjust the bitrate from 5000 - 8000 kb/s until you have a quality you’re happy with then you can look at ways to offset your web page energy usage elsewhere.
You also may not want or need a full screen video background, it may only need to be a letter box size at the top of the website which would significantly reduce you file size and allow you to adjust other factors to improve quality.
What about mobiles?
Well, in truth you probably shouldn’t be using banner videos on mobiles, even with 5G it can take a while to load and you then have to consider shooting a video that will fit the dimensions of a mobile screen (portrait), rather than desktop (landscape). Our advice, stick to images for now.
Conclusion
Hopefully you can see what variables you should consider for banner videos so when you plan the production you have some boundaries, in terms of how it should be shot and how it should be edited. There won't be a one size fits all but it gives you a good starting point for discussions.
If you would like to find out more about developing videos for websites please feel free to contact either Rich from Ampersand Studio or Dan from Right Here Creative or just take this information away and discuss with your web developer of video creator so you help to reduce the impact of your website on both the user experience and the environment.
* Network Optimisation: "The MP4 video container has a non-constant-length "metadata" section of the file. Because of this, it's more convenient to write out the audio/video streams in full, then write the metadata at the end of the file. However, this causes problems when streaming online (on some HTTP servers, anyway) where the browser, looking for the metadata section (which is at the end of the file), will have to download the entire file before it can begin playback.
"Network Optimisation" simply places this bit of metadata at the beginning of the file so that no matter what is reading the file, it'll always get to the metadata section first and be able to decode the audio/video streams as they come in."