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