Proof media pipeline, captions, thumbnails, and speed that hold up

TLDR

Use WebP for images and MP4 for clips. Cap thumbnails at 200 kB, clips at 720p under 40 MB. Generate VTT captions, burn key lines if needed. Lazy load below the fold, defer heavy players, and preconnect CDNs. Track play rate, complete rate, and page load. Refresh media monthly.

Why this matters

Slow proof kills lift. Clean media rules make pages feel instant, keep videos watchable on mobile, and prevent SEO and conversion drops.

Media standards, set once

• Images: WebP first, PNG only for transparency. Max width 1200 px, thumbnail 512 px. Target under 200 kB.
• Video: MP4, H.264, 720p, 24 or 30 fps, bitrate 1.5 to 3.0 Mb/s. Keep most clips 30 to 60 s, under 40 MB.
• Captions: WebVTT file per clip, language code in filename, for example clip-38leads.en.vtt.
• Alt text: Outcome focused, max 120 characters, for example “38 qualified leads in 30 days, GA4 and CRM.”
• File names: Slug with date, for example snippet-17-demos-2025-06-12.webp, clip-38-leads-2025-06-12.mp4.

Delivery, fast and predictable

• Serve from a CDN. Enable HTTP/2 or HTTP/3.
• Add preconnect to the CDN domain in the head tag.
• Use <img loading="lazy"> for below-the-fold images.
• Defer video players below the fold. Replace with a clickable thumbnail.
• Use responsive images, srcset with 512, 768, 1200 px.

Player pattern that doesn’t drag

• Start with a static thumbnail and a play button.
• On click, swap to the embedded player or a lightweight HTML5 <video> with controls and muted default off.
• Autoplay is off. Captions are on.
• Keep the first frame legible, claim and source visible in the label.

Caption workflow, 10 minutes per clip

1. Auto-generate a transcript.
2. Hand edit for names and numbers.
3. Export VTT and attach to the player, track kind="captions" srclang="en".
4. Burn critical terms only if users miss them in tests, keep captions primarily as VTT.

Thumbnails that get taps

• Square or 16:9, simple contrast, big number, short noun, no clutter.
• Under 200 kB, WebP.
• Show the source in the label near the number, for example “GA4, 30 days.”

Page-speed checklist, 5 minutes

• First contentful paint under 2.0 s on 4G.
• Total page weight under 2.0 MB for LPs.
• Hero proof visible without scroll on mobile.
• No unused players loaded off-screen.
• CLS stable, reserve height for thumbnails and embeds.

Tracking that ties to speed

• ugc_play and ugc_complete with module_id, page_slug.
• proof_view fired at 50 percent visibility, not on load.
• Add load_time_ms per page and player_init_ms for the first play.
• Weekly table: plays, completes, load time, CTR, paid delta.

Maintenance rhythm

• Re-encode any clip over 40 MB or missing captions.
• Replace thumbnails older than 180 days or with CTR below page median.
• Purge CDN after swaps, then recheck mobile.
• Log changes in the audit table with file names and dates.

Security and privacy

• Redact PII on screenshots before export.
• Host redacted files only. Keep originals in restricted storage.
• Honor removal within 72 hours, delete the file and purge caches.

Examples you can paste

Lightweight video embed (HTML5)

<figure class="proof-clip">
  <video width="640" height="360" poster="/img/clip-38-leads-2025-06-12.webp" controls preload="none">
    <source src="/video/clip-38-leads-2025-06-12.mp4" type="video/mp4">
    <track kind="captions" srclang="en" src="/captions/clip-38-leads-2025-06-12.en.vtt" default>
  </video>
  <figcaption>Home services, first 30 days, 38 leads. Source, GA4 and CRM.</figcaption>
</figure>

Responsive proof image

<img
  src="/img/snippet-17-demos-2025-06-12-768.webp"
  srcset="/img/snippet-17-demos-2025-06-12-512.webp 512w,
          /img/snippet-17-demos-2025-06-12-768.webp 768w,
          /img/snippet-17-demos-2025-06-12-1200.webp 1200w"
  sizes="(max-width: 640px) 100vw, 512px"
  alt="17 demos in 30 days after calendar routing, CRM export"
  loading="lazy">

Targets to hold

• Clip play rate on engaged sessions 40 to 60 percent.
• Complete rate 35 to 60 percent with captions on.
• LP weight under 2.0 MB, hero visible in under 2.0 s on 4G.
• Thumbnail CTR at or above the page’s median CTR.
• 0 videos without captions, 0 thumbnails over 200 kB.

Troubleshooting

• Low plays: move clip higher, sharpen thumbnail, shorten to 45 s.
• Completions low: add captions, trim dead air, improve first 5 s hook.
• Layout shift: set explicit width and height on images and placeholders.
• Slow loads: compress thumbnails harder, defer third-party players, serve from closer CDN PoPs.
• Muffled audio: normalize to −16 LUFS, add light noise reduction.

CTA

See pricing and reviews.
Read the full proof wall.

FAQ

What video resolution should I export
720p is enough for proof clips. It balances quality and size. Keep under 40 MB.

Do I need captions if I add text overlays
Yes. Many watch on mute and captions aid accessibility and comprehension.

Should I autoplay clips in hero
No. Autoplay hurts UX and can drop Core Web Vitals. Use a strong thumbnail.

How do I keep pages fast with multiple clips
Show one per page inline, link others to a proof wall. Defer off-screen players.

Can I use GIFs for short loops
Avoid. Use MP4 or WebM. Smaller files, better control, captions supported.