GIF, MP4, or WebM: Which Wobble Format Should You Export?

Format is a delivery decision, not a quality ranking. The same wobble exported three times from one source, with measured bytes and real platform behavior.

The numbers below come from Purupuru Maker's own encoder running on the same 1024×1536 source with the Soft wobble preset. We re-exported the same gesture three times, once per format, and recorded the bytes. We have done this enough times to trust the ratios more than the absolute values; the ratios are what matter when you are picking a format.

Same wobble, three formats

Format	Size	vs GIF	What it costs you
GIF	1.75 MB	1×	Limited palette, larger files, but inline autoplay on chat surfaces.
WebM	462 KB	3.9× smaller	Excellent in modern browsers; weaker support in chat apps and older editors.
MP4	330 KB	5.4× smaller	Universal social feed and video player support; usually needs a tap to play in chat.

MP4 is the smallest in our encoder. That holds across durations — at 0.5 s, 1.0 s, 1.5 s, 2.0 s, and 3.0 s, the MP4 stays roughly a fifth of the GIF. The 5.4× ratio is not a one-duration artifact; it is the codec difference. If you can choose MP4 and the destination will autoplay it, you are usually done optimizing.

What each format is actually good at

Quality is rarely the deciding factor. Each format is good at a different job, and the right format is the one whose job matches your destination.

GIF

• Inline autoplay. Chat tools that treat GIFs as images (iMessage, WhatsApp, Discord inline) play them without a tap. Some of those same tools show MP4 as a thumbnail that needs a tap to play.
• Simple loop semantics. A GIF loops forever with no markup. MP4 and WebM need a loop attribute and a player that honors it.
• Universal image-field support. Forums, documentation systems, README files, and image upload fields accept GIF. Some refuse video.
• Bad at gradients and photographic content. The 256-color palette quantizes smooth tones into bands. A wobble of a photographic face looks worse as a GIF than as an MP4 of the same source at one fifth the size.

MP4

• Smallest files in our encoder, by a clear margin (table above).
• Social feed default. Instagram, TikTok, X, LinkedIn, and presentation software all expect video. Most will not accept GIF at all.
• Photographic content. H.264 handles gradients and repeated motion far more efficiently than GIF, so a wobble of a photo looks better at a smaller size.
• No transparent sticker workflow. GIF can carry a single-bit alpha for stickers; MP4 is not designed for it.
• Autoplay is not guaranteed. Some chat clients and CMS previews show a thumbnail and require a tap.

WebM

• Small in modern browsers. Slightly larger than MP4 in our encoder, but decodes well on cheap devices.
• Best for sites you control. The HTML video element handles autoplay, mute, loop, and lazy loading natively.
• Weaker support outside the browser. Some messaging apps, design tools, and older editing programs do not accept WebM. If you hand the file to someone else, ask what their editor supports.
• Open codec. Useful if you want to avoid H.264 licensing on a public site.

Match the format to the destination, not the source

Start from the place where the file will live, not from the source image. These are the destinations we actually send wobbles to:

Destination	Format	Why
Discord chat	GIF	10 MB cap on free tier, 25 MB on Nitro. GIFs autoplay inline; video shows a thumbnail.
Slack chat	GIF	2 MB GIF cap; video upload uses a different path with a 1 GB cap but requires a click to play.
iMessage, WhatsApp	GIF	GIFs autoplay inline. MP4 from another source typically requires a tap.
Instagram feed (1:1 or 4:5)	MP4	GIF is not accepted on the feed.
Instagram or TikTok story (9:16)	MP4	GIF is not accepted on stories.
X in-feed	MP4 (preferred) or GIF	Both work. MP4 is smaller and renders more sharply at large sizes.
LinkedIn feed	MP4	GIF is not the expected format.
Your own website or web demo	WebM (primary) + MP4 (fallback)	WebM is smaller; MP4 is the fallback for older browsers. Set loop, muted, and autoplay on the video element.
Email newsletter	GIF	Most email clients do not play video. Some block WebM outright.
GitHub README or docs	GIF	Image fields accept GIF. Embedded video is inconsistent across markdown renderers.

The decision flow we use internally

1. Will the destination accept MP4 and autoplay it? If yes, use MP4. The file is one fifth the size of the GIF, and most modern destinations handle it cleanly.
2. Is the destination a chat surface where GIFs inline-autoplay but video needs a tap? Use GIF. The size cost is real, but the tap-friction on video kills the reaction.
3. Is the destination a website you control? Use WebM as the primary source, MP4 as the fallback. The video element picks the first one the browser can decode.
4. Is the audience on a slow network? Bias to WebM with a 1 s loop. The 462 KB row is the second-smallest in our table and decodes well on cheap devices.
5. Does the destination require a transparent background? Use GIF. MP4 transparency exists but is not portable.

Things that look right locally and look wrong online

1. Re-encoding an already-compressed GIF into MP4. The MP4 encoder receives a generation that started from a 256-color palette. The result looks muddy, with visible banding. Fix: export MP4 directly from the original source and the original mask, not from the GIF.
2. Trusting local preview. A GIF that loops cleanly in your editor can pause at the loop point on the destination because the platform recompresses the file. Fix: keep the loop short and pick a clean start and end frame.
3. Assuming smaller file means better. On some social feeds the platform recompresses your upload regardless. Exporting the smallest possible master is wasted work if the destination overwrites it. Pick the smallest size that still reads in your preview and stop.
4. Using GIF on platforms that do not accept it. Most modern social feeds reject GIF uploads. Export MP4.
5. Using MP4 on chat surfaces that require a tap. The MP4 is smaller but the user has to tap a thumbnail. If the point of the wobble is a reaction, use GIF and pay the bytes.

A short format-by-format reference

If you only have time to remember three rules:

• GIF: chat reactions, README images, anywhere an image field accepts it and video is awkward. Inline autoplay is the superpower.
• MP4: social feeds, presentations, anywhere video is expected and bandwidth matters. Smallest file in our tests.
• WebM: sites you control, modern browsers, anywhere you want efficient delivery and open codecs. Pair with MP4 as a fallback.

Keep the original source and the painted mask, and re-export for each destination rather than converting one master file. The same wobble can be a 232 KB GIF for chat, a 330 KB MP4 for social, and a 462 KB WebM for your site — all from the same source. Re-exporting from the source preserves more quality than transcoding between formats.