I want to use a full width background video for the hero section of my website (10 sec long). To ensure the site remains fast, I have compressed the video and saved it in the WEBM format. The file is only 500 KB large.
After launching the site, I noticed that it is extremely slow.
I know that Webflow transcodes the videos and automatically creates two versions of them. Upon closer inspection using Chrome developer tools, I saw that the video is now over 3 MB in size, both the MP4 and WEBM versions!
Why is this happening? Can I prevent it somehow? Unfortunately, the site is totally unusable in this state.
If you’re interested in the mechanics of encoding, and what causes inflation, GPT is a good place to get a rundown of some key points. But off the top of my head, I’d assume a bitrate, resolution or frame rate change.
It’s possible Webflow “measures” the background video area in a similar way to how it measures for responsive images, and that might inform the encoder- however otherwise there isn’t any way to disable the encoding step that I’m aware of.
If you want to do it this way, I’d download the encoded vid and see if you can identify what is different. If there’s a different frame rate for example, then re-prepare and re-upload yours to match. The encoder might be “aware” and bypass execution if your video meets those criteria.
Personally, I find off-hosting much easier particularly on sites where bandwidth is a concern. Vidzflow, cloudflare R2, bunny .net, etc. You can host much longer and higher resolution videos as well if you like that way.
The issue likely arises because Webflow automatically re-encodes and compresses videos to ensure compatibility across devices, leading to larger file sizes than your original upload. Unfortunately, Webflow doesn’t offer full control over this transcoding process. To prevent this, you can try hosting the video externally (e.g., on a CDN) and embedding it into your Webflow project, which would allow you to retain the smaller file size. Alternatively, you could try further optimizing the video and checking Webflow’s settings for video compression options.