Compress Video for a Website on Mac (MP4, WebM, No Audio)

• Codec: H.264 in MP4. It plays in every current browser. H.265 is smaller, but browser support is patchy, so it is not a safe default for the web.
• Audio: remove it for background, hero and looping clips. Browsers block autoplay with sound anyway, and silent video must be muted to autoplay.
• Resolution: 720p for a clip in a column or card. 1080p for a full-width hero. 4K is rarely worth it.
• Quality: CRF 26 to 30. Background video is often dimmed or blurred behind text, so artifacts hide.
• Length: as short as the effect allows. A clean 6 to 10 second loop beats a long clip.
• Faststart: put the moov metadata at the start so playback begins before the download ends.

The ffmpeg command for all of that, using its default H.264 encoder:

ffmpeg -i in.mov -vf scale=1280:-2 -crf 28 -an -movflags +faststart hero.mp4

Background on what CRF does is in video bitrate explained.

Smaller than you think. Pages with a hero video load it on every visit, often on mobile data, and it competes with your images and text for bandwidth. There is no single magic size. A reasonable aim for a background loop is a file small enough that the page still feels instant on a phone.

We encoded one synthetic 6-second 1080p30 clip without audio with free ffmpeg, medium preset. Synthetic footage is a rough guide, and real footage will differ, but the ratios are useful.

Dropping to 720p did more than any other single change. H.265 saved a little more, but CRF values are not equivalent across codecs, so this is not a quality-matched comparison. For web delivery, the extra compatibility risk is not worth it.

MP4 with H.264 is enough on its own. Every current browser plays it. WebM is an optional second source: it can be smaller at a similar look, and browsers pick whichever source they support first. We did not measure a quality-matched WebM, so we make no size claim.

List WebM first only if you have tested it, and keep MP4 as the fallback:

<video autoplay muted loop playsinline preload="metadata" poster="hero.jpg" width="1280" height="720">
  <source src="hero.webm" type="video/webm">
  <source src="hero.mp4" type="video/mp4">
</video>

The attributes matter. muted and playsinline allow autoplay on phones. poster shows an image while the video loads, and width and height prevent layout shift. For the format conversion itself, see converting MP4 to WebM.

No. An animated GIF is usually far larger than the same clip as MP4 and looks worse. If you have a GIF on a page, convert it to a muted looping video. The how-to is in GIF to MP4, and web.dev has a guide for the swap.

Use preload="metadata" so the browser does not fetch the whole file at once. Give the video a poster image so something shows instantly. Skip the video on small screens if it is decorative, by serving a still image there. Do not put several heavy videos on one page.

Host files from your own server or a CDN. A video inside a page template is part of every visit, so check its weight the way you check images. Our guide on Core Web Vitals and images covers the metrics that a hero video can hurt.

For one hero clip, one ffmpeg command or QuickTime Player’s Export As to 720p is enough, and free. We could not confirm that Smol exposes a faststart option, so for web embedding use the command above if start-up speed matters.

Smol earns its $29 (once, one Mac) when you prepare many clips, such as a folder of product videos, a client’s whole asset set or recordings from a team. You choose MP4 or WebM, H.264, a CRF from 0 to 63, a smaller resolution, and remove the audio, then drop in the folder. Nothing is uploaded. See the best video compressor for Mac, or buy Smol.