From source file to delivery
Choose the role of the video
Use a short edited clip for a background, or preserve readable detail for a product demonstration. Trim in your editor first if you do not need the full recording.
Compress for the display size
Try the selected 720p output for a compact embed. Raise it when the design needs more detail, or use Target size when you have a measured transfer budget.
Publish and test the actual page
Replace the asset in your site, set a suitable poster and loading behavior, then inspect playback and network transfer on a mobile connection.
Different embeds need different delivery decisions
| Placement | Loading approach | Quality check |
|---|---|---|
| Click-to-play product demo | Poster with preload="none" where appropriate | Readable UI after the viewer starts playback |
| Muted background loop | Expect autoplay to cause a download | Motion and contrast behind overlaid text |
| Video below the first screen | Defer unnecessary loading | No layout jump when the video appears |
Choose a transfer budget, not a mythical website limit
There is no single MB limit shared by WordPress, Shopify and custom websites. Your hosting plan may impose an upload limit, but the visitor’s network and the page’s other assets determine whether the experience feels fast. These are separate constraints.
For a playback estimate, one megabit per second over ten seconds is about 1.25 MB before audio and container overhead. That arithmetic is a budget illustration, not a quality recommendation. Test your own clip at the size it will actually occupy on the page.
A smaller file can still download at the wrong time
MDN documents preload as a browser hint. A poster with preload="none" can avoid fetching an entire video before someone asks to play it, while autoplay can override that intention. Do not assume that a compressed background video is free to load.
Set stable video dimensions or an aspect ratio in the site layout, provide playback controls where appropriate and test the mobile experience. VidSmaller produces the file; it does not change your CMS embed, implement captions or configure your CDN.
Questions before you compress
What is the best video file size for a website?
There is no universal number. Choose a transfer budget based on placement, duration, detail and network conditions, then test the page together with its other assets.
Should every website video be 720p?
No. The preset is a starting point for compact embeds. A demonstration with small UI text may need a higher resolution, while a decorative loop may need less detail.
Will compressing the file stop autoplay from using bandwidth?
No. It reduces the asset size, but your embed determines whether the browser starts downloading automatically. Review autoplay and preload separately.
References and next steps
Guide updated 2026-11-11. External applications and account rules can change.
Have a strict size budget? Use the bitrate calculator. For source files near the upload ceiling, check the large video limits. Read the privacy policy before sending sensitive material.