Optimising video for instant playback on a homepage
From 7.3 gigabytes of footage to one-megabyte clips.
- Answers
- How do you serve high resolution video on a homepage without slowing it down?
- Topics
- AI · daddy · design · iPhone · people · web · work
- Full article on willem.com
- https://willem.com/en/2026-01-10_hello-video/
Summary
Cut long footage into clips of a few seconds, crop to the shape you actually show, drop the audio track, and pre-encode aggressively. My homepage clips went from 7.3 gigabytes of footage to about one megabyte each.
Full text
I recorded over 12 minutes of footage with my iPhone against a grey wall, which produced a 7.3 gigabyte file. Serving that instantly on a high traffic homepage is a real encoding and performance engineering challenge. My approach: cut the footage into short fragments of just a few seconds each. Crop to a square, because pixels outside my round target frame would never be seen. Drop the audio entirely; with an international audience I did not want spoken language in there anyway. Every clip starts and ends with a solid grey tint, so a crossfader can shuffle the clips in any order without visible seams. Aggressive pre-processing with serious compute power brings files down to about one megabyte, some even smaller. Playback runs in my own player with shuffle and scheduling support, integrated directly in the homepage HTML so no external sources load.