How to Reduce Video File Sizes for Websites Without Losing Quality

If a video on your website is larger than 3MB, it is slowing down your pages, frustrating mobile visitors, and hurting your search rankings.

Screen captures and motion graphics look great in high resolution, but default recordings are made for local viewing, not fast internet delivery. A brief 10-second screen recording can easily take up 40MB or more.

With a few straightforward adjustments, you can reduce that exact video to under 2MB while keeping text and interface elements sharp.

Here is how to do it step by step.

Four Simple Rules for Web Videos

Before changing any export settings, follow these core guidelines:

1. Remove unused audio: Muted background loops and silent feature previews do not need sound data. Muting or stripping audio immediately removes 10% to 20% of the overall file size.
2. Set your frame rate to 30 FPS: While 60 frames per second works well for video games, interface clicks and software demos look smooth at 30 frames per second, which cuts down the data visitors have to download.
3. Match video dimensions to your layout: Avoid placing a 4K resolution file inside an 800-pixel card. Scaling down to 1080p or 720p looks clear on sharp screens and saves considerable space.
4. Keep total size under 2MB: Files under 2MB start playing right away, even on average mobile network speeds.

Choosing Between MP4 and WebM

You do not need to manage complicated video settings. Two standard formats cover nearly all modern web browsers:

• MP4 (H.264): Plays everywhere across all operating systems and older browsers. Use this as your standard fallback.
• WebM (VP9 or AV1): Provides smaller files at similar visual quality. Supported by all modern versions of Chrome, Safari, Edge, and Firefox.

You can verify current browser compatibility on Can I Use.

Serving Both Formats in HTML

You can let the visitor's browser choose the lightest format it supports by listing both source files inside your video element:

Modern browsers download the smaller WebM version first, while older systems automatically fall back to the MP4 file.

Three Practical Ways to Compress Videos

1. Dedicated Desktop Software

If you prefer not to use command lines or upload proprietary work to online servers, desktop tools handle compression directly on your computer:

• Compresy: A native Mac application designed specifically for designers and web creators. You drag in a large video, select your preferred balance of speed and clarity, and receive an optimized web file in moments without leaving your desktop.
• HandBrake: A well-known free tool that offers extensive settings for transcoding, though its many menus can take time to configure.

2. The Terminal with FFmpeg

If you like working in the terminal or want to automate asset builds, FFmpeg offers a dependable command-line solution:

ffmpeg -i input.mov -vcodec libx264 -crf 26 -r 30 -an output.mp4

This single command sets universal H.264 encoding, applies standard web compression, limits output to 30 frames per second, and removes the audio track.

3. Online Converters

Browser-based tools such as CloudConvert work well for occasional tasks away from your main computer. Keep in mind that upload caps, processing queues, and privacy policies apply when sharing unreleased product designs.

Why Small Video Files Improve Search Rankings

Search engines like Google rank websites partly based on loading metrics called Core Web Vitals. Videos directly influence two of these metrics:

Largest Contentful Paint (LCP)

LCP tracks how quickly the largest main visual section on your screen appears. When a large video file sits in the top section of your page, the browser delays rendering until enough data arrives.

How to fix it: Always attach a small WebP image as the poster attribute. The browser displays the still picture in a fraction of a second, meeting speed targets while the actual video loads quietly in the background.

Cumulative Layout Shift (CLS)

When a video element lacks assigned proportions, the page layout can jump around as the player determines its dimensions.

How to fix it: Always define width, height, or aspect ratios in your CSS classes so the browser reserves space before playback starts.

Final Launch Checklist

Before publishing your page, confirm these items:

• Has the audio track been removed from background loops?
• Is the final file size close to or below 2MB?
• Does your HTML include muted, autoplay, and loop?
• Is playsinline present so mobile devices play inline instead of expanding full screen?
• Have you tested your live page using Google PageSpeed Insights?

Taking these simple steps lets you showcase high-quality motion graphics and user interfaces without sacrificing loading speed or user engagement.