Animated gifs in an email

On top of the great advice above, you may want to check out a post from our blog that goes into using animated GIFs in email:

https://litmus.com/blog/a-guide-to-animated-gifs-in-email

And you can definitely get GIFs to behave responsively, the same as any other image:

<style>
  @media screen and (max-width: 600px) {
    img[class="image-max"] {
      max-width: 100% !important;
      height: auto !important;
    }
  }
</style>

<img src="http://yoursite.com/animated.gif" width="500" height="200" border="0" alt="Witty copy" style="display: block; padding: 0; color: #666666; text-decoration: none; font-family: Helvetica, arial, sans-serif; font-size: 16px; width: 500px; height: 200px;" class="img-max">

Animated GIFs are the same as any other image, the only difference being: it's animated! They are not responsive by default, but you can use media queries to make them behave responsively. Based on Campaign Monitor's study, it's supported by most clients. Outlook 2007+ and Windows Phone 7 will only show the first frame of the GIF.

If you're making something fade in from nothing, I suggest making the last frame (the element completely visible) be the first frame of your GIF for 0.06s. I believe 0.06 is the shortest time you can set a frame to appear and have it behave the same in every browser/client.

As always -- smaller file size is better. Although there's no limit on file size, I think anything above 1mb for a single image is pretty outrageous in an email, but that's just me. Some ways to cut down on file size is to slice the image and make only the animated parts be GIF and the rest be JPGs. There are also image optimization software, like this, that can further reduce your file size.

We upload animated gif's directly to our image hosting. There is no coding difference from the email it-self. For optimal performance, we try to keep these files under 1000 KB

Here's an example of a fully responsive design that works across all platforms:
http://l.mail-dogfunk.com/YesConnect/HtmlMessagePreview?a=KCCyzeqxE06ehYGvDKqC-L
(resize your browser window to see the responsiveness :)

To see the gif only:
http://promoimages.backcountry.com.s3.amazonaws.com/email/df/22740/email1/gif1.gif

Happy coding!

A buddy of mine put together a great blog on animated gifs that actually mentions a Litmus email as one of the top examples. It breaks usage down into categories and gives some great inspiration. Check it out: http://www.emailcenteruk.com/blog/2013/05/10-best-animated-gifs-in-email/