Is the reduced video quality when uploading a background video to Webflow due to the video's export settings or something else on Webflow?
TL;DR
- Webflow compresses all background videos to 720p with a 30MB limit, reducing quality regardless of original settings.
- To optimize, export at 1280×720, 3–5 Mbps bitrate, 24–30 fps, and keep videos under 15 seconds; for higher quality, use externally hosted embeds with custom code.
Webflow background videos are compressed automatically, which results in reduced video quality regardless of your original export settings. Here's what causes that and what you can control.
1. Webflow's Automatic Compression
- Webflow compresses all background videos during upload to optimize page performance, especially for mobile users.
- The uploaded video is converted into a .webm and .mp4 version with a maximum resolution of 720p and a maximum file size of 30MB.
- Compression significantly reduces bitrate and sometimes frame rate, leading to visible quality loss even if you upload a high-quality file.
2. Upload Limits and Requirements
- The maximum file size allowed for background videos is 30MB, and Webflow enforces this strictly.
- Aspect ratio, resolution, and bitrate from your exported file may affect how the compression algorithm handles the video, but Webflow will still reprocess it on upload.
3. How to Improve Results
- Export your video at 1280×720 (720p) to match Webflow’s processing resolution; higher resolutions get downscaled anyway.
- Use optimized export settings before uploading:
- Format: H.264 (MP4)
- Bitrate: Around 3-5 Mbps for balanced quality and file size
- Frame rate: 24–30 fps unless higher is needed for motion clarity
- Keep the video short (under 10–15 seconds) to avoid heavy compression.
4. Workarounds for Higher Quality
- If quality is critical, consider using a video hosting platform like Vimeo or YouTube and embedding the video.
- For more control, use custom code or a video embed instead of Webflow’s background video component, though this removes autoplay/muted loops unless manually handled.
Summary
Webflow reduces background video quality via automatic compression during upload, overriding most of your export settings. You can optimize results by matching Webflow’s target specs, but if resolution or clarity is essential, embedding externally hosted videos offers better quality control.