Use an animated GIF in email when one short motion can explain or sell better than a still image. Keep it small. Make the first frame useful. Test it before you send. That is the whole game.
TLDR: Animated GIFs work in most major email apps, but not always perfectly. Gmail, Apple Mail, Yahoo Mail, and many mobile apps play them, while some versions of Outlook only show the first frame. For example, a shoe store could show a 3-frame GIF of a sneaker turning and see a 12% lift in clicks compared with a flat product image. Keep the GIF under 1 MB if you can, and never hide key text inside the animation.
Why use a GIF in an email?
A GIF adds motion without asking the reader to press play. That makes it great for quick ideas.
You can use one to show:
- A product view, like a bag opening or a lamp switching on.
- A sale reveal, such as “20% off” popping into view.
- A tiny tutorial, like where to tap in an app.
- A mood, like confetti after a purchase.
- A before and after, which is always satisfying.
The catch is, email clients are picky little goblins. A GIF may play beautifully in Apple Mail, then sit frozen in Outlook like it had a bad day. So you need a plan.
Step by step: how to insert an animated GIF
The exact buttons change by email platform. Still, the process is usually the same.
- Create or download your GIF. Use a short clip. 2 to 6 seconds is enough.
- Compress the file. Aim for under 1 MB. Under 500 KB is even better.
- Open your email editor. This may be Mailchimp, Klaviyo, HubSpot, Campaign Monitor, Beehiiv, or another tool.
- Add an image block. Do not add it as a video block.
- Upload the GIF like a normal image.
- Add alt text. Say what the GIF shows.
- Link the GIF to a product page, article, coupon, or app screen.
- Send test emails. Check Gmail, Apple Mail, Outlook, and mobile.
If you write your own HTML email, the code is simple:
<a href="https://example.com/sale">
<img src="https://example.com/image.gif"
alt="Sneaker rotating in three colors"
width="600"
style="display:block; width:100%; max-width:600px;">
</a>That is it. A GIF is still an image file. Email treats it like an image, unless the app decides to be annoying.
Best GIF format for email
Use the classic .gif format. It is old. It is limited. It is also the safest choice for email animation.
Here is what you should know:
- GIF supports animation. That is why we use it.
- GIF has limited colors. It supports up to 256 colors per frame.
- GIF can get huge fast. Long clips turn into monster files.
- GIF has no sound. This is fine for email.
- GIF does not need a play button. It starts on its own in most inboxes.
What about MP4? Great for websites. Bad for regular email. Many inboxes block video playback. What about APNG? Nice in some places. Risky in email. What about WebP animation? Also risky. Stick with GIF unless you have a very specific audience and have tested it hard.
Email client compatibility
Here is the part that causes sighing.
- Apple Mail: Usually plays animated GIFs well.
- Gmail: Usually plays GIFs on desktop and mobile.
- Yahoo Mail: Usually supports GIF animation.
- Outlook for Mac: Often plays GIFs.
- Outlook for Windows: Some versions show only the first frame.
- Outlook 2007 to 2019 on Windows: Often freezes on the first frame.
- Outlook 365: Support can vary by app and setup.
This is why the first frame matters so much. It must tell the story by itself. If your GIF says “Sale starts now” only on frame three, some Outlook users may never see it. Painful. Also avoid starting with a blank frame. That one mistake can make your email look broken.
Make the first frame count
Think of the first frame as your fallback image. It should work as a normal still image.
Put these items in frame one:
- The main product or message.
- The offer, if there is one.
- A clear visual hint.
- Your brand style.
Do not put these only in later frames:
- Discount codes.
- Dates and deadlines.
- Legal copy.
- Critical instructions.
- The only call to action.
Honestly, it feels like Outlook waits for your prettiest animation and then says, “Nope.” So design for that frozen first frame.
Keep the file small
Big GIFs slow down emails. Slow emails lose clicks. People will not wait for a dancing banner to load while standing in line for coffee.
Use these targets:
- Best: Under 500 KB.
- Good: Under 1 MB.
- Acceptable: 1 to 2 MB, if the GIF is worth it.
- Risky: Over 2 MB.
To shrink a GIF:
- Use fewer frames.
- Make the image smaller.
- Use fewer colors.
- Remove extra motion.
- Crop empty space.
- Shorten the loop.
A 600 pixel wide GIF is often enough for a full-width email image. For retina screens, you can make it 1200 pixels wide and display it at 600 pixels. But watch the file size. Retina GIFs can become chunky fast.
Use loops with care
Most GIFs loop forever. That can be fun. It can also be irritating.
For email, a gentle loop is best. Avoid flashing, shaking, or frantic movement. A smooth product spin feels polished. A neon sign blinking 19 times feels like a tiny inbox emergency.
Also think about health and comfort. Do not use fast flashing effects. Avoid high-contrast strobe motion. Some readers are sensitive to rapid animation.
Do not put all text inside the GIF
This is a common mistake. The designer makes a gorgeous GIF with the headline, offer, button, and tiny terms inside the image. Then images are blocked. Now the email says nothing. Great. Love that for everyone.
Use real HTML text for key content. Put your headline above or below the GIF. Add a real button too.
Good setup:
- HTML headline: “New colors just dropped.”
- GIF: Product color change animation.
- HTML button: “Shop the collection.”
This helps accessibility. It also helps when images load slowly. It may even help your email feel more trustworthy.
Add alt text
Alt text describes the image for screen readers and for blocked images. Keep it short.
Good examples:
- “Red backpack opening to show laptop pocket.”
- “New app dashboard switching from light mode to dark mode.”
- “Cupcakes with 25% off sale text.”
Bad examples:
- “GIF.”
- “Image.”
- “Click here now now now.”
Where to place a GIF in your email
Put the GIF near the top if it carries the main message. Place it lower if it supports the story.
Good placements include:
- Hero area: Best for launches and big sale moments.
- Product section: Great for showing features.
- How it works section: Good for quick tutorials.
- Footer surprise: Fine for small brand moments.
Test before sending
Never assume. Send tests. Open them on real devices.
Check these things:
- Does the GIF animate?
- Does the first frame make sense?
- Does it load on mobile data?
- Is the file too heavy?
- Does the link work?
- Is the alt text useful?
- Does the email still work with images off?
Expect to waste time on tiny client quirks. One app may add strange spacing. Another may resize the image. A third may clip the bottom. This is email. It has been weird for years.
Quick best practice checklist
- Use .gif format.
- Keep it short.
- Keep it under 1 MB when possible.
- Make frame one useful.
- Add alt text.
- Use real HTML text for key messages.
- Add a real CTA button.
- Avoid flashing effects.
- Test in Gmail, Apple Mail, Outlook, and mobile.
- Link the GIF to a useful page.
An animated GIF can make an email feel alive. It can show more in less space. It can boost clicks when used with care. Just keep it light, clear, and friendly to the inboxes that refuse to play along.
