GIF Guide: Video to GIF, Compression, Resizing, and GIF vs MP4

GIF Guide: Video to GIF, Compression, Resizing, and GIF vs MP4

GIFs are everywhere — reaction clips on social media, animated diagrams in docs, looping product demos on landing pages. But unoptimised GIFs are enormous. A 10-second clip at 480px wide can easily hit 15 MB as a GIF. This guide covers every step of the GIF workflow: what makes a good GIF, how to shrink existing ones, how to convert video to GIF properly, and when to switch to MP4 instead.

What Makes a Good GIF?

Before optimising, it helps to understand what drives GIF file size:

• Loop length — every extra second adds frames. Keep clips under 6 seconds for sharing; under 15 seconds for demos.
• Frame rate (FPS) — 10–15 FPS feels smooth for most content. 24+ FPS doubles the frame count with little visible benefit.
• Colour palette — GIF supports up to 256 colours per frame. Photos need the full 256; simple graphics can use 64–128 with no visible difference.
• Width — the biggest lever. Halving the width quarters the pixel count. 480px is the sweet spot for most sharing contexts; 320px for messaging apps.

The ideal GIF is short, slow (10–15 FPS), narrow (320–480px), and uses a reduced palette.

Why GIFs Are So Large — and How to Compress Them

GIF uses LZW compression, which works well on areas of flat colour but poorly on photographic content with gradients. A raw screen recording compressed as a GIF will be 3–10× larger than the equivalent MP4.

The main levers for compression:

Use FileCrank's GIF Compressor to reduce palette size and optionally halve or third the frame rate in one step. For a 3 MB social media GIF, medium quality + half FPS typically yields a 1–1.5 MB result with no perceptible quality loss.

Video to GIF Best Practices

Converting video to GIF well requires more than a simple format change. Most converters produce blurry GIFs because they skip palette optimisation. A two-pass approach fixes this:

1. Pass 1 — Generate a palette from the specific frames in your clip. This creates a custom 256-colour palette tuned to the actual colours present, rather than a generic palette.
2. Pass 2 — Apply the palette to produce the GIF. Colours are far more accurate because the palette was derived from the content itself.

Clip settings for best results:

FileCrank's Video to GIF converter uses the two-pass palette method automatically. Drop your MP4, MOV, WebM, or AVI, set the clip start and end time, pick FPS and width, and download the result.

File size expectations:

• 5-second clip at 480px / 15 FPS → roughly 2–5 MB depending on content complexity
• 5-second clip at 320px / 10 FPS → roughly 0.5–1.5 MB

Resizing GIFs Without Breaking the Animation

Resizing an animated GIF requires processing every frame simultaneously. A naive resize tool will either flatten the animation (outputting a single frame) or produce garbled output. A proper animated GIF resize:

• Loads all frames together
• Scales each frame to the new dimensions
• Preserves per-frame timing (delay values)
• Outputs a valid animated GIF

When to resize vs re-convert: If you already have a GIF and just need it smaller, resize it. If you have the original video, re-converting at a lower resolution produces better quality because the palette can be re-optimised for the new dimensions.

Use FileCrank's GIF Resizer to scale by exact pixel dimensions (width, height) or by percentage. Scaling to 50% of the original dimensions typically reduces file size by 70–80%.

GIF vs MP4 — Platform Comparison

GIF is convenient but inefficient. For many use cases, MP4 is dramatically smaller with identical visual quality:

Rule of thumb: Use GIF when the platform requires it (email, GitHub, Slack). Use MP4 everywhere else.

Use FileCrank's GIF to MP4 converter to convert an existing animated GIF to a web-optimised H.264 MP4 (yuv420p, faststart). The output plays inline on Twitter, Discord, and in <video> tags.

Content Creator Workflow: Screen Record → GIF → Share

Here is a practical end-to-end workflow for creating a shareable GIF from a screen recording:

1. Record — Use QuickTime (Mac) or Xbox Game Bar (Windows) for a short, focused clip. Keep it under 15 seconds.
2. Trim — Set start/end times in Video to GIF. Aim for 4–8 seconds.
3. Set FPS and width — 10–12 FPS and 480px for most uses; 320px for messaging apps.
4. Convert — Download the GIF. Check the file size.
5. Compress if needed — If the GIF is over 2 MB, run it through GIF Compressor with medium quality.
6. Resize if needed — If still too large, drop to 320px via GIF Resizer.
7. Share — Or convert to MP4 via GIF to MP4 if the platform supports it.

Typical result: a 4-second screen recording → 0.8–1.5 MB GIF, or < 200 KB MP4.

Quick Reference: Which GIF Tool to Use?

All four tools are free, run entirely in the cloud, and require no software installation.

GIF's Technical Limitations: The 256-Colour Problem

GIF was standardised in 1987. Its age shows in one defining constraint: each frame can use a maximum of 256 colours.

For simple graphics — logos, diagrams, text-on-white, pixel art — 256 colours is plenty. The format thrives there. The problem is everything else.

Why skin tones look bad in GIFs. Human skin is not one colour — it is a gradient of dozens of subtly different hues that shift with lighting. A photograph of a person's face might contain thousands of distinct colour values. When GIF's encoder has to represent all of that complexity with only 256 slots, it picks the 256 best approximations and maps every pixel to the nearest one. The result is colour banding: smooth gradients become stepped blocks of flat colour. Faces look blotchy. Backgrounds with subtle gradients turn into obvious stripes.

8-bit alpha: no partial transparency. Modern image formats like PNG support full 8-bit alpha transparency — each pixel can be anywhere from fully opaque to fully transparent, with 254 levels in between. This allows for smooth, anti-aliased edges: the border between a circular icon and its background fades gracefully through semi-transparent pixels.

GIF supports only 1-bit alpha. Each pixel is either fully opaque or fully transparent — nothing in between. There is no semi-transparency. This means GIF edges are always hard and jagged unless the background colour is known in advance and the anti-aliasing is pre-baked against that specific colour. Paste the same GIF onto a different background and the edge artefacts become visible immediately.

The practical upshot: GIFs work well for screen recordings, simple animations, and content with flat colour areas. They degrade noticeably for content involving real people, natural scenery, photographic backgrounds, or any situation where you need smooth transparent edges.

GIF vs MP4/WebM for Animation: A File Size Reality Check

The file size gap between GIF and modern video formats is not marginal — it is extreme.

A 5-second animation at 480px wide, 15 FPS:

The same visual content, the same duration, the same resolution — MP4 is roughly 20–50× smaller than GIF.

The reason is temporal compression. GIF stores each frame independently. If your clip has a static background and only a small element moving, GIF still has to store the entire background on every single frame. MP4 and WebM codecs only encode what changes between frames — the static background is stored once and referenced. This is why video codecs are so effective on screencasts, demos, and animations where most of the image is static.

For a web page, the difference is significant. A 10 MB GIF embedded on a landing page adds 10 MB to the page weight, slowing load times for every visitor. The equivalent MP4, embedded as <video autoplay loop muted playsinline>, adds 300 KB. For mobile users on constrained connections, this gap is the difference between a page that loads and one that is abandoned.

If you are curious about how the underlying video codecs achieve this compression, our guide to video codecs — H.264, H.265, VP9, and AV1 covers the mechanics in detail. And for a broader look at lossy vs lossless trade-offs across formats, see our lossy vs lossless file conversion guide.

Use Video to MP4 → to convert your source clip directly to a web-optimised H.264 MP4, bypassing GIF entirely.

When GIF Still Makes Sense

Given all of the above, is GIF dead? No. There are specific contexts where GIF is still the right choice — not because it is efficient, but because nothing else works.

Email clients. The major email clients — Gmail, Apple Mail, Outlook (with caveats) — render animated GIFs inline with no user interaction required. MP4 does not play in email. If you want animation in an email newsletter, a product update, or a cold outreach message, GIF is your only option.

Discord. Discord auto-plays GIFs in chat without a click. MP4 files posted in Discord show a static thumbnail and require the recipient to tap or click to play. For reaction content and quick demos shared in a server or DM, GIF delivers the instant visual impact that MP4 cannot.

Slack. Similar to Discord — Slack renders GIFs inline and auto-plays them in the message feed. MP4 uploads show a file attachment, not an inline animation.

GitHub Issues and Pull Requests. GitHub supports inline GIF in Markdown. If you are documenting a bug, demonstrating a UI behaviour, or showing a before/after in a code review, a GIF embeds directly in the issue or PR description. Video files do not.

Google Docs and Slides. GIFs animate in Docs and Slides; embedded video does not loop automatically in the same way.

The pattern is clear: use GIF when the platform renders it automatically and does not support inline MP4. Use MP4 (or WebM) everywhere else — web pages, social media posts on platforms that accept video, and any context where file size directly affects the experience.

Optimising GIFs: Four Levers That Actually Work

When you are stuck with GIF — because the platform demands it — here is how to make your GIFs as small as possible without destroying quality.

1. Frame reduction. Dropping from 15 FPS to 10 FPS removes one third of all frames. For most content — screen recordings, simple motion graphics — 10 FPS looks perfectly smooth. Going to 8 FPS removes nearly half the frames. For slow, deliberate animations, 8 FPS is fine; for fast action, it introduces visible choppiness.

2. Colour palette reduction. The default 256-colour palette is overkill for most GIF content. Screen recordings of UI elements — menus, buttons, text — typically use far fewer unique colours. Reducing the palette to 128 or even 64 colours produces files 20–40% smaller with little or no visible colour change. The only content where palette reduction is obviously harmful is photographic material with fine colour gradients.

3. Lossy GIF compression. This is less well-known but highly effective. Standard GIF compression (LZW) is lossless within the 256-colour constraint. Lossy GIF compression goes further: it introduces minor pixel-level noise that the LZW algorithm can then compress more efficiently, trading tiny amounts of visual quality for substantially smaller files. At a moderate lossy setting, the visual difference is invisible to most viewers while the file size drops 30–50%. GIF Compressor → supports lossy compression — the quality slider controls the lossy level.

4. Trimming to the essential moment. Every second of a GIF costs frames. If your clip has a 0.5-second pause at the start and a 1-second fade at the end, trim those out. The interesting content is rarely the full duration of the source clip. Trimming 2 seconds from a 7-second clip removes roughly 28% of all frames — more effective than any codec optimisation.

Use these levers in combination. A GIF that starts at 8 MB can often be brought under 1.5 MB by combining frame reduction, palette reduction, and a moderate lossy setting — without the average viewer noticing any difference.

The APNG Alternative: Animated PNG With Full Colour

If you need animation, transparency, and quality that GIF cannot deliver, there is a lesser-known alternative worth knowing: APNG, or Animated PNG.

APNG is an extension to the standard PNG format that supports multiple frames — a proper animation — stored using PNG's compression. It offers:

• Full 24-bit colour depth — 16.7 million colours per frame, not 256
• Full 8-bit alpha transparency — smooth, anti-aliased edges work correctly
• Better compression than GIF — for many types of content, APNG files are smaller than equivalent GIFs at higher quality

For animations with text, logos, gradients, or any content where GIF's colour limitations create visible artefacts, APNG is a meaningful upgrade.

Browser support. APNG is supported in all major browsers: Chrome, Firefox, Safari, and Edge all render APNG correctly. The main exception is Internet Explorer, which is no longer supported by Microsoft and accounts for negligible traffic. For web use, APNG is safe.

Where APNG does not work. The same platform limitations that affect video apply to APNG: email clients will show only the first frame, not the animation. GitHub does not render APNG as animation in issue comments. Discord renders APNG as a static image. For those platform-specific contexts, GIF remains the only reliably animated option.

The practical decision tree:

• Animation for a web page or modern app → MP4 or WebM (<video autoplay loop muted>)
• Animation for email, Discord, Slack, GitHub → GIF, optimised with the levers above
• Animation for a context with full-colour or transparency requirements where APNG renders → APNG