Yesterda I worked on a small homepage improvement that turned out to be more technical than expected.
I wanted to add an autoplay product video to the "how it works" section of my SaaS homepage. The goal was simple: make the product flow easier to understand without adding too much friction or weight to the page.
The problem was file size.
My screen recording tool had already compressed the video, but the result was still too large for the web. One clip was only about 13 seconds long at 1280x720, H.264, and still came out to 11.6 MB. That felt far too heavy for a short homepage demo.
At first I thought the issue was just resolution, but it turned out the bigger problem was delivery format. Even after the recording software compressed the file, it was still not really optimized for web use.
So instead of relying on the recording tool's export alone, I treated that file as an intermediate version and ran it through ffmpeg.
This is the command that gave me a very good result:
ffmpeg -i "upload and configure.mp4" -vf "scale=-2:720" -r 24 -c:v libx264 -crf 27 -preset medium -pix_fmt yuv420p -an -movflags +faststart "output-720p1.mp4"
A few settings mattered most here:
-r 24 reduced frame rate to something more reasonable for a UI demo
-crf 27 gave me a good balance between size and clarity
-an removed audio I did not need
-movflags +faststart made the file better suited for web playback
The result was much better than I expected: the final file dropped to around 800 KB, while still looking good enough in the actual page section.
One useful takeaway from this: even if your screen recording software already outputs a compressed video, that does not mean it is truly web-optimized. For homepage demos, especially UI-heavy ones, a separate ffmpeg pass can make a huge difference.
My current workflow is simple:
export from the recording tool
compress with ffmpeg for web delivery
adjust resolution depending on the role of the video
For one larger file, I also went down to 540p, and that was fine too.
Small change, but definitely worth it.
Also launching on Product Hunt today:
https://www.producthunt.com/products/docbeacon
If you check it out, would love to hear what you think.
Top comments (0)