As you may have read, as early as 2016, Mark Zuckerberg announced that videos would take over from static images and photos on the web.
Today, more than then, it is increasingly common to come across multimedia content such as videos on the web, especially thanks to the world of social media. Every day we waste minutes and minutes in awe in front of videos on the web because they have the incredible power to attract the attention of users. For all those who create content not only on social networks but above all on websites, it becomes a fundamental skill to know how to untangle the compression parameters of a video. The enterprise, for those who know what I’m writing about, doesn’t always turn out to be easy!
How to compress a video for email?
For this reason, today, take 5 minutes and read this article on how to compress and optimize videos for the web: we will see together which are the tools with which you can easily reduce the size of a video file, use the appropriate format and above all the correct method to implement it on your web pages.
When you need to compress a video for the web?
Let’s start by actually defining when we need to optimize a video for use on the web and when it is an unnecessary operation.
In principle, on social media such as Facebook or Instagram, it is not necessary to compress or reduce the size of a video. This is because the two giants are equipped with a compression algorithm, which processes the videos the moment we upload them. If you notice, the same happens for the photos too!
If, on the other hand, you have a website of your own, you will have to at least choose how to behave for the integration of a video. Since videos were implemented in HTML5, it has become much easier to embed files directly into web pages. However, it is always very easy to cause damage, for example, by uploading files that are too large to be uploaded by a user with a non-amazing connection.
As you well know, a Full HD video can even weigh several Gigabytes, and even if you want to keep the quality at the top, it would be unthinkable to load such a bandwidth-hungry file on a web page.
Video for websites: the types
Well, as you read above, we understand that compressing a video is especially important for anyone who has a blog or a proprietary site.
By the way, if you have a site built with WordPress, take a look at 10 steps to optimize your WordPress site!
I like to think that videos on websites are essentially divided into two broad types:
- The video backgrounds, which are the background to our pages with large hero sections, perhaps with a colored overlay;
- Videos that serve as salient content for the page or article: those that we expect our users to view in comfort;
Video as a background
The videos that are the background in the sections of the sites have always made me waste a lot of time because just when it seems to you that everything is perfect, you realize that there is no compatibility with a browser, be it mobile or desktop.
I have become more and more skeptical about their use, but let’s face it: they are really beautiful and always make their effect!
What has begun to bother us poor web designers in recent years is the famous autoplay, which for example, on the iPhone is not really contemplated (I’m referring to Safari). Google chrome also recently introduced blocking for videos that play automatically, without user interaction with a play button.
There is still no single solution. However, many designers are convinced to use the coveted background video and provide a fallback image or a cover photo that will only be displayed on devices that block the playback of the video. This, in my opinion, is an excellent compromise to make the site more usable and not to create ugly black holes.
The fundamental characteristic of the video designed to act as a background is that it must weigh as little as possible to be loaded quickly together with the rest of the page resources. The more MB we can nibble on that file, the smoother our users’ experience will be.
If you lack in user experience, read our User Experience article: what it is for and why we should take care of it.
The other characteristic is usually the short duration. Given that the background videos are played in a loop and act as a background to another content (a paragraph of text or a Call To Action), it would be useless to use a 5-minute video. Just cut out a portion of 10 seconds! In this way, the weight of the file will drastically decrease.
A good technique is to create two variations of a video: one to use in good quality and the other compressed and cropped to use as a background.
Video as the main content
When the video is the focus of your section, page, or article, then it is best to keep it as unaltered as possible. You will have to carve out a nice space for it in the body of your page, show its playback controls and maybe create a nice cover (or thumbnail ) for it to make it even more captivating.
Embedding a video with a Youtube / Vimeo frame
The first is to incorporate it (in nerdy jargon, it is sometimes said to embed it ) via frames. This means that the source video will not be hosted on our webspace, but on an external platform such as Youtube or Vimeo, for example.
There is nothing simpler: just follow these simple steps.
- Click on the “Share” button
- Select “embed.”
- Copy the iframe code
- Go to the source code of the landing page and paste.
- Embed youtube frame
- Click on embed
- Copy frame code
- Video frame on WordPress
- Do you have a blog or website built in WordPress? Well, then this task will be extremely easy!
It will be sufficient to copy the final URL of your interesting video, position yourself on the Gutemberg text editor, in the article or page editing screen, and paste.
Your beloved CMS will turn the paragraph pad into a video, and you will be ready to publish!
Embed a video as an HTML5 element
To upload the video directly to your site, instead, you will first have to upload the file between the media (via FTP or file explorer if you have a cPanel or Plesk). Subsequently, you will have to obtain the path of the file itself (or path).
In general, to offer a pleasant browsing experience, it is good too:
- Upload your video in more than one format (e.g., Mp4, Ogg) to avoid compatibility problems;
- Compress the video to optimize resources: is 4K really necessary, or will full HD be enough?
- Leave the player controls visible to give the user control over playback;
- Avoid autoplay unless strictly necessary for marketing purposes;
- Use this method wisely. Videos are hungry for storage, so if you load a lot over time, you may need to buy more hosting space.
- Always evaluate if it is not the case to use Youtube, uploading the video as not listed.
Handbrake: Compress video while sipping drinks
But now let’s try to figure out how to compress a video from our computer, without being a scientist!
For some time, I have chosen to use Handbrake, in my opinion, a really well-made and solid tool, available for both Mac and Windows world and above all, completely free.
This has a pretty simple interface and allows you to drastically reduce the size of your video files in just a few steps and in a short time.
Fundamental when your videomaker passes you a beautiful landscape video of your company or business through Wetransfer, but you immediately realize that the file weighs 150MB?
Well, we just have to look at the steps together to get a decent result with the least effort.