How to optimize video for the web?

preetpal · April 10, 2023, 6:32am

In this article, we will discuss the best ways to compress video for the web.

Reducing the size of the video file without considerably compromising its quality is part of the process of optimizing video for the web. FFmpeg is one of the best open-source software that can be used to do this.

Make sure to install FFmpeg on your system before you proceed further.

Here are the steps for FFmpeg-based web video optimization:

Reduce the pixel count of a video: It is one of the simplest ways to minimize the size of a video file. The following command in FFmpeg will accomplish this:

ffmpeg -i input.mp4 -vf scale=640:1 output.mp4

The video will be resized with this command to 640 pixels wide while preserving its aspect ratio. The width can be changed to any desired size.
Reduce the video’s bitrate: This is another method for shrinking the size of a video file. The following command in FFmpeg will accomplish this:

ffmpeg -i input.mp4 -b:v 1M output.mp4

The video bitrate will be set to 1 Mbps with this command. The bitrate can be changed to any desired value.
Optimize the video codec: The size and quality of the video file can be greatly affected by the video codec that is used. H.264 and HEVC are only a couple of the many codecs that FFmpeg supports. To convert a video to the H.264 format, use the command line:

ffmpeg -i input.mp4 -c:v libx264 -preset slow -crf 22 -c:a copy output.mp4

Using a slow encoding preset and a Constant Rate Factor (CRF) of 22, this command will convert the video to the H.264 codec, producing a high-quality output while maintaining a manageably small file size.
Reduce the audio bitrate: It greatly increases the size of a video file. The command listed below can be used to lower the audio bitrate:

ffmpeg -i input.mp4 -c:v copy -c:a aac -b:a 128k output.mp4

With this command, the audio stream will be converted to the AAC codec at a bitrate of 128 kbps while the video stream is copied exactly as is.

You can prepare your video for the web and make it easier for people with slower internet connections to access it by using these FFmpeg instructions.

The ideal solution is to use Gumlet if you don’t want to perform anything of the above.

Gumlet service sits in between the video storage and the end-users. Clients can either use the Direct upload option on the Dashboard or upload the video from their existing storage and perform the following:

Create Collection > Create Video Profile > Upload the video for processing.
Once uploaded, after that, Gumlet validates, optimizes, and processes it.

Tips to Compress Videos for Web

Here are several factors that might be considered while optimizing the video for the web such as file size, resolution, format, and encoding.

Use the suitable video format

MP4 and WebM are the two most popular video formats for the internet.
Most devices accept MP4, but most contemporary browsers support WebM, which is an open-source format.
Depending on who your target audience is, choose the right format.

Compress the video file

Large video files will take longer to load, leading to a bad user experience.
Your video file can be compressed to become smaller without losing its quality.
There are tools for compression that are readily available, including Handbrake and Adobe Media Encoder.
Here are the Top 10 Video Compressions tools that you can use.

Reduce the resolution

The file size of your video depends on its resolution.
Your video’s file size can be greatly decreased by lowering the resolution.
Make sure to strike a balance between the video’s quality and file size reduction

Streaming video optimization

Videos that are prepared for streaming load more quickly and give the consumer a better experience.
Use a video player that enables adaptive streaming, which modifies the video’s quality dependent on the viewer’s internet connection.

Use CDN

Your content is distributed across several servers through a CDN, which can greatly speed up loading times. Moreover, CDNs offer a more dependable streaming experience.
For more visit this once: Why CDN is crucial?

Activate caching

By saving a copy of the video on their device, caching enables your video to load more quickly for repeat users.

Optimize video thumbnails

Use compressed image formats and reduce the thumbnail image’s file size to optimize video thumbnails. This shortens the webpage’s loading speed.
Follow this guide about thumbnails.

These pointers will help you optimize your video for the web and give your visitors a better viewing experience.

sahil · November 2, 2023, 4:26pm

I tried to compress my videos, but I was worried that the quality would suffer. How can I reconcile keeping my website’s videos high-quality while also allowing for the appropriate amount of compression?

preetpal · November 2, 2023, 4:27pm

Sahil, one common difficulty is to retain quality while balancing video compression. You can run quality tests at various bitrates and resolutions to determine the ideal balance. To ascertain the appropriate trade-off between file size and visual quality, combine subjective assessments with objective measurements such as PSNR and SSIM.
It is important to keep in mind that your audience’s normal viewing conditions and devices may affect the compression settings you choose.

sahil · November 2, 2023, 4:28pm

Thank you @preetpal fir your response!

I have one more query, I’m dealing with a significant amount of user-generated video content as my platform expands. How can I optimise and transcode these videos at scale in an efficient manner to maintain the performance of my website?

preetpal · November 2, 2023, 4:28pm

Handling a large number of user-generated videos calls for scalability and automation. To automate the transcoding process, you can leverage serverless solutions like AWS Lambda or a cloud-based transcoding service like Amazon Elastic Transcoder.
These services are able to effectively optimize videos for the web while also adapting to the growing workload. To guarantee seamless operations at scale, you need also to have strong monitoring and error handling in place.