GIF vs MP4 vs WebM: which format for looping video on the web?

The blunt version

For looping video on a modern webpage:

• MP4 (H.264): works everywhere, decent file size, standard choice.
• WebM (VP9 or AV1): 30-50% smaller than MP4 at the same quality, works in every modern browser.
• GIF: 5-20x bigger than either, capped at 256 colors, no audio, looks worse. Only reason to use it is compatibility with places that block video (Slack messages, some old email clients, Reddit's older interfaces, Tenor-style GIF picker integrations).

For most web use cases, MP4 (with WebM as a modern alternative) is the right answer. GIFs persist mostly because "GIF" is a cultural label, not a technical one — people want the feeling of a GIF (auto-play, loop, no controls) which every modern video player also provides.

Why GIFs are so bad

GIF was designed in 1987 for slow modems and small palettes. It has three permanent limitations:

1. 256 colors maximum, per frame. Anything with photographic content becomes dithered and banded.
2. Lossless per-frame compression. No inter-frame optimization (video codecs describe frame 2 as "mostly the same as frame 1 with these changes" — GIF re-describes every frame from scratch).
3. No audio track. Never has, never will.

Result: a 5-second video that's 500 KB as MP4 is often 4-8 MB as GIF, and looks worse.

Where GIFs still make sense

Legitimate reasons to use GIF:

• Slack, Discord, and similar chat platforms where the emoji-style GIF picker is the intended UX. Video files uploaded as attachments don't loop automatically.
• Old email clients. Some corporate mail systems still strip video. Animated GIFs render.
• Reddit and forum posts where "insert GIF from URL" is a standard interaction.
• Twitter/X. Actually stores GIFs as MP4 internally, but the upload flow accepts and expects GIF.
• Presentations and Word docs. PowerPoint and Word support animated GIFs natively without needing video codecs.

For everything else — websites you control, blog posts, product demos, hero animations — use video.

Converting between formats

The two conversions that come up constantly:

Someone sent you a GIF, you want to use it on your website: GIF to MP4 shrinks the file dramatically (often 5-10x) and improves quality (no 256-color limit). Set the video to auto-play, loop, muted, and play-inline on your webpage, and it looks and behaves identically to the GIF — just faster and sharper.

You have a screen recording (MP4), you want to share it in Slack: MP4 to GIF makes it uploadable to platforms that need GIF. Watch the file size — a 30-second screen recording as GIF can easily be 20+ MB. Trim to the highlight, drop the framerate to 12-15 fps, and cap dimensions at 640px wide before converting.

You want to serve modern browsers WebM and fall back to MP4 for older ones: MP4 to WebM produces the smaller version. Use both in your <video> tag with multiple <source> children — the browser picks the first one it supports.

HTML for the "looping GIF-like" pattern

<video autoplay loop muted playsinline>
  <source src="/demo.webm" type="video/webm">
  <source src="/demo.mp4" type="video/mp4">
</video>

Four attributes matter:

• autoplay starts playback on load.
• loop restarts when it ends.
• muted is required for autoplay on iOS Safari (audio autoplay is blocked). Even if you have no audio, keep it.
• playsinline stops iOS Safari from opening a fullscreen player.

Serve WebM first (modern browsers pick it), MP4 second (older browsers fall back).

Size and quality tips

For "GIF-like" web videos:

• Duration: aim under 10 seconds. Longer than that is a video, not a loop.
• Dimensions: 640x360 or 720x400 is plenty for most inline demos.
• Framerate: 24-30 fps for smooth motion. 15 fps if file size matters more.
• Compression: MP4 at CRF 23 or WebM at CRF 30 is the sweet spot — visually near-lossless at moderate file sizes.

Doing it locally

Screen recordings and short demo videos often include unreleased UI, private data, or content you haven't published yet. Uploading them to an online GIF-to-MP4 or MP4-to-GIF converter means an intermediate copy sits on someone else's server. GIF to MP4, MP4 to GIF, and MP4 to WebM all run in your browser on DashConvert via ffmpeg-wasm — nothing uploads, nothing stored anywhere but your device.