A Guide to Animated GIFs in Email

[ 49 By

Email marketers are always trying to improve their campaigns—through the use of copy, design, and images. They are always on the lookout for something to set them apart from the rest of the inbox and draw attention to their emails—enticing readers to click through and care about their message.

Many marketers are finding that adding interactivity is just the thing to increase subscriber engagement, and are increasingly turning to animated GIFs to provide that bit of extra interest.

What is a GIF?

The GIF, which stands for Graphics Interchange Format, is an image format developed by CompuServe in 1987. Due to wide support across browsers and email clients, GIFs have been a popular image format since the early days of the internet.

More importantly, though, GIFs can be animated. Similar to how a flipbook works, GIFs rapidly display a series of images to produce the illusion of motion. In the internet’s early years, GIFs (and the marquee and blink tags) were the primary method of adding movement to a web page.

A lot has changed since the 90s. Animated GIFs are enjoying a renaissance both on the web and in email marketing. While there is still some debate as to how you actually pronounce “GIF”, most will agree that GIFs can be an excellent marketing tool. Whether you prefer a hard “G” or like to rhyme GIF with a certain brand of peanut butter, let’s look at why GIFs are so useful in email campaigns.

Why Use a GIF?

Using an animated GIF adds an element of delight to a campaign that isn’t typically possible with static email designs. A number of campaigns use animated GIFs for humor, and do so with great success. Buzzfeed, a strong proponent of embracing the GIF, has seen their email program grow from a single newsletter in 2012 to 14 different newsletters at the end of 2013.

Retailers have also made great use of GIFs by showcasing products and enticing readers. Women’s clothing shop Ann Taylor LOFT used an animated present to create a sense of intrigue and get subscribers to click through to “unwrap” their gift.


Often, this bit of movement is enough to surprise a reader and get them to click through to a landing page.

But animated GIFs can be used for more than just gimmicks and humor. Along with last year’s redesign, email service provider MailChimp used animated GIFs in a series of emails to help explain their drastically redesigned interface.


Instead of relying on lengthy blocks of copy to explain the new interface, animated GIFs showed how the application works, effectively acting as a miniature “explainer” video, and leaving no room for confusion amongst customers. Naturally, many were pleased with the campaigns:


Sprout Social also recently used a GIF to show off the interactions of their redesigned iPhone app.


Even if you don’t provide full tutorials in GIF form, animated GIFs can be used to illustrate complex concepts in an easily digestible manner. This email from Code School is a beautiful example of illustrating a complex idea—all the things you can do with Google Drive.


Drawbacks of Using a GIF

As great as animated GIFs are, there are a few drawbacks with including them in email campaigns.

First, not every email client supports animated GIFs. Newer versions of Outlook (2007, 2010 and 2013) won’t show the animation. Instead, they will show the first frame of the animation. To overcome this, many email designers ensure that vital information—perhaps a call-to-action, offer, or headline—is included in the first frame of the GIF. Windows Phone 7 also lacks support for animated GIFs. Even with these missing clients, though, support for animated GIFs is better than support for most CSS.


Second, if used too aggressively, it’s likely that many subscribers will become complacent with your GIFs and stop paying attention to them. Used sparingly, animated GIFs can surprise and delight subscribers. Used too frequently, the same subscribers may tire of them and become less likely to engage with your campaigns.

Finally, animated GIFs are prone to excessive file sizes. In an increasingly mobile world, file size can play an important part in any email program. Extremely large GIFs both cut into subscribers’ data plans and can be slow to load and play—both of which are frustrations that no audience should have to deal with. Fortunately, there are a number of methods for creating GIFs and reducing their file size.

Creating a GIF

While there are many tools available for creating GIFs, the go-to application for most designers is Adobe Photoshop. Photoshop has a number of ways to create animated GIFs, including frame-by-frame animation, timeline animation, and importing video frames. More importantly, designers have the full power of Photoshop’s graphics tools at their disposal when crafting their next great GIF.

Frame-based animation in Photoshop.

Frame-based animation in Photoshop.

Envy Labs’s Dan Denney has an excellent tutorial on creating advanced animations with Photoshop, including an example PSD for download to see just how he accomplishes his animations.

Timeline animation in Photoshop.

Timeline animation in Photoshop.

Not everyone has Photoshop chops, though. Many marketers and designers need to make GIFs out of existing video footage. While you could use something like Adobe After Effects, tools exist for most platforms that make GIF creation easy. On Mac, many people swear by GIF Brewery. Windows users can take advantage of programs like Instagiffer and GIF Animator. If you’re looking for online tools, there is no shortage of web-based GIF creators. There are even apps on mobile that can help you create GIFs!

Here are some more tutorials on creating GIFs to get you started:

Saving a GIF

No matter how you create your GIF, the key to incorporating it into an email is keeping the file size to a minimum. While there are a few compression tools for decreasing the file size of GIFs, the best optimization happens when you can alter the file in a program like Photoshop.

Using Photoshop, you can dig into the individual frames of an animated GIF and prune them to keep your file sizes down. Some good ways to optimize GIFs include:

  • Cropping. Keep your focus on what is animated, cropping the image as much as possible to reduce the file size.
  • Removing frames. The human eye doesn’t need a lot to see motion. You’d be surprised by how many frames you can remove from a GIF while still maintaining the illusion of motion.
  • Only animate part of the picture. Don’t force the entire image to redraw itself in every frame. Use layers in Photoshop to isolate animated parts and only animate those layers.

Designer Paul Boag has an excellent article on his blog about optimizing GIFs made with Cinemagram in Photoshop. Livejournal user skylilies has another great tutorial on optimizing GIFs in Photoshop.

When it comes to actually saving your GIFs, one of the best ways to reduce file size is to reduce the number of colors actually saved in the file.

GIF options in Photoshop.

GIF options in Photoshop.

Drastically reducing the number of colors used in the image can reduce the quality of the saved GIF, but finding a good balance between quality and file size is a great way to ensure your GIFs work well across devices.

Using GIFs in Email

Once you have your optimized GIF, you need to include it in your email. Fortunately, this is the easiest part of the process. Since GIFs are just another image file format, you can include an animated GIF the same way as any other image in your email.

<img src="http://yourwebsite.com/path/to/awesome.gif" width="100" height="100" alt="GIF with a hard G" border="0">

Email Client Support

While animated GIFs don’t work everywhere, support across most email clients is exceptional. Animated GIFs work in all webmail clients and most desktop and mobile clients. The main exceptions are newer versions of Microsoft Outlook (2007+), which refuses to animate the GIF and instead displays the first frame of the animation. The same goes for Windows Phone 7.

Apart from that, you can see that animated GIFs work beautifully on all other clients.

Desktop Clients


Lotus Notes (6, 7, 8.5)


Outlook 2000-2003


Outlook 2007-2013


Outlook for Mac


Apple Mail

Webmail Clients









Mobile Clients


iOS Mail


Android (Default)


Android (Gmail)




Windows Phone 7

Some of Our Favorites

Now that you have a good idea of how to use GIFs in a campaign, here are some of our favorite GIFs we’ve seen in campaigns recently. Click on any GIF to see the full emails.

General Assembly always has cool, custom GIFs. I stay subscribed mostly to see what they come up with next!

Emma shows off a wonderfully dynamic GIF. Check out the whole email for more!


Explainer GIF from Campaign Monitor:


Frank Underwood expertly used by Netflix:


MailChimp having some fun:


Uber adding some subtle touches:


Photojojo showing off some new products:


Further Reading


Subscribe to our newsletter and receive tips, tricks, stats and helpful advice packaged in a beautiful monthly newsletter.

  • http://mailrelay.com/ Jose Argudo

    Great tutorial! and great examples of using GIF in email! It seems a good option to make emails more interesting with better support, usually, than using vídeo, for example.

  • Jaina

    I’d really love to use animated GIFs in emails but my main issue always seems to be justifying why I have to have something animated. It’s easy just to say – “let’s animate this”, but harder to ask the question as to why it should be animated and what benefit the animation gives to the customer.

    • Jason Rodriguez

      I definitely agree that an animation should have some reasons behind it, which is why I especially love the tutorial-like GIFs that MailChimp and Sprout Social did. That being said, I love the occasional GIF that has no other purpose than to surprise and delight. I’m looking at you, Netflix.

      • Jaina


        Another thing I struggle with is figuring out what to have as the first frame. To ensure it’s something valuable to customers who can’t see the animation. Invariably.

    • Christopher Payne

      Sometimes there is more than one potential call to action on a email (multiple buttons). I use animated GIFs to announce which one Marketing is pushing while giving everyone the link they want (within aesthetic reasoning of course).

  • Mark Robbins

    Some great images there. That House of Cards one is great but 1.7MB Ouch!

    Looking at the Scope it appears they’re loading a separate image for Outlook, which is a good idea to save on that MASSIVE load time.

  • http://scottohara.me/ Scott O’Hara

    when i see animated gifs in emails, i know right then and there that the sender of the email is begging me to report them as spam.

    and i always give in.

    • AdMMM


  • Dennis, ListsUK

    Informative & comprehensive post, Jason – thanks.

    Whilst gimmicks used badly in any marketing are annoying, if used intelligently and effectively, adding to the creative, they cease to be a gimmick and become a real bonus; I defy anyone’s attention not to have been caught by the Netflix one (in fact, I keep scrolling back up to catch the look he gives!) and the ever-so-slightly shaking present is very clever – good marketing.

  • Pingback: Design | Annotary()

  • http://twitter.com/danielmorgan Daniel Morgan

    I’m biased, but Tumult Hype is also a good tool for quickly making animated GIFs for emails: https://www.youtube.com/watch?v=aIVeEuRBCFE

    One thing I would add to this tutorial is that it’s a good idea to run your images through this tool to optimize for file size: http://imageoptim.com

  • http://www.digitalresponse.es/servicios-email-marketing Alejandra Castellano

    I love GIF in email when it is strategically used. One of my favourite uses is when you have to communicate changes in a product and you can do it just by placing a GIF. It is also great introducing new products, when you can explain visually the main advantage. Here is an example:

    Thanks for the article 😀

    • Steve Wages

      That’s a great use of it…agreed.

  • Laurie Paola Rubinetti

    Great article, but what is the suggested maximum file size for an animated gif for email? Does anyone know?

    • http://www.litmus.com Justine, Litmus

      We’ve heard lots of differing recommendations—it’s one of those scenarios were knowing your audience is key. If there are lots of folks reading on mobile, it’s probably a good idea to keep image sizes as tiny as possible. Desktop users will have some more bandwidth. As Mark notes below, the Netflix .GIF above is on the larger side, at 1.7MB, which is definitely on the heavy side. Jason also provides some great tips for getting the file size down.

      • AndrewCrocker

        I thought spam filters kicked you out after images totaling a certain size. Is that no longer the case?

        • http://www.litmus.com Justine, Litmus

          Not a standard/regular practice, although some filters may be configured to have file size/image size limitations.

    • Steve Wages

      We’ve been trying to keep them under 500KB because of so many folks opening on mobile. I’m curious if others have a rule of thumb…

  • Pingback: Tweet Parade (no.14 Apr 2014) - Best Articles of Last Week | gonzoblog()

  • Heather Hatcher

    I used this and it worked wonderfully! But once I posted it on my blog(tumblr) it only used the first frame and did not at all move. How can I fix this? (: Thank you.

    • http://www.litmus.com Justine, Litmus

      Hi Heather—our article is about using animated GIFs in email (rather than on the web or on blogs). I’d recommend doing some research on animated GIF support for the browser you’re using.

  • leaart12

    Hi, I just received the email from Litmus about its email design conference and saw the animations used in the email. I was wondering how the expanding text was done. I saw that part of the email actually expanded with more information once I opened it.

    • http://www.litmus.com Justine, Litmus

      We used CSS3 animation in the recent conference “Save the Date” email. We’ll be posting another article about the techniques used in that email soon!

  • http://planwise.com/ Kira Thompson

    I love gif in emails and think they are catchy but can also be very instructional.

    I’ve created my own in Photoshop, which have turned out fine, but I need to be able to convert ScreeFlow demos of our tool into gifs. I tried about 6 different options and wasn’t happy with the results until I finally bought GifBrewery. It was extremely easy to use and produced amazing quality gifs!

  • Robert Evans

    Of course windows doesn’t support any of the cool “new” features!! Get it together Microsoft!

    • http://breakthroughapps.com John Mitchell

      So true!

  • Pingback: Entre autres sur le net #3()

  • http://weibo.com/ajaxlogin.php?framelogin=1&callback=parent.sinaSSOController.feedBackUrlCallBack zili liu

    乘古 自力 刘 刘自力有限公司2014 年 4 月 26 日

    • http://goolara.com JimAtGoolara

      这仅仅是一个广告消息。 😉

  • Dirk Plantinga

    If we use Litmus to test our emails, will the animated gif render in the screenshot…?

    • Steve Wages

      Nope. We just did one and it’s a total roll of the dice which frame of the GIF you get in each screenshot

  • vaev

    Ye ole past time of .gif making is back! Time to dust off the ole Adobe ImageReady 7.0… I kid, I kid!

  • Pingback: Video in Email? Here is What You Need to Know | WORTH SEO PANDA()

  • http://www.gif-king.com/ Chihiro Tanno

    really great idea to make gif email and looking also good or attractive..
    find out here more gif images at http://www.gif-king.com

  • pieru

    Great article! I want use this at http://www.gopesca.it

  • Petter Engelbertsson

    Thanks for a great article. I’m trying to use .gif still pictures (not animations) in my e-mail template, but they won’t show in Outlook 2007-2013 (desktop clients). Why is that? Shouldn’t Outlook show the “first frame”, i e the still picture?

    • http://www.litmus.com Justine, Litmus

      Static GIFs should definitely work in Outlook! Hard to tell what’s going wrong without seeing your HTML. Can you post your code over in a new Code Question in the Community? https://litmus.com/community

  • disqus_XmXrnwJrU8

    Should also mention that different browsers have different frame rates when playing animating gifs.


  • Leon Suffice Elless

    What about this:
    If in Photoshop, have the last frame as the first frame as well, but set the “Delay” on the first frame to “No Delay”.

    • Leon Suffice Elless

      Whether your animation is to only play through once or loop more than once/forever, you’ll probably get a slight flicker, dunno…try it.

  • Pingback: Im Warenkorb durch Bits und Bytes - Die Warenkorb-Dokumentation()

  • Pingback: Email Design Best Practices - 20 Tips | Teach to Fish Digital()

  • http://ecommercecosmos.com/ Luiz Centenaro

    Incredible inspiration for designing amazing emails. Thanks for the point on including a CTA on the first frame of the GIF.

  • Pingback: 4 Exemplos de como usar GIFs em email marketing()

  • Pingback: GIF in Email – Fortifying clickthrough rate up to 26%()

  • Pingback: 8 Photoshop UI Animation Tutorials | SmashingApps.com()

  • Pingback: Hey Mark, from your expert design perspective what would you suggest to invigorate/give some more depth/texture/syle to our email template? | Mark Cormack()

  • http://www.animonks.com Narasimha Reddy Kovvuri

    soo true. The samples are cool. GIFs are a trend in 2015. A lot of online marketers are using them now a days. You can check http://www.gifficons.com for free GIF icon animations for online marketers.

  • Pingback: How to Make Animated GIF Screencast Videos for emails()