Video poster images provided and optimized

A <video> element without a poster attribute renders a blank or black rectangle until the user interacts with it (ISO-25010 time-behaviour). On autoplay-restricted mobile browsers, a video without a poster remains visually empty indefinitely. This degrades perceived page quality, makes above-fold video sections look broken on slow connections, and signals to users that the page has not fully loaded. A properly optimized poster image adds negligible bytes while providing immediate visual feedback.

Add a poster attribute to every <video> element, pointing to an optimized WebP image:

<video
  controls
  poster="/videos/demo-poster.webp"
  width="800"
  height="450"
  preload="none"
>
  <source src="/videos/demo.mp4" type="video/mp4">
</video>

Keep poster images under 100 KB — use WebP at 70–80% quality. Generate them from the video's first frame:

ffmpeg -i demo.mp4 -vframes 1 -q:v 2 demo-poster.jpg
cwebp -q 75 demo-poster.jpg -o demo-poster.webp

Set preload="none" on below-fold videos so the video file itself is not downloaded until user interaction. The poster file is the only asset needed for initial render.