# Video poster images provided and optimized

- **Pattern:** `ab-002010` (`performance-core.image-media-optimization.video-poster`)
- **Severity:** low
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-002010
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-002010)

## Why it matters

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.

## Severity rationale

Low because missing poster images degrade perceived page completeness and visual polish but do not break core functionality or expose security risks.

## Remediation

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

```html
<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:
```bash
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.

## Detection

- **ID:** `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:

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

  Optimize the poster:
  ```tsx
  // 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.

---

## External references

- iso-25010 performance-efficiency.time-behaviour

Taxons: performance

HTML version: https://auditbuffet.com/patterns/ab-002010