Video is one of the most popular forms of online content, with an estimated 82% of all global internet traffic in 2022 coming from video. The trouble is, video files are huge. And in the world of low-carbon web design, there’s an argument that we shouldn’t be using video at all.
That said, videos can also be a force for good. They are an engaging and informative asset that can help purpose-led businesses to spread their message, and if they are used consciously, they can be used while keeping your website’s page weight down and environmental impact low.
In this guide, we’ll look at how you can use videos on your website while still prioritising efficiency and sustainability.
Table of contents
The growing popularity of video is adding massively to the size and environmental impact of websites. Video files are naturally much larger than static image files, and they negatively impact page weight and load speed, which significantly increases the amount of energy being used every time that page loads.
One important step we can take to minimise a video file’s impact on page load speed is to ensure the video only loads in if someone actively chooses to play it.
That means avoiding the use of autoplay.
Autoplay is a feature that tells a video to load in and start playing as soon as the page is opened, regardless of whether the visitor wants to watch it or not. This can potentially annoy the visitor and also generates unnecessary emissions.
To stop a video autoplaying by default, use the autoplay attribute:
<video src="dog.mp4" autoplay="none"/>
You can go one step further and prevent a video file from downloading at all unless the play button is clicked. Do this using the preload attribute:
<video src="dog.mp4" preload="none"/>
If you’re a WordPress user and you’re adding a video via the page editor, you can select the video’s preload value in the Gutenberg block settings.
Learn more about video preload settings on MDN.
Sizing your videos
If you are using video on your website, it will help with page weight, load speed and energy consumption if you can keep the file itself as small as possible.
One of the most important things you can do in this respect is to ensure the video isn’t formatted for cinema-size screens when the biggest it will ever be played is on a 20-inch laptop.
Making sure any video files are added to your web page at the dimensions they will be used will ensure the page loads as quickly and efficiently as possible.
Keep it concise
While there is no commonly accepted ideal length for a video, it’s worth bearing in mind that every second of video you put on your website adds to your file size, page weight, page load speed and carbon footprint. So the shorter the better, really.
The key is to be succinct in your editing, and try to really question the value of every frame. If a certain scene adds nothing of value to the visitor, cut it out. The quicker people can find the information they were looking for, the better their experience will be and the more favourably they will think of your business.
Compressing your videos
Much like with image optimisation, you can shrink the size of your video files by compressing them. That means you can shave off valuable bytes without affecting the quality of the video.
Again, there are plenty of free online compression tools out there that will do a good job of getting your video files ready for upload. Alternatively, you can download free software like Handbrake, which massively reduces video file sizes while preserving sound and picture quality.
Don’t embed from YouTube
Embedding a video player from an external platform like YouTube or Vimeo is often as simple as pasting a line of code into your site. And on the face of it, it is an efficient, effective and user-friendly way of incorporating video into your web pages.
Thankfully, there are a few ethically minded independent video streaming platforms that provide an alternative to the data-hungry likes of YouTube. These include mave.io, a privacy-focussed, EU-based video building and hosting platform that offers fast, seamless and cookieless embeds.
Learn more about the performance benefits of privacy-focussed web design.
A video’s poster image is the image that shows before your viewer clicks the play button. Setting a poster image will often look much better than simply showing either the first frame of the video, or nothing at all if your preload value is set to “none”.).
In HTML, you can set a poster image via the poster attribute, like so:
<video src="dog.mp4" poster="video-thumbnail.jpg"/>
WordPress users can select a poster image via the Gutenberg block settings.
Standard rules for optimising images apply here, including:
- Sizing the image appropriately (ideally the same dimensions as the video)
- Compressing the image before use
- Converting to WebP format
Learn more about image compression in our image optimisation guide.
Converting to webm format
Images have the WebP format, and video now has the WebM format. This modern video format, developed with the support of Google, allows for quality video to be created with a relatively small file size compared to other formats like MP4, MOV and AVI.
WebM integrates modern audio and video compression technologies to achieve huge file-size savings while preserving quality. The format is supported by all major browsers, either by default or with a plugin, as well as most major video and media players, making it a good option for video on any website.
Using WebM helps you to:
- Reduce file size
- Reduce overall web page size
- Easily convert media to a more efficient format
- Optimise your website for real-time, high-quality streaming
- Support great user experiences while minimising the emissions associated with your website.
If compressing a video using Handbrake, it’s worthwhile exporting in both MP4 and WebM formats, comparing the file size and using whichever is smaller.
Thoughts on the future of video
While video remains one of the least efficient website assets, it’s worth considering how the recent developments made towards optimising images could also be applied to video.
A few future developments we’d love to see towards making video more energy efficient include:
- Responsive video, similar to image srcset, which would load in a smaller sized video for smaller screens.
- Native lazy loading for videos (even for autoplaying videos).
More video tips
The above tips will all help to ensure any videos on your website are being used consciously and efficiently, so that the environmental impact is kept to a minimum. There are other things to consider when using video, however, and a few good practices you should try to follow:
- If your video has sound and speech, you should always aim to include captions to aid accessibility. If you’re using auto-generated captions, just make sure they are accurate, and that they fully represent what’s being said.
- To avoid layout shift while any video files load in, try setting the width and height on all video tags.
- Your choice of hosting company can impact your site speed. Choosing a high-quality, sustainable web hosting package will mean you get additional caching and compression techniques applied to your videos, helping them load in even faster.
- Using a Content Delivery Network (CDN) can help you achieve further page load speed gains, particularly if you get lots of international visitors to your website.
As a sustainable web design agency, we’re always committed to making websites that are better for the planet, as well as good for businesses. So while we know video assets aren’t great from an environmental perspective, we also know they can help ethical businesses to do good things in the world. And, happily, there are a few things we can do as designers and developers to reduce the emissions impact of video.
In this article, we have talked about how you can:
- Compress your videos to keep the file size as small as possible, reducing the time and energy required to load them.
- Use an efficient file format, such as MP4 or WebM, to further reduce the overall page weight and page load speed.
- Avoid autoplaying videos. This has the added benefit of not annoying visitors who don’t want to watch or engage with video content.
- Keep your videos as short and succinct as possible, ensuring you cut any frames that don’t deliver value or meaning for your visitors.