How to convert a clip to webp for your website hero
- Step 1Decide the hero's real display width — Look at the rendered width of the hero element at your largest breakpoint (often 1280–1920, or smaller if it's a contained card). Encoding above the display width wastes bytes; below it looks soft. This width is the single biggest lever on file size.
- Step 2Resize/crop the source to the hero box first (recommended) — If the source aspect doesn't match your hero, crop it with video-cropper or resize with video-resizer before converting, so the auto-scaled height lands exactly where you want it — this tool only scales by width.
- Step 3Trim to a clean loop — Hero loops should loop seamlessly. Trim to a segment whose first and last frames are close with lossless-trimmer; a 4–6s slow loop is plenty. Shorter clips mean fewer frames and a lighter hero.
- Step 4Set Width and a low FPS — Set Width to your display width (120–1920). For a slow, ambient hero, FPS 12–15 is smooth and roughly half the bytes of 24. Bump to 24 only if there's fast motion. Height auto-scales — you never set it.
- Step 5Pick Quality with Core Web Vitals in mind — The hero is usually the Largest Contentful Paint element, so weight matters. Quality 75–85 is the sweet spot for a hero; 90+ only if the loop has fine detail or text. Watch the output byte size — aim to keep the WebP under a few hundred KB where possible.
- Step 6Run and wire it into the page — Click Run; download the looping
.webp. Use it in<img src="hero.webp" alt="…">or<Image src="/hero.webp" … />. For first-paint performance, setfetchpriority="high"and explicit width/height to reserve layout space (avoids CLS).
Hero delivery options compared
Why animated WebP often wins for short hero loops versus the two common alternatives. Per-page testing always recommended.
| Approach | Page integration | Weight / quality | Best when |
|---|---|---|---|
| Animated WebP (this tool) | Plain <img> / Next Image, no JS | Light, full colour, no dithering | Short loop (≤ ~6s), no audio, simple markup |
| Animated GIF | Plain <img>, no JS | Heaviest, 256-colour dithering | Only when the surface can't render WebP |
Autoplay <video> | Needs muted + playsinline + poster | Best for long/HD, but more bytes + plumbing | Longer clips, scrubbing, or audio needed |
Hero-tuned settings by scenario
Starting points for common hero loops. Width should match the rendered display width at your largest breakpoint.
| Hero type | FPS | Width | Quality |
|---|---|---|---|
| Slow ambient background loop | 12–15 | Your display width (e.g. 1280) | 75–85 |
| Product motion / fast camera move | 24 | Display width | 82–88 |
| Contained card / feature tile | 15 | 480–720 | 80 |
| Retina / 2× density target | 15–24 | 2× CSS width (cap at 1920) | 78–85 |
Cookbook
Real hero-loop conversions with the settings and the page markup they shipped with. Resize the source to the hero box first for the cleanest output.
1280px ambient hero loop, low FPS
A slow drifting background loop for a full-width hero rendered at 1280px. Low FPS keeps it light; the WebP drops into a plain <img> with no video plumbing.
Source: hero-ambient.mp4 (5.0s, 1920×1080, 30fps)
Controls: FPS 12 · Width 1280 · Quality 80
FFmpeg (libwebp):
-vf fps=12,scale=1280:-1:flags=lanczos -loop 0 -q:v 80 -an
→ hero.webp (1280×720, looping) ~520 KB
Markup:
<img src="/hero.webp" alt="" width="1280" height="720"
fetchpriority="high">Next.js Image with the loop as the LCP element
Using the WebP as the hero in a Next.js page. Explicit width/height reserve layout space (no CLS); priority hints the loader to fetch it first.
Convert: FPS 15 · Width 1440 · Quality 82 → hero.webp 1440×810
Markup:
import Image from "next/image";
<Image src="/hero.webp" alt="Demo loop"
width={1440} height={810} priority
unoptimized />
(unoptimized keeps Next from re-encoding the animated WebP —
animated WebP must be served as-is, not run through the
static image optimizer.)Halve the hero weight by dropping FPS
An ambient loop is too heavy at 24 FPS. Slow background motion looks identical at 12 FPS, cutting frame count and bytes roughly in half.
Source: drift.mp4 (6.0s, 1280px) FPS 24 · q80 → 980 KB FPS 12 · q80 → 510 KB For slow ambient motion the eye can't tell — ship the 12 FPS one. Keep 24 only for genuine fast motion.
Encode at display width, not source width
A 4K source for a hero that renders at 1280px. Encoding at 1280 (not 3840) is dramatically smaller with zero visible difference at that display size.
Source: master-4k.mov (3840×2160) Width 3840 → 6.2 MB (paying for pixels nobody sees) Width 1280 → 0.55 MB (matches display size) For a 2× retina target, encode at 2560 (cap 1920 if needed) and let the browser downscale.
Crop to the hero aspect before converting
The source is 16:9 but the hero band is a wide 21:9 strip. Crop first so the auto-scaled WebP fills the band instead of letterboxing.
Goal: 21:9 hero band
1. video-cropper → crop to 21:9 (e.g. 2520×1080)
2. video-to-webp → FPS 15 · Width 1260 · Quality 80
→ 1260×540 WebP, fills the band edge-to-edge
(This tool only scales by width — set the aspect upstream.)Edge cases and what actually happens
Next.js image optimizer mangles the animated WebP
Use unoptimizedNext.js' default image optimizer re-encodes images and can flatten an animated WebP to a single frame. Serve animated WebP as-is: pass unoptimized on next/image, or use a plain <img>. The file from this tool is already web-ready — it doesn't need (and shouldn't get) a second optimization pass.
Hero loop seam is visible (jump on repeat)
Trim seamlesslyThe encoder loops infinitely (-loop 0); a visible jump means the source clip's first and last frames don't match. Re-trim to a segment that returns near its start with lossless-trimmer, or pick footage with naturally cyclic motion. There's no crossfade/loop-smoothing control in this tool.
Hero hurts Largest Contentful Paint
Reduce weightHero loops are usually the LCP element, so a heavy WebP delays first paint. Cut weight in priority order: lower Width to display size, then drop FPS, then quality. Add fetchpriority="high" and explicit width/height. If it's still too heavy, an autoplay <video> with a poster may LCP better for long/HD content.
Audio in the source clip
Stripped (by design)WebP has no audio; the encoder runs -an. A hero loop should be silent anyway. If your hero genuinely needs sound, use a muted-by-default <video> element instead — that's outside WebP's scope.
Output looks soft at 2× / retina
Encode 2× widthOn high-density displays a 1× WebP looks soft. Encode at 2× the CSS width (cap at the 1920 Width max) and let the browser downscale, or serve a srcset with 1× and 2× WebPs. This tool does one width per run, so generate each density separately.
Layout shift (CLS) when the hero loads
Set dimensionsNot an encoder issue, but a hero gotcha: without explicit width/height (or a CSS aspect-ratio box) the page reflows when the WebP loads. Always set width/height attributes matching the output dimensions — the converter tells you both via the source aspect and your chosen Width.
Very wide hero forces a large width
Watch byte sizeFull-bleed 1920px heroes are heavy because width scales file size roughly with area. Drop FPS and quality first; consider a contained (non-full-bleed) hero, or a CSS gradient overlay so a lower-quality WebP reads as intentional. Width caps at 1920.
File exceeds your tier's size limit
413 tier limitGating is by source file size, not duration: Free 1 GB / 1 file; Pro 10 GB / 5 files; Pro-media 100 GB / 50 files; Developer 100 GB / unlimited. A 4K master can be large — resize it down with video-resizer before converting if you hit the cap.
Frequently asked questions
Can I really put an animated WebP straight in an <img> tag?
Yes — that's the main appeal for a hero. Animated WebP renders and loops in a plain <img src="hero.webp"> (and in Next.js Image) with no JavaScript and no <video> autoplay/muted/playsinline plumbing. It autoplays and loops forever because the encoder sets -loop 0.
What width should I encode the hero at?
Match the rendered display width at your largest breakpoint. Set Width to that value (120–1920) and height auto-scales from the source aspect. Encoding above the display width just wastes bytes; below it looks soft. For retina, encode at 2× the CSS width and let the browser downscale.
How do I keep the hero from hurting page speed?
The hero is often the LCP element, so keep the WebP light. In order of impact: encode at display width (not source width), drop FPS (12–15 is fine for slow loops), then lower quality to 75–85. Add fetchpriority="high" and explicit width/height. Smaller, fewer frames, right size.
Why does my animated WebP show only one frame in Next.js?
Next.js' image optimizer re-encoded it and flattened the animation. Serve it as-is: add unoptimized to next/image, or use a plain <img>. The WebP from this tool is already web-ready and shouldn't go through a second optimization pass.
My hero loop jumps when it repeats — how do I fix it?
That's a source-clip seam, not an encoder setting (the loop is always infinite). Re-trim to a segment whose last frame is close to its first with lossless-trimmer, or use footage with naturally cyclic motion. There's no crossfade control here.
WebP hero or autoplay <video> — which is better?
For short loops (up to roughly 6 seconds), silent, with simple markup, animated WebP is usually the better call — lighter setup, no JS, plays in an <img>. For longer or HD clips, scrubbing, or anything needing audio, an autoplay muted <video> with a poster frame wins. Test LCP both ways for your specific hero.
Does my source clip get uploaded?
No. Conversion runs entirely in your browser via FFmpeg.wasm — your unreleased homepage clip never reaches a server. Only an anonymous processed-file counter is recorded if you're signed in.
Can I set the height directly?
No — you set Width, and height auto-locks to the source aspect ratio (scale=W:-1:flags=lanczos). To control the final shape, set the aspect upstream by cropping with video-cropper or resizing with video-resizer before converting.
How do I serve different sizes for mobile and desktop?
Convert each size in a separate run (this tool does one width per run) and use a srcset on the <img> so the browser picks the right WebP per viewport. Encode mobile narrower (e.g. 480–768) and desktop at your display width.
Does the hero loop include sound?
No. WebP can't carry audio and the encoder strips it (-an). Hero loops are silent by design. If you need sound, switch to a muted-by-default <video> element.
What input formats can I use?
video/* plus .mp4, .mov, .mkv, .webm, .avi, .m4v, and .ts. A 4K MOV master, an MP4 export, a WebM — all work. Unrecognised extensions are read as MP4 and may fail; re-wrap to MP4 first if decode errors.
How big can the source be?
Video tools gate by file size, not duration: Free 1 GB / 1 file; Pro 10 GB / 5 files; Pro-media 100 GB / 50 files; Developer 100 GB / unlimited. A 4K hero master can be large — resize it down with video-resizer first if you hit your cap.
Privacy first
Every JAD Video tool runs entirely in your browser via WebCodecs and FFmpeg (WebAssembly). Your video files never leave your device — verified by zero outbound network requests during processing.