Your hero video is probably 10x heavier than it needs to be (and how to fix it without installing ffmpeg)

Background videos and product clips are often the heaviest thing on a landing page. A 40 MB phone recording uploaded "as is" hurts LCP, burns mobile data and often won't start until most of it has downloaded.

Three things make a video web-ready:

1. The right size. Nobody needs 4K in a 1200 px wide hero. 720p or 1080p is plenty, and 360–480p works for small embeds.
2. A web-friendly codec. H.264 MP4 plays everywhere. WebM (VP9) is usually smaller, so offer both with <source> tags and let the browser pick.
3. Fast start. By default, MP4 files store their index (the moov atom) at the end, so the browser has to download everything before playing. Moving it to the front (-movflags +faststart) lets playback start immediately.

With ffmpeg that is roughly:

ffmpeg -i input.mov -vf "scale='min(1280,iw)':-2" -c:v libx264 -crf 26 -preset slow \
  -movflags +faststart -an output.mp4

Then add a poster image so something shows before the first frame loads:

<video autoplay muted loop playsinline poster="poster.jpg">
  <source src="hero.webm" type="video/webm">
  <source src="hero.mp4" type="video/mp4">
</video>

If you don't want to deal with ffmpeg, or you need to do this for many videos or from an automation: I built a small cloud tool that does exactly these steps. You paste video links and get back a fast-start MP4, an optional WebM and a poster image. It never makes a video bigger than the original. It runs on Apify and is free during launch: https://apify.com/mauberme/video-for-web

It can also be called from an API or from an AI agent through Apify's MCP server, which helps if you process videos inside a pipeline.

What's the heaviest video you've shipped by accident? 🙂