Your hero video is why the page feels slow

The hero video is why the page feels slow

A 40 MB autoplaying video at the top of a landing page is a common and expensive mistake. On a 3G connection in a place where data costs money, it is not slow — it is a decision to lose that visitor.

Most people trying to shrink a video only touch resolution. Resolution is the least useful of the three dials.

The three dials

Resolution — the pixel dimensions. Dropping 1080p to 720p helps, and on a phone-sized display nobody sees it.

Bitrate — how many bits per second the encoder is allowed to spend. This is the real size lever. Fifteen seconds of 1080p H.264 at 8 Mbps is about 15 MB. The same clip at 3 Mbps is under 6 MB and, watched on a phone, is frequently indistinguishable.

Codec — the compression scheme itself.

Why some clips compress and others do not

Video compression stores one complete frame and then, for the frames that follow, only what changed. This is the whole trick, and it explains almost everything about file sizes.

A talking head against a plain wall changes very little between frames, so there is almost nothing to store, and it compresses to nearly nothing. Rain, confetti, water, foliage in wind, fast pans and film grain change every pixel every frame. There are no cheap differences left, and the encoder has to spend real bits. Two clips at identical settings can differ by six times in size, and neither one is broken.

Two practical consequences. Adding grain or noise for a filmic look multiplies your file size. And a slow gradient — a clear sky, a soft background — will band into visible steps at low bitrates, because gradients are exactly what a quantiser throws away first.

The complete frames are called keyframes, and the interval between them is worth setting to about two seconds for anything streamed, so a viewer who scrubs does not wait. Shorter intervals mean bigger files.

Getting the file smaller

Which codec

• H.264 plays on everything, including old phones and old browsers. Default choice.
• H.265 / HEVC is roughly 30–50 per cent smaller for the same quality, but it is patent-encumbered and browser support is inconsistent.
• VP9 is well supported in browsers, royalty-free, and slow to encode.
• AV1 is the smallest and the slowest to encode; decoding is now widespread but not universal on older Android devices.

For a website, serve H.264 and, if you can be bothered to provide two sources, VP9 or AV1 as the first option with H.264 as the fallback.

A command that does the job

HandBrake is free, has a graphical interface, and will get you most of the way with the "Web Optimized" presets. ffmpeg is free and does everything. Resolve's free Deliver page has sensible YouTube and web presets.

ffmpeg -i in.mov -vf scale=1280:-2 -c:v libx264 -crf 24 -preset slow \
  -pix_fmt yuv420p -movflags +faststart -an out.mp4

• -crf 24 sets quality rather than a fixed bitrate; lower is better and bigger, and a change of about 6 roughly halves or doubles the size. Try 20 for something detailed, 28 for a plain talking head.
• -preset slow spends more time encoding to get a smaller file. It costs you minutes and saves megabytes.
• -pix_fmt yuv420p is required for playback on a lot of hardware. Files that play on your Mac and fail everywhere else are usually missing it.
• -movflags +faststart moves the file's index to the beginning so the video starts playing before it has finished downloading. On a slow connection this is the difference between a video that starts and one that appears broken.
• -an drops the audio track. If the video is silent, that is free bytes.
• scale=1280:-2 sets the width and lets the height follow, rounded to an even number, which the encoder requires.

Stop using GIF

A GIF has a 256-colour palette and no modern inter-frame compression. A three-second GIF that comes to 5 MB is the same three seconds an MP4 delivers in 200 KB, with better colour and no dithering.

Replace it with a muted, looping video:

<video autoplay muted loop playsinline poster="first-frame.jpg"></video>

playsinline is the attribute people forget. Without it, iOS takes the video fullscreen instead of playing it in place.

For transparency on the web, you need WebM with VP9 alpha for Chrome and Firefox and HEVC with alpha for Safari, served as two sources — or, if the content is vector rather than photographic, a Lottie file instead, which is usually the better answer.

Everything above is about delivery. The cutting, pacing and grading that come before it are video editing's subject, not this one's.

Two habits

Set preload="none" and a poster image on anything below the fold, so a visitor on mobile data does not download a video they never scroll to.

And judge quality on a phone at arm's length, in daylight, not on your monitor zoomed to 200 per cent. Almost every video on the internet is over-encoded for a viewing condition nobody experiences.