Animated GIFs are one of the few ways to add motion to email without JavaScript. A well-placed GIF can demonstrate a product, add personality, or draw attention to your CTA. Here's how to use them effectively with the Email Love Figma Plugin.
How GIFs Work in Email
Animated GIFs play automatically in most email clients. No user interaction required—the animation starts as soon as the image loads. There's one big caveat: Outlook on Windows only shows the first frame of a GIF, displaying it as a static image.
Email Client | Animated GIF Support |
Apple Mail (iOS/macOS) | ✅ Full animation |
Gmail (web/mobile) | ✅ Full animation |
Outlook (Mac) | ✅ Full animation |
Outlook (Windows) | ⚠️ First frame only |
Yahoo Mail | ✅ Full animation |
Samsung Mail | ✅ Full animation |
💡 Pro tip: Since Outlook only shows the first frame, make sure your GIF's first frame communicates the key message on its own. Don't save the punchline for frame 30.
Adding GIFs to Your Email
- Create or source your animated GIF
- In Figma, place the GIF inside an image frame within a column
- The plugin will detect the GIF and export it with animation intact
- The GIF will be hosted on the Email Love CDN automatically
Optimization
GIFs can be enormous. An unoptimized GIF can easily exceed 5MB—and your entire email should stay under 500KB. Here's how to keep GIFs lean:
- Limit dimensions: Keep GIF width to 640px max (or smaller). Every pixel adds to file size exponentially.
- Reduce frames: Fewer frames = smaller file. Aim for 10–20 frames for simple animations.
- Reduce colors: GIFs support up to 256 colors. Reducing to 64 or 128 colors dramatically cuts file size.
- Use optimization tools: EZGIF.com, Gifsicle, or Photoshop's "Save for Web" can compress GIFs significantly.
- Keep it short: 2–5 seconds is the sweet spot. Looping GIFs that are too long become distracting.
When to Use GIFs
- Product demos: Show a product in action (rotating view, feature walkthrough)
- Countdown timers: Create urgency for sales or events (also see the Countdown Timer article)
- Attention grabbers: Subtle animation on a CTA button or hero image
- How-to sequences: Quick step-by-step instructions
- Personality: Brand expression, reactions, celebratory moments
When NOT to Use GIFs
- Don't use GIFs for critical information (Outlook users won't see the animation)
- Don't use multiple GIFs in one email (file size and distraction)
- Don't use fast-flashing animations (accessibility concern for photosensitive users)
- Don't rely on a GIF to replace your text CTA
Powered by