Compress HTML video

Hi Jonathan!

When it comes to MP4 video, yes, you can compress it further, but you'll need to make tradeoffs in terms of image quality (i.e. you'll see more jaggy pixel artifacts).

Part of the issue is that all video codecs do their magic by comparing frames to see where things change the least. With your video loop, the entire background is changing at all times, so there's very little that can be compressed in that sense, so actually it's quite good that you got it down to 10MB at all. I don't think you can likely get it any smaller without going to a physically smaller pixel dimension and scaling up.

Another trade-off would maybe be in colour information; if you reduced the colour palette of the video to greyscale or a more limited palette, you can likely crunch it further, vs. 24-bit full colour.

The other trade-off is frame rate. Of course we want things to be smooth, but more frames = more data. Try experimenting with lowering the video file's frame rate on export and see what looks acceptable to you. If the native rate is 30fps or higher, try lowering it to 24fps.

We came across many of the same issues when we built http://hagopianink.com, which uses stock video loops for top-of-page backgrounds. What we did is:

• Used Final Cut Pro to shorten the stock loops; then we used a crossfade with a "bookmatch" edit in the middle of it to make it seamless; the video starts halfway through the crossfade, and ends at the other half of the fade.
• The shorter the loop, the smaller the resulting file size. Obviously, it can't be too short.
• Exported a video still from the beginning of the loop.
• Used the Compressor tools in Final Cut Pro to crunch the MP4 down
• Used Miro Video Converter to export to WebM format.

You can set the video still as the background for the video container while it loads. Then, it will appear to just start moving without any missing content below.

WebM format has some advantages in file size vs. MP4, and you'll need that for Firefox in any case. You can set that as the first source tag in the <video> element; anything that can't read WebM will default to MP4 in the second source tag.

The tricky thing is that mobile phones have autoplay disabled by default as a way to save bandwidth for users (it can be costly).

If your target userbase includes smartphone users, you have two options:

• First, my recommended option is just drop motion graphics for smartphones - you'll be saving everyone bandwidth and providing a faster experience. Just use a media query, avoid loading the video at all, and use the video still instead.
• Secondly, and this is trickier, is that you can replace the video with an animated GIF. You might need a bit of JavaScript to handle the substitution, again, working with a media query. GIFs are insanely heavy files compared to video, though. We ended up shortening the loops by half and using pretty heavy compression to get them to a reasonable size.

Final thoughts:

• Use a fast CDN to serve the video. Even a speedy host, like WPEngine, can help.
• Most good webhosts use gzip to further compress files for users. Make sure gzip is enabled on your server!