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.

• ID: performance-core.image-media-optimization.video-poster

• Severity: low

• What to look for: Count all relevant instances and enumerate each. Check <video> elements for poster attribute. If present, verify the poster image is optimized (size, format) and lazy-loaded. Check whether poster images are large or small, and if they're served in next-gen formats.

• Pass criteria: All <video> elements have a poster attribute. Poster images are optimized (under 100KB) and lazy-loaded. Poster is served in WebP or AVIF with JPEG fallback.

• Fail criteria: No poster attribute on videos, causing a blank video player until user interaction. Poster images are large (over 500KB) and block rendering. Not lazy-loaded.

• Skip (N/A) when: The project has no <video> elements.

• Detail on fail: Specify the poster image issues. Example: "Video elements have no poster; blank player until user clicks. If poster were added, it should be 2400x1350px optimized to 50KB WebP" or "poster image 1.2MB loaded eagerly without lazy loading".

• Remediation: Poster images provide visual preview and reduce perceived load time:

  <video controls poster="/video-poster.jpg" width="800" height="600">
    <source src="video.mp4" type="video/mp4">
  </video>
  

  Optimize the poster:

  // Use next/image for poster
  <video controls width="800" height="600">
    <source src="video.mp4" type="video/mp4">
  </video>
  <Image
    src="/poster.jpg"
    alt="Video preview"
    width={800}
    height={600}
    loading="lazy"
  />
  

• Cross-reference: For related patterns and deeper analysis, see the corresponding checks in other AuditBuffet audits covering this domain.