How To Optimize Video For Web

0

5 tips on how to avoid website slowdowns and unhappy visitors due to videos

Video is an essential part of most web pages, but they can be large in size. It is important to optimize your site’s video for web use. By optimizing video for both file size and image quality, you can significantly decrease page load time and avoid distracting video stalls.

If you’re looking for tips on optimizing video for web background, you can jump directly to that section.

Why Optimize Video For Web?

Poorly optimized web video can do more harm than good. Did you know videos can be shockingly large in file size? For example, some video formats use over 5GB of storage space for just one minute of video. Crazy, huh? That’s more than most people’s entire monthly mobile data plan! At the same time, other video files are so compressed that it’s sometimes hard to see what’s happening. Obviously, we want to land somewhere in the middle, embedding a fast loading, high quality video on our website. 

Because video can vary so widely in file size, it’s important to optimize your videos so that they both transfer quickly over the web to your website visitor, while also making sure that your video stays jitter-free, clear and attractive. With the average web page weighing in at just 2.2MB in 2021, and the average video size of a non-streaming, progressively downloaded video of just 2MB, there’s not much room in the web page file size budget for a large video file. 

Historical Video File Size On Websites
Image via https://httparchive.org/

As you can see in the chart above, self-hosted web video files sizes have increased slightly in the last few years, after sharply dropping in 2018-2019. 

It is worth mentioning that videos that are streamed from a specially-configured server can have unlimited file sizes. Instead of being limited by file size, both self-hosted, progressively downloaded and streamed videos are limited by their video bitrate, or the amount of data that needs to be transferred to play a video. To avoid pauses, jitter and buffering, you want to make sure that the bitrate of the video does not exceed the download speed of your visitor.

For example, if your target user will be visiting your website on their mobile phone while on the go, you would want to ensure that your video can stream at a maximum bitrate of 1000 to 1500 Kbps to avoid pauses while the download catches up with the video playing. We’ll explain how to optimize both types of videos below. 

Typical download speeds by connection type. 

Just because most connections above can transfer upwards of 5Mbps per second, doesn’t mean you can use all 5000Kbps for your video. It’s a good idea to leave some headroom, as people rarely see the full speed potential of a connection, and the video is not the only data they are transferring when they view your website. 

Still think you can get away with large video files because your users are different? Studies show that slow page load times can result in decreased conversion rates and increased bounce rates, two things that you want to avoid at all costs. With that in mind, it’s a good idea to optimize your videos to help avoid the downsides that come with a page slowdown. 

Different Ways To Optimize Video For Web

Video optimization is more than just running your video through a tool to compress it. Sure, that’s one option, but there are many different ways to achieve the goal of fast page loads and happy web visitors. 

Option 1: Create A Short Video

Short videos are quite popular these days. Perhaps there is a way you can repurpose your multi-minute video into a shorter 5-30 second summary video that gets most of your point across in a fraction of the time. These short videos are often preferred to longer length videos for many users and can easily be repurposed as social media posts. 

Did you know that the average video watch time on Facebook is just 10 seconds, and that 6-10 second videos get the most views?

If you’re not great on the video editing front, LucidVideo’s automated preview tool can instantly create short, easily-sharable video summaries of your content with just a click. 

Option 2: Remove Unnecessary Audio

Does your video serve as a webpage background or otherwise play with the sound muted? If so, make sure that the audio track has been removed, as there’s no point in sending audio data to a user that will never hear it. For a quick audio removal, try AudioRemover. If your video also needs to be resized or compressed, jump down to the Compress Your Video section for instructions on how to remove audio while you compress your video.

Option 3: Use A Video Streaming Service

Perhaps the easiest way to optimize your progressively-downloaded video is to get it off your website and host it with a dedicated video streaming service. These streaming services act as a Content Delivery Network (CDN) to ensure that your videos are streamed from nearby video-optimized servers, ensuring the fastest possible connection. There are many options out there, from high tech startups like LucidVideo to market leaders, like YouTube. 

