Manatee

How to compress a video for a website so it loads quickly

· 7 min read

To compress a video for a website, make it an MP4 with H.264 video, no larger in pixels than the space it will fill on the page, with no sound if it plays muted, and with its index at the front of the file so it starts playing before it has fully downloaded. On a Mac, QuickTime Player and the built-in avconvert command cover all of that for free. When you have a strict size budget, a tool that fits the video to a number in megabytes saves the trial and error.

What a web video actually needs

Five things decide whether a video on a page feels instant or sluggish.

  • Format. An MP4 with H.264 video plays in every current browser. HEVC, the format recent iPhones record in, does not play everywhere, so a clip straight off a phone may show as a blank box for some visitors.
  • Pixel size. A video in a column 800 pixels wide gains nothing from being 4K. Aim for the display width, doubled at most for sharp screens: 1280 or 1920 pixels wide covers most layouts, including full-width banners.
  • Length. Every second costs bytes. A background loop rarely needs more than 10 to 20 seconds, and a product demo is often better as several short clips than one long one.
  • Sound. Browsers only start a video automatically when it is muted. If yours plays silently in the background, the audio track is dead weight, and removing it saves real space.
  • Fast start. An MP4 has an index (called the moov atom) that says where every frame is. If it sits at the end of the file, the browser has to fetch the whole video before playing anything. At the front, playback starts almost immediately. An MP4 with no thumbnail in Finder explains the same index from another angle.

As a rule of thumb, a short background loop is worth keeping to a few megabytes, and a longer embedded clip to what a visitor on a phone connection will wait for.

Step 1: trim and silence it in QuickTime Player

Do the cutting first, so everything after it works on less footage.

  1. Open the video in QuickTime Player.
  2. Choose Edit, Trim, and drag the yellow handles to keep only what you need. Click Trim.
  3. If the video will play muted, choose Edit, Remove Audio.
  4. Choose File, Export As, and pick the size closest to your target (1080p or 720p). If QuickTime offers a choice between greater compatibility and smaller file size, choose greater compatibility, which is H.264.

QuickTime saves a .mov file. The next step turns it into a proper web MP4.

Step 2: make the MP4 with avconvert

macOS includes a command called avconvert that uses the same video engine as QuickTime. It writes MP4 files, resizes them, and puts the index at the front by default.

If the QuickTime export is already the size you want, rewrap it without re-encoding. Open Terminal and run:

avconvert --source ~/Desktop/hero.mov --preset PresetPassthrough --output ~/Desktop/hero-web.mp4

The picture is copied untouched into a new MP4 with the index moved to the front. There is no quality loss and it takes seconds.

If the video needs no trimming or silencing, you can skip QuickTime entirely and resize it in one command by naming a size preset:

avconvert --source ~/Desktop/hero.mov --preset Preset1280x720 --output ~/Desktop/hero-web.mp4 --progress

Preset1920x1080 and Preset640x480 work the same way. The presets set a maximum; a smaller video is not scaled up. You can also trim here with --start and --duration, both in seconds. Run avconvert --help to see every preset.

One pleasant default: avconvert filters out privacy-sensitive metadata such as the recording location unless you tell it not to. For the full picture on what a video can carry, see how to remove metadata from a video before posting it.

Step 3: when you have a size limit to hit

Presets choose the size in pixels, not in megabytes. If your site builder, theme or hosting plan caps uploads, or you have a page-weight budget, you end up exporting again and again until one fits.

Manatee takes the number instead. Open it, choose Shrink, drop in the video, and type the size in MB. It finds the quality that fits and writes a new file next to the original, which is never modified. If the source is a WebM, an MKV or an older AVI rather than an MP4 or MOV, use Manatee’s Convert mode to make an MP4 first, and check its size before shrinking, since that copy may already be small enough. Everything happens on your Mac; nothing is uploaded. Manatee is free for 24 hours with every feature, then $9 once.

To make sure the result starts quickly, pass the final file through the avconvert passthrough command above. It moves the index to the front without touching the picture.

Set the target sensibly. A size that is too small for the length and resolution looks blocky however it is made; bitrate, resolution and frame rate explains what to cut first. And compress from the best original you have, since compressing a video twice makes it look worse than doing it once.

Step 4: embed it so the page stays fast

How the video is placed on the page matters as much as the file. A typical background or hero video looks like this:

<video src="hero-web.mp4" poster="hero-poster.jpg"
       autoplay muted loop playsinline preload="metadata"></video>
  • muted is what allows autoplay to work at all.
  • playsinline stops phones from opening the video full screen.
  • preload="metadata" fetches only the start of the file until the video is needed.
  • poster shows a still image while the video loads, and in place of it if the video cannot play.

For the poster, pause on a good frame in QuickTime Player and take a screenshot of it with Shift-Command-4. Screenshots save as PNG, which is large for a photo-like image, so convert it to JPEG or WebP before uploading; how to convert an image to a web-friendly format covers the options.

For a video below the fold, leave out autoplay and add controls, so nothing downloads until a visitor chooses to play it.

Questions

Should I use HEVC to make the file smaller? Not as the only version. HEVC is more efficient, but it does not play in every browser, and visitors who cannot play it see nothing. H.264 MP4 is the safe single file.

Does the frame rate matter? Keep the source frame rate for anything with motion. For a slow, atmospheric background loop, a lower frame rate can save space, but it has to be set in a video editor; none of the tools above change it.

Why does my video still take a while to start? Run the passthrough command on the file before you upload it, so the index is at the front, and check its size in Finder. Some hosting platforms also re-process uploads, so test the live page, not just the file.