A Guide to Animated GIFs in Email

[ 0 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.

LOFT-unwrap-animation-repeat

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.

mailchimp-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:

mailchimp-tweet

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

sprout-social

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.

codeschool-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.

jack-spade

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

check-green

Lotus Notes (6, 7, 8.5)

check-green

Outlook 2000-2003

check-X

Outlook 2007-2013

check-green

Outlook for Mac

check-green

Apple Mail

Webmail Clients

check-green

Gmail

check-green

Yahoo!

check-green

AOL

check-green

Outlook.com

Mobile Clients

check-green

iOS Mail

check-green

Android (Default)

check-green

Android (Gmail)

check-green

Blackberry

check-X

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!

emma-eight

Explainer GIF from Campaign Monitor:

campaign-monitor

Frank Underwood expertly used by Netflix:

frank-compressed

MailChimp having some fun:

mailchimp-experiment-compressed

Uber adding some subtle touches:

uber

Photojojo showing off some new products:

photojojo-compressed

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.