Video streaming differs from prograssive downloading of a video in two important ways. First, progressive downloads often require most of the video to be downloaded before the video will play. This can lead to long stalls during page load if the user’s connection is not fast and/or the video has a high bitrate. 

Additionally, a streaming service can choose from multiple different versions of a video to stream, making sure the viewer gets the best possible combination of speed and quality. For example, the streaming server may start with a lower bitrate, faster loading video stream to ensure there is no wait to play the video. Then the server will switch to a higher quality stream as you watch more of the video.

Optimizing Streaming Video vs. Downloading Video
Differences Between Downloading & Streaming Videos

Most video hosts will ingest a single master video file from you, and then dynamically stream to your users one of many optimized versions of your video. These multiple versions of your master video and optimized for different viewing scenarios, to ensure the best possible viewing experience. For example, a mobile user on a 3G connection will be sent a smaller, faster loading video file than a desktop user on a super-fast corporate network.  

Option 4: Compress Your Video

As mentioned above, videos have a range of file sizes based on their level of compression. This is a bit of an oversimplification, but for the most part, the less compression applied to a video, the better the quality of the video and the larger the file size, and vice-versa. This means you need to strike a delicate balance between the amount of compression applied to a video and its resulting file size. 

Free tools such as Handbrake will take your master video file and shrink its file size with compression. You can choose from multiple different export options, or you can manually edit settings to get exactly what you want from the app. 

Handbrake Video Optimization Settings
Handbrake Video Optimization Settings

If your setup allows for multiple video streams based on user connection, it’s a good idea to export three different streams, one for slow cellular connections, a medium version for better mobile connects and slower wifi, and a high version for fast connections. 

Option 5: Resize Your Video

Our cameras today are capable of taking extremely high resolution video. From 1080P FHD to 4K UHD, these videos look great on a big screen TV, but frequently don’t need all their pixels when displayed on a website. Optimize these videos by running them through Handbrake or another piece of video editing software. 

For example, if you shot a one minute long, 60 fps, 4K video on your new iPhone, you’d end up with a 400MB file. HD videos are just as overly large, with the same video above, but shot in 1080P weighing in at 175MB. 

Optimal Video Bitrates and Sizes
Optimal Video Bitrates & Sizes

Running a random 1 minute video through Handbrake, using the YouTube/Vimeo export preset resulted in a 1080P video that is 36.3MB, a 720P video that is 20.7MB and a 480P video that is 4MB. 

You should size your video to how you plan to use it on your website. For full-width video backgrounds, you may want to stick to 1920×1080 pixels. If your video is not meant to be played full screen, and only is displayed on a small part of the screen, you can save a significant amount of data by reducing the pixel dimensions to better fit the space available. 

Optimize Video For Web Background For Free

One of the most common reasons you need to optimize your video is for a video background on a web page. When doing so, you’ll want to create an optimized video file that is both small and short, so your visitor does not need to wait to watch your video. Don’t worry, it’s easy to optimize video for web backgrounds. First, go download the free app Handbrake to your computer. We’ll use this tool to resize, shorten and compress your file to make the perfect web background video. 

Download Handbrake for Free

Step 1: Select Your File

Open Handbrake, select File -> Open Source (if it did not start with the file selection box already open), and then navigate to the video file you want to use as your video background.  

Optimize Video for Web Export Settings
Optimized Video Export Settings

Step 2: Choose Video Optimization Settings

Start with the HQ 1080P Surround preset, then switch to the video tab and choose the Average Bitrate option, and enter your desired bitrate. Here, we chose 500kbps, as that is a bitrate that will be playable by everything, from cellular phones to desktop computers, and will allow for smaller file sizes and quicker page loads. You could choose a higher bitrate if you prefer, but keep in mind that larger files take longer to load. 

