A Guide to Animated GIFs in Email0
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.
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. 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.
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.
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.
Third, animated GIFs can pose a problem in terms of accessibility. 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.
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.
Test your animated GIF file-size + load time
With Litmus Checklist you can test your images for file-size, load time, and broken links. Plus, instantly see how your campaigns look in 70+ email clients.
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.
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:
- How to Create an Animated Email
- Build Animated GIFs in Photoshop
- How to Create an Animated GIF
- How to Create Your Own Animated GIFs the Easy Way
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.
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.
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!
This email from Moo shows how you can use an animated GIF to give your imagery a sense of depth. And all under 130kb!
MailChimp having some fun:
Uber adding some subtle touches:
Photojojo showing off some new products:
- Animated GIF Support in Email from Campaign Monitor
- Using Animated GIFs in Email from ExactTarget
- Make GIFs Work in Email from The Next Web
- Email Animation Articles from STYLECampaign
- The Ultimate Guide to Using Animated GIFs in Your Marketing from Hubspot
- Animation in Email is Alive from Lyris
- PNG, GIF, or JPEG? Which is the Best Image Format for Email?
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.