The Best Resolution and Frame Rate for Exporting Web Animations

18 Jul 2026 · 1 min read

Two settings decide how your exported animation looks and how big the file is: resolution and frame rate. Here's how to pick both without overthinking it.

Resolution

720p — quick previews and the free tier. Fine for small embeds.
1080p — the everyday default. Perfect for social, sites, and email.
2K / 4K — presentations, big screens, or when you'll crop/zoom in later. Larger files and slower renders.
Native — matches your design's own pixel size exactly. Great when the design was built at a specific dimension.

Rule of thumb: 1080p unless you have a reason to go higher.

Frame rate

24 fps — a cinematic feel; smallest files.
30 fps — the standard for web and social. Use this if unsure.
60 fps — buttery for fast motion (particles, quick transitions, games), at roughly double the file size and render time.

Matching fps to your animation

If your animation targets 60 fps in the browser, export at 60 to preserve every in-between frame. If it's mostly slow fades and gentle motion, 30 is indistinguishable and half the weight.

The one that's decided for you

Length isn't a slider — it's read from the animation itself (via window.CLAUDE_VIDEO.duration, or a sensible fallback), so your export is exactly as long as the motion. More on that in the Docs.

Pick your combo and render it — the cost is shown up front, scaled by resolution × frame rate × length.