Optimized Audio Export Settings
Optimized Audio Export Settings

Step 3: Remove unnecessary audio

Switch to the Audio tab and remove any audio tracks. Do this by clicking on the video track name and selecting None. Remember, autoplaying video can not have sound, so there’s no need to keep it as part of the web background video file.

Handbrake Video Export Preview for Optimized Web Video
Handbrake Video Export Preview

Step 4: Preview your optimized web video

Check to see how your web background video looks with the preview button. Simply click it and you will see a single frame preview of the video. Next, click the Live Preview button to have Handbrake encode a short clip of the video to see how it looks. This is much quicker than exporting the entire video to see the result of your video export settings. 

If the bitrate is too low, and the video has too many compression artifacts, go back to Step 2 and increase the bitrate, then create another preview as outlined at the beginning of this step. 

Step 5: Check the video’s file size

Check your video’s file size. We want to keep the file size as low as possible, even if the bitrate is low. If your video weighs in in double-digit MBs, or even high single-digit MBs, you will probably want to work to make the video smaller. Ideally, the video will be just a few MBs, with smaller almost always better. 

You have two options when it comes to finding the video’s file size. First, you could just export it to find the file size. Or you could do some calculations to find it. We usually just export it, because it’s easier. 

If your video is too large jump down to the Ways To Shrink A Background Video’s File Size section for tips on putting your video on a diet. If not, move on to Step 6.

Step 6: Export your optimized video

Once you reach a good background video file size/quality/length, you are ready to export the video to use on your website as the background. If necessary, change the Save As name and location, then click the green Start button to begin the export. Depending on the length of your video, this could be quick or take a bit of time.

Note: Be sure you test out your new background video in multiple ways to ensure a good user experience. Try to test on a wired desktop or laptop on wifi, as well as on phones on wifi and cellular connections. 

Three Ways To Easily Shrink A Background Video’s File Size

  • Reduce bitrate. Try dropping the bitrate to 1500kbps, 1000kbps, or even 500kbps. We can handle some compression artifacts here, as this is for the background. People should be focusing directly on the foreground art or text. 
  • Reduce pixel size. You can probably get away with using a 1280×720 pixel dimension for your web background video. 
  • Reduce video length. Shoot for around 30 seconds in length maximum, with less than 10-15 being ideal. Remember, people rarely sit for an extended period of time on one specific spot on a website. You don’t need to have a long video. 
How TO Shorten Background Video Length
How To Shorten Background Video Length

It’s easy to shorten the video in Handbrake. Switch to the Video tab and select Seconds as the Range on the top right of the window. Select the range you want, shooting for a maximum of 30 seconds or so. Next, jump back to Step 6 above. 

In our example’s case, we ended up reducing the video’s pixel dimensions to 1280×720, as the 1920×1080 video showed more compression artifacts than we wanted to see. Keeping the same bitrate, Handbrake has to compress 1 megapixel (MP) of video data per frame with 720P video, as compared with 2MP of video for 1080P video. This 50% reduction in pixels means better quality at the same bitrate. Our final 27-second video weighed in at a speedy 1.7MB in size. 

Best Web Background Video Export Settings
Comparison of Video Export Settings

Note the difference between the top and bottom freeze frames. At the same bitrate, the top one, with the lower pixel count, is clearly better quality than the lower one with more pixels. 

Web Optimized Video Summary

Video is an important addition on many web pages. It’s important to optimize videos for the web to find the perfect balance of fast page loads and quality visuals. This can be achieved in multiple ways, including shortening the video, compressing the video data, resizing the video and switching from hosting your own videos to using a streaming video service. 

Speaking of video streaming services, LucidVideo offers all the high quality video hosting and streaming your website needs, along with advanced features such as automated short video previews, next video recommendations, easy export to email, and more. Sign up for your free trial today!

Free LucidVideo Trial

Leave a Reply

Your email address will not be published. Required fields are marked *