Animated GIFs in Email: Outlook Support, Size and Best Practices

Animated GIFs are the one kind of motion that works in almost every inbox. Video doesn't play in most email clients, and CSS animation support is patchy. But a GIF that is too big, too long or relies on the wrong frame can hurt more than it helps. Here's how to get them right.

Which email clients play GIFs

Classic Outlook for Windows is still common in offices. It doesn't break on GIFs; it just shows the first frame and stops. That makes the first frame the most important design decision in the file.

Design the first frame as a fallback

Treat frame one as a static image that has to work on its own:

• Put the headline, the product or the offer in the first frame, not halfway through.
• Avoid starting on a blank or fade-in frame. A reader in Outlook will see nothing.
• If the message only makes sense with motion, add a line of text in the email body that says the same thing.

To check what your first frame looks like, split the GIF with the GIF to PNG tool and look at frame 1.

Keep it under 1 MB

There is no published size limit for GIFs in email, but size still matters:

• Mobile data. Many people open email on a phone. A 4 MB GIF can show as an empty box for several seconds.
• Deliverability. Very image-heavy emails are more likely to land in spam.

Most email designers keep GIFs between 200 KB and 1 MB. The email GIF compressor targets 1 MB in one click.

Size it for a 600 px layout

Email templates are usually 600 px wide. A GIF wider than that is scaled down by the client, so the extra pixels cost bytes and add nothing. For sharp results on high-density screens, export at up to 1200 px wide and set width="600" in the HTML. If file size is tight, 600 px wide is enough for most animations.

Resize with the GIF resizer before compressing. Halving the dimensions removes three-quarters of the pixels, which is usually a bigger saving than any compression setting.

Shorter and calmer is better

• Loop length. Three to five seconds is plenty. Every extra frame adds size.
• Loop count. An endless loop is fine for subtle motion. For anything busy, consider a GIF that plays two or three times and stops on a frame that works as a still.
• Flashing. Don't flash more than three times per second. Fast flashing is uncomfortable for many readers and can trigger seizures in people with photosensitive epilepsy.

Always add alt text

Images are often blocked until the reader allows them, and screen readers read the alt attribute. Describe what the GIF shows or what it's for:

<img src="sale.gif" width="600" alt="Autumn sale: 30% off everything until Sunday" />

A quick checklist

1. First frame carries the message.
2. 600 px wide (or 1200 px displayed at 600).
3. Under 1 MB.
4. Under five seconds, no rapid flashing.
5. Alt text that stands in for the animation.

Everything above runs in your browser with GIF Ready, so the files you're preparing for a campaign never leave your device.