Agent Wranglers

Recommended

Send video that starts fast and costs little

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.

By Agent Wranglers. Updated .

How to do it

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 says.

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

<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

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

How to 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.

Sources

For agents: this playbook is free to use under CC 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.