BG video 2.3 mb before upload, transcoded version 11 mb?

I just uploaded a bg video that’s been compressed for web use (around 2 mb), however when I run PageSpeed Insights I can see that the transcoded version is over 11 mb?

Why is this happening?

Can I see your original file? The 11mo file quality is bad, very bad. Even played at original resolution, the compression butchered it.

Src file uploaded here: https://we.tl/t-6R7zjEpDC8

Gotcha. Your original video is already very badly compressed, with the same level of compression artifacts.

To begin with and for the proof of concept to be more accurate, you should start by finding a better source video. When you find it, try to not recopress it too much and let Webflow do the job.

When the bg video feature came out, I was stressed that it couldn’t provide the same quality as the videos I was manually optimizing with pro tools. So I performed tests on many videos and the results was that Webflow was doing a slightly less good job in term of image quality and file size. But the results were good, far beyond acceptable, and the difference with my own files was little. So I am using the Webflow feature for bg video and spare myself the work of hosting my own files and using custom code.

So,

Both the vids are 1280 × 720.
Yours has a bandwidth of 1.5Mbs (that’s very low)

Webflow seems to have a target of 6+Mbs (it’s less than Youtube but more than Netflix)

So Webflow is just nicely recompressing the artifacts of your original video. That’s not a good ground for an optimal result.

You can get free decently compressed videos on https://www.pexels.com/ to perform tests, and you can purchase a video that looks like yours on any site like shutterstock, for cheap.

1 Like

Vincent, thanks for taking your time here.

My question is more relating to the file size after upload rather then the quality (which I’m aware is low). After uploading to Webflow the file increased almost 6x? This is my worry not the quality of the video. I could just as well have uploaded the original file which was 12 mb…

Yes, try that to begin with. Your 2.4Mo video is way too compressed to make a relevant comparison.

I found the exact same video via Pexels now but I downloaded the 1280 version from the page (instead of compressing it myself):
https://www.pexels.com/video/underwater-bubbles-857131/

The original file size is 4 mb, but after uploading to Webflow the transcoded version is 9.5mb.
It seems like there’s not a way to get a reasonable file size after uploading a bg video on Webflow? This is way to heavy for mobile use… I guess the transcoding settings are set to high on Webflow’s end?

9 to 11 Mo for a 1280p 15s video is reasonable.
2.4 Mo for it is not reasonable.