A Guide to Animated GIFs In Email

January 9, 2020

By Jason Rodriguez

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 animation is just the thing to increase subscriber engagement, and are increasingly turning to animated GIFs in email to provide that bit of extra interest. In 2018, 56.6% of email marketers said that they’re using animated GIFs at least sometimes in their marketing emails.

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.

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, trigger their interest, and get them to click through to a landing page. We used this trick in this email to promote our 2018 Email Client Market Share infographic. You can check out the full email and its code here.

But animated GIFs can be used for more than just gimmicks and humor. Email service provider Mailchimp used animated GIFs in a series of emails to help explain its 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 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.

Support

First, not every email client supports animated GIFs. Outlook 2007, 2010 and 2013 won’t show the animation. Instead, they will show the first frame. 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.

Overuse

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.

Accessibility

Third, animated GIFs can pose a problem in terms of accessibility for a variety of reasons. Content flashing rates between 2 Hz and 55 Hz can harm users with photosensitive epilepsy. In addition, users who are visually impaired may have difficulty reading or reviewing content on a GIF before the animation changes. So ensure your animated GIFs either have smooth transitions or don’t animate from one frame to the next at a high rate.

And, since GIFs are image files, you should always include appropriate alternative text for users that rely on assistive technology like screen readers. Images are inherently inaccessible for a lot of users, so providing copy and context allows them to understand your message more clearly.

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.

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.

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.

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 Microsoft Outlook 2007, 2010, and 2013, which all refuse to animate the GIF and instead displays only the first frame of the animation.

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

Animated GIF Alternatives

While animated GIFs are an email marketing mainstay, the limited support and potentially time-consuming nature of GIF creation could scare off some marketers. For those looking to add motion to their campaigns without animated GIFs, a few alternatives do exist.

The first is using animated PNG files, or APNGs, like we did in one of our own recent email campaigns. Animated PNGs work similar to GIFs with the added bonus of better support for transparency. While GIFs can be transparent, they typically introduce a white outline to graphics that can stand out on darker backgrounds. APNGs, on the other hand, work brilliantly with transparency and can be an ideal solution in certain situations. Unfortunately, APNGs have more limited support than animated GIFs, although that will likely change in the future.

Another alternative is using CSS animations in place of GIFs. Using simple CSS properties, you can animate a variety of HTML elements and images alike. While CSS animations can get unwieldy for more complex animations, for things like hover effect, slide-ins and fades, and simple movements in an email, they can be a lighter weight solution than GIFs. Plus, CSS animations fallback more gracefully than animated GIFs when support is lacking. For a more in-depth guide to CSS animations in email, check out our post on understanding the two key CSS properties for animation: transitions and keyframes.

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!

ThirdLove embraces all kinds of underwear.

Boys & Girls Clubs of America use GIFs to get clicks to a 2019 recap video about how they’re helping kids.

DPDK agency uses animated GIFs for calls-to-action to draw attention (and hopefully, clicks).

charity:water combines animated GIFs with cool, illustrated infographics for a beautiful campaign.

This email from Moo shows how you can use an animated GIF to give your imagery a sense of depth. And all under 130kb!

Photojojo showing off some new products:

Further Reading

GET MORE EMAIL TIPS AND RESOURCES, STRAIGHT TO YOUR INBOX

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