video on websites & how not to screw it up part 2: preparation & export
April 15, 2020
written by
Rex Vokey
This is the second in our three-part series for intermediate content creators and web developers. Yesterday we covered general video user experience tips. Today we’re going to take a step backward, creating the video. Before your video even makes it to the web, you need to properly prepare it. Here are a few tips to get your video ready for the web:
pay attention to the input.
Frame rate: when converting try not to change the frame rate, unless you have a good reason. Make sure the output frame rate is the same as the input, if at all possible. Otherwise you’ll end up with pulldown artifacts.
resolve your resolution.
If possible, go with 720p (ish) resolution. If you don’t need the background to be full HD, making the overall resolution smaller will dramatically reduce the file size.
get to know your encoding profiles.
Encoding profiles: this is a complicated subject, but our rule of thumb is to use Baseline for web-based videos. Main or High can also be used, but are probably not as good for web use.
Profile levels: lots of choices here! But generally, we use 3.0+ for 720p, and 4.0+ for 1080p videos.
you have free and paid options for video export.
Tools for video export: Handbrake is a great tool and can do all kinds of transcoding. If you have Adobe Premiere, it’s also quite a capable tool, although overkill if you’re just encoding video.
keep it short and sweet.
Try to limit the video to 5-10 seconds long, and the video file size to 6MB or less. Once it’s on the web, you can loop it to make it seem longer. Creative editing may even make the transition hard to notice.
shhhhh!
Remove audio tracks from the file itself. This also makes the file just a little bit smaller, which is our end goal.
there’s more!
this series is concluded in part 3.