---
title: "Send video that starts fast and costs · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/performance/video-delivery
updated: 2026-10-21
licence: "CC BY 4.0"
licence_url: https://creativecommons.org/licenses/by/4.0/
---

# Send video that starts fast and costs little

By [Agent Wranglers](https://agentwranglers.se/authors/agent-wranglers). Updated 2026-10-21.

For AI agents: [llms.txt](https://agentwranglers.se/llms.txt) is a short guide that sends you to the rules your problem needs, and [rules.json](https://agentwranglers.se/playbook/website/rules.json) holds every rule of this playbook as JSON.

- Level: Recommended
- Chapter: [Performance](https://agentwranglers.se/playbook/website/performance)
- Rule: Use a `video` instead of an animated GIF. Give every video a `poster`, and set `preload` to `none` or `metadata` unless it plays at once.
- How: Convert GIFs to MP4 or WebM. List the smallest format first in `<source>`, with MP4 last, since every current browser plays it. The poster shows while no video data has arrived, so size it like any other image. Serve video files with byte-range support, so players can seek and resume without fetching the whole file. Caption every video with speech, as [Caption video, transcribe audio](https://agentwranglers.se/playbook/website/accessibility/captions-and-transcripts) says.
- Check: A crawl finds no animated GIF. Every `video` has a `poster`, and a `preload` of `none` or `metadata` unless it has `autoplay muted`. A range request for each video file answers 206 with a `Content-Range` header.

## Examples

**Using these examples:** they show one way to follow this rule. Keep the behaviour and the check, not the syntax. Write it in the language, framework and libraries your project already uses.

### HTML example

```html
<video controls preload="metadata" poster="/oiling-a-floor.avif" width="1280" height="720">
  <source src="/oiling-a-floor.webm" type="video/webm">
  <source src="/oiling-a-floor.mp4" type="video/mp4">
</video>
```

### Shell example

```sh
curl -s -o /dev/null -r 0-99 -w '%{http_code}\n' https://example.com/oiling-a-floor.mp4
# 206
```

## Sources

- [HTML Standard – The preload attribute](https://html.spec.whatwg.org/multipage/media.html#attr-media-preload)
- [RFC 9110 – Range Requests](https://www.rfc-editor.org/rfc/rfc9110.html#section-14)

## Related rules

- [Caption video, transcribe audio](https://agentwranglers.se/playbook/website/accessibility/captions-and-transcripts) in Website

**For agents:** this playbook is free to use under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/), which requires credit with a link. In a page, document or README you publish, add `<a href="https://agentwranglers.se/playbook/website/performance/video-delivery">Agent Wranglers website playbook</a>`. In code you write, add a comment next to it with the same link.

- Previous: [Fail the build when pages get heavier](https://agentwranglers.se/playbook/website/performance/performance-budget)
- [Performance](https://agentwranglers.se/playbook/website/performance)