GIF vs MP4 vs WebM: which format for loops

GIF vs MP4 is decided by where the loop will play. On websites and social media, MP4 (and its open cousin WebM) is almost always the right choice: files are usually far smaller, colour is smooth and playback is efficient. GIF is still the right choice in one place, email, because most inboxes show animated GIFs and very few play video. Everything else in this guide is detail on that rule.

What each format actually is

GIF is an image format from the late 1980s that can hold several frames. It stores each frame with a palette of at most 256 colours and compresses each frame on its own terms. MP4 and WebM are video formats. They use modern video codecs, such as H.264 in MP4 and VP9 or AV1 in WebM, which store what changes between frames rather than every frame in full. For a loop where most of the picture changes slowly, that difference is enormous.

Why gradients look bad as GIFs

A smooth gradient across a 1080 pixel frame can use thousands of distinct colours. A GIF frame can hold 256 at most. The encoder has two choices: round colours to the nearest one in the palette, which produces visible stripes, or scatter pixels of neighbouring colours to fake the in-betweens, called dithering, which looks speckled and makes files bigger. Neither looks like the gradient you designed.

Grain helps a little, because noisy images hide palette limits better than clean ones. But the real fix is not to use GIF where video is possible. Gradient banding explains the same problem in still images.

MP4 or WebM for websites

For a website, replace GIFs with a video element that behaves like one: autoplaying, muted, looping and inline. web.dev's guide to replacing animated GIFs with video explains the approach. Offer WebM first, since it is often smaller, and MP4 as the fallback that plays almost everywhere.

<!-- Instead of <img src="loop.gif" alt=""> -->
<video autoplay muted loop playsinline width="600" height="600"
       poster="loop-poster.jpg">
  <source src="loop.webm" type="video/webm">
  <source src="loop.mp4" type="video/mp4">
</video>

Two other formats are worth knowing. Animated WebP and animated AVIF are image formats, used in an ordinary img tag like a GIF, but with full colour and much better compression. Modern browsers support both. They are handy where a CMS or platform only accepts images, but not for email. For full-width backgrounds, read video backgrounds on websites.

Loops for social media

Social platforms are built around video, and MP4 is the format they all accept. Where a platform takes a GIF upload, it often handles it differently from a normal video, so a GIF is rarely an advantage. Export your loop as MP4 at the platform's size, in H.264, and let the platform do the rest. Animated posts vs static covers sizes and settings.

Loops in email: still GIF

Most email clients don't play video, so an animated GIF is the practical way to put motion in an email. Keep it small and treat the first frame as the fallback: some clients, including some versions of classic Outlook for Windows, show only the first frame. Put the message in that frame so nothing is lost. Our guides to email header design and gradients in email cover the rest.

1. 1

   Keep it short

   Two to six seconds is plenty in an email; every frame adds weight.

2. 2

   Reduce the size and frame rate

   Export at the width it displays, often 600 pixels, and at a lower frame rate, such as 10 to 15 frames per second, for slow movement.

3. 3

   Put the message in frame one

   Readers who only see the first frame should still get the point.

4. 4

   Check the file size

   Large GIFs load slowly on phones. If it is heavy, cut length, size or colours before anything else.

Converting between GIF and MP4

ffmpeg, a free command-line tool, handles both directions. Turning video into a good GIF needs a custom palette built from the video itself; turning a GIF into MP4 is simpler.

# MP4 to GIF: 15 fps, 600 px wide, with a palette made from the clip
ffmpeg -i loop.mp4 -vf "fps=15,scale=600:-1:flags=lanczos,split[a][b];[a]palettegen[p];[b][p]paletteuse" -loop 0 loop.gif

# GIF to MP4: H.264, even dimensions, ready for the web
ffmpeg -i loop.gif -movflags +faststart -pix_fmt yuv420p \
  -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" loop.mp4

# MP4 to WebM (VP9)
ffmpeg -i loop.mp4 -c:v libvpx-vp9 -crf 34 -b:v 0 -an loop.webm

Which format to use, at a glance

If you make loops in Gradiently, the Studio exports both: a video (MP4 where your browser can record it, otherwise WebM) up to 1080p, and a GIF with a choice of quality that is kept under 15 MB. Make sure the loop joins cleanly whichever you choose; see seamless loops.