Tag Archives: Photoshop

Using Animated Gifs in Email

First off, let’s get the oldest question out of the way—how to pronounce Gif. According to Steve Wilhite, who invented the format, it should be pronounced “jiff.” You’d think that would settle the matter, but it only polarized the factions. Recently, no less than President Obama weighed in on the subject, pronouncing it with a hard “G” and saying he pondered the pronunciation a “long time” and that was his “official position” on the subject. Dictionaries don’t even try to settle this argument, listing both pronunciations as acceptable.

Almost as contentious as the pronunciation is the format’s value when it comes to using animations in email marketing. Jessie-Lee Nichols of Quintain Marketing lists three ways to use animated gifs in your email marketing, while Arienne Holland at Raven Internet Marketing Tools cites three reasons to not use animated gifs in your emails. In spite of the seemingly contradictory nature of these statements, they both make some valid points. Gifs can be valuable tools for increasing email engagement, sharing, and clickthroughs, but they can have the opposite effect, distracting from the message and annoying the viewer.

What’s My Motivation?

This question isn’t just for actors. It’s the first question any email marketer needs to ask before committing to the time and effort of creating an animated gif. Just because you know how to make them doesn’t mean you should automatically use them. There is always a temptation to test out new tools, especially flashy ones, but you should first ask yourself: “Is there any advantage to using an animated message?” You could also turn this question around and ask if there is any disadvantage to using a non-animated image. If the answer to either of these questions is no, then you might as well use a static image.

So what are the advantages of animated gifs? Here are the main ones:

  • To provide visual stimulus
  • To include more than one item in the same space
  • To show things not easily comprehended with static images
  • To encourage sharing

These are all good reasons, but let’s take a look at them one at a time.

Hey! Look At Me!

The most common reason for the addition of animated gifs to a mailing is to provide visual stimulation for the reader. Ideally, it should make them want to investigate further. It shouldn’t make them want to hit delete, but that’s what will happen if you make your gifs too busy. A well-designed gif will have just enough animation to entice the viewer into clicking the link. Here’s a good example from Bed, Bath & Beyond:
BB&B fans
The dog’s ears flapping in the breeze invoke an almost tactile response. We can feel the breeze just looking at the picture. If the viewer is in a hot room, this might be enough to provoke a purchase.

More importantly, look at the position of the dog—right in the center of the image with all the products and pricing information surrounding it. One of the biggest dangers of animation is that it can distract the eye from the primary message. Here’s one from the clothing retailer, Singer22:
email-marketing-singer22-2With all that activity on the left side of the image, it’s doubtful that anyone takes time to read the actual message. Fortunately in this case, the message isn’t that important, but it does demonstrate the effect an animation can have on where the reader looks. The problem is exacerbated by the fact that it is set up as a continuous loop. In highly active animation like this, one time through is enough. Let the animation end so that the reader can move on to the actual message.

The Above-the-Fold Advantage

Another common use of animated gifs—especially in the retail market—is to provide multiple images that cycle continuous in the mailing’s hero image. As it is with web pages and search engines, a certain percentage of the public never touches the scroll bar if they can help it. It’s always a good idea to make sure the main message is in plain view when the recipient opens the email, but suppose you are trying to present more than one item? You then are faced with the choice of stacking several images in the email and hoping that the reader looks at all of them, or creating an animated gif that cycles through the images. Here is an example from Andrew Marc:
andrewmarc1If you decide to use this technique, keep in mind that the choice of images should dictate the speed at which the images change. The default time that most companies use is one second, which is fine when you are dealing with variations on the same basic product, as is the case in the example above, but if you plan to show a disparate collection images, a slower cycle rate is recommended. Here is a particularly bad example from Levenger:
toofastanimationAlthough most of these products are related to iPad accessories, the images are as different as can be. With each image, the viewer must reassess the image to make sense of it, by the time the viewer has done this, the image has changed and the process begins again. If your gif is made up of images that have little or nothing in common (e.g., a red purse, followed by black shoes, followed by a blue shirt), one second is too short a period for the human eye to adjust to the differences between the images. Allow each image at least a second-and-a-half before changing. You can further soften the shifts between images by adding dissolves, but keep in mind that this will increase the file size substantially. A three image gif that is 200 Kb without dissolves, will balloon to over a megabyte when dissolves are added.

As if the rapid-fire changes in the Levenger gif weren’t enough, the gif includes five images. As a rule, it is best to keep these slideshow gifs to a maximum of four different images. More than that and you run the risk of losing the viewer’s attention. Three images is ideal.

So That’s How It Works!

When Dell introduced their new XPS 12 Convertible Ultrabook, they wanted a quick way to show the computer’s ability to switch from a laptop to a tablet. One option was to show the process in a series of images, but that meant the recipient would have to scroll through the email to understand how the device works—always a risky proposition. No single image could adequately explain the feature, so the decision was made to use an animated gif in the email.
Dell XPS12This approach works well in this instance. The final size is only 512Kb, which is remarkably small for a gif containing 59 panels.

Generating Buzz

When Netflix announced their second season of their series, House of Cards, they used an animated gif that proved to be so popular almost everyone who received it, forwarded it on to someone else:
Netflix House of CardsWhile we’re sure that the folks at Netflix knew they had a clever animated gif on their hands, we don’t think they knew it would end up canvassing the Internet like it did. Things like that are hard to predict and hard to plan for. Nine out of ten attempts at viral marketing fall short, but that has never stopped anyone from trying. The Netflix example has a slightly creepy quality and its motion is minimal enough to keep from being annoying, but it might have been a good idea to include their url or logo somewhere on the gif in case the image got separated from the original message (which is exactly what happened).

Cinemagraphs

The minimal use of motion is part of why the Netflix gif works. In all likelihood, a flashier, hyperkinetic gif would have had a less favorable response. The subtler approach defies the usual expectations of an animated gif. It is related to an animation form called a cinemagraph. In a cinemagraph, the action is often minimal and repetitive—a waterfall, or a breeze blowing a woman’s hair. The dog in the Bed, Bath & Beyond mailing certainly qualifies as an example of this. Here’s another example from Pizza Express:
animated gifThe animation is a small enough portion of the image to keep from being distraction, but is interesting enough to make you want to explore further. In their usual fashion, however, Pizza Express didn’t stop with the animation, but made sure the message got across even when the images weren’t displayed (see 2013: The Year in Email). For further information on cinemagraphs, Internet Marketing Specialist Shane Eubanks has several beautiful examples on his blog.

The First Frame Solution

There is really only one major email client that won’t display animated gifs. Unfortunately, that email client is Microsoft Outlook. Although older versions of the software will display animated gifs, every version of Outlook since 2007 stops at the first frame. A gif that brings out the details of a sale as it moves along, must be sure to start the animation with a zero time interval of the last frame before beginning the animation. In the example below (shown here without animation) Bed, Bath & Beyond used animation to show the details of their sale.
BB&B truck
Bed, Bath & Beyond was careful to start their animation with this final frame, so Outlook users got the entire message. The marketers at Kohl’s were not so careful. Here’s the first frame their version of a similar concept (a truck pulling details of a sale across the screen):

Kohl no animationSince Microsoft Outlook is the only major email reader that does not render animated gifs, it is conceivable to take advantage of this by providing an Outlook specific message as the first frame, although, in real world situations, this approach is of limited use.

Always Split Test

Even if you are positive that your animated gif will generate more clickthroughs and yield better results, we recommend that you split test it first. As the Marketing Team for the Obama campaign discovered during the last presidential election, what may seem like the best choice to you might not be the one that performs the best in the real world. You may have some emotional investment in that finely-crafted animated gif you spent an afternoon preparing, but the public may disagree with you. It is better to put the gif aside.

Creating Animated Gifs

So you’ve decided to try and create an animated gif, but where to start? If you have Adobe Photoshop, you can create animated gifs without much difficulty using the Timeline window. There are also several free online services that let you make animated gifs from a wide variety of file types with very little effort, however, most of these also attach their own watermarks to the gifs. Similar in functionality to Adobe Photoshop, Picasion is an online application that has a full set of editing controls and, most importantly, it doesn’t watermark the finished image.

Animated Gifs are a Spice

Animated gifs are a fun way to liven up your mailings and present information in a new way, but they also can have a numbing effect if they are used too often. A sprinkle of cinnamon on top of your latte is nice, but try eating a tablespoon of it. Occasional use of animated gifs can enhance a campaign’s appeal, but use them too often, or badly, and they will have the opposite effect. Also, never forget that engagement starts well before the first image is loaded. If the subject line isn’t compelling, or the recipient is indifferent to your mailings, it won’t matter how perfectly you’ve executed your animation. No one will ever see it.

Keeping It Together—Image Slicing vs. Image Mapping

Note: With the increasing use of a smartphones to read email, some aspects of image mapping that may affect their usability on older phones. Always test!

It is not at all uncommon to see the hero images in mailings sliced into several pieces. Email marketers have been using this technique for many years. If you normally first view your email with the images turned off, it is not uncommon to encounter an email with a table like this:

Blocked image view

Only to have the following appear when you click “Display Images.”

Email image version

There are some good reasons to slice an image into sections. The best ones are:

  • To provide text or barcodes within the image (see Using Text to Deliver your Message)
  • To provide animation without increasing the size requirements for the entire image
  • To reduce the image size for areas with only a few colors
  • To create informative alt tags for an infographic

But in most situations, slicing up an image leads to nothing good. It increases the HTML size and, since browsers only make a few requests at a time, it can slow down the rendering time for the image. When a single large image is requested, the data is sent continuously as fast as the server can send it, and with as much bandwidth as you or the server can provide. When there are multiple images, the browser can simultaneously request several of them at once—between 2 and 8 simultaneous requests are allowed from the browser at once, depending on the browser. But this is for all resources on the page, not just the images, so if you’ve split an image into 4 or more pieces, the browser must receive the first bit of data, then turn around and make another request for more data.  Each request has a round-trip time that mathematically must be longer than the time for a single request.

This process also creates more opportunities for problems to slip into the process. The finished image must be assembled in a table, and if any cell in the table has a problem, it can throw the entire image out of whack. We’ve all received emails with misaligned sections and unwanted gaps in an image where someone forgot to add style=”display: block;” to one of the img tags.

Forget What You’ve Been Told

Some people and even some email blogs recommend slicing up an image to help avoid loading problems in various email programs, but if the image really is big enough to create problems of this sort, it is already bigger than it should be. You would be better advised to reduced the size of the image using an image compression tool such as RIOT, which does a good job of dramatically reducing file sizes without much image deterioration.

The most common reason for sectioning an image is to assign different links to different portions of the image. But this is also the worst reason to section an image. Here’s an example of a hero image from a recent Banana Republic mailing:

Hero image

And this is how they sliced up the image:

Hero image sections

The reason? So that anytime someone clicked on any part of the man it would take them to the Men’s Department, while clicking on the woman takes them to the Women’s Department. They also wanted the text in the upper left to go to various departments and the background to go to the home page. Here is how the image is linked:

Image map areas

Green = Home Page, Pink = Women’s Department, Blue = Men’s Department

So how can you achieve the same thing without slicing your image into dozens of pieces? Try image mapping.

Email Image Mapping Comes of Age

You’ve may have read from past blogs and other sources that image mapping is problematic in email and you shouldn’t use it. “Don’t use image maps,” one website states bluntly. “They are not fully supported across all email clients.” While there may have been some merit to this argument a few years ago (that particular post goes back to 2007), today, image maps work virtually everywhere. Unless you happen to have an unusually large number of customers using Outlook 7, your recipients should have no trouble viewing or clicking image-mapped graphics.

Also, image maps can also cut down on the size of your email. The sliced image shown above required 112 lines of HTML and came in at 13Kb, compared to the image-mapped version, which required only 12 lines of HTML and took 2Kb. Here is the image map as it was applied to this picture using Dreamweaver:

Image Map shown

In this example, the image itself links to the home page, as do the “Bright New Arrivals” text at the top and “shop now.” The man and woman link to their appropriate pages.

There are a few idiosyncrasies in the different browsers, but nothing to warrant a blanket rejection of the technique. In Internet Explorer, the link in the image is disabled after the image is loaded. Only the image map links are clickable. The background image, however, will still respond to right clicks and show its alt tag information when the mouse hovers over it. In some cases, the empty image box of a blocked image is still clickable, but the image maps may not be. In our trials, once the image is loaded the image map is active and clickable in all cases. In Gmail, when viewed with Firefox, image-blocked email displays only the alt text of the image with the appropriate link—no box and no image-mapped links—but the image maps become active as soon as the image is loaded. Our test, done in April of 2013, yielded the following results:

Image map comparison chart

Keeping the caveats listed above in mind, we recommend the following as best practices when working with image maps:

Always assign a link to the base image

Yes, these sometimes disappear after the image is loaded, but they do help provide links in email clients where the image is blocked.

Don’t get carried away

The more complicated your image maps are, the more HTML is needed to render them. It is possible (although highly unlikely) to create an image map that is so complex that you’ll end up with an email file as large as the ones created by sliced images. The image maps shown above are not exactly simple polygons, and yet they still resulted in substantially smaller HTML files than the ones using sliced images.

Provide default link-mapped areas

In the case shown above, two of the image-mapped sections go to the same place as the image’s root link. In this way, if the browser does not respond to the image’s link after the image map is loaded, that page is still accessible. If we wanted to be really thorough, we could have blanketed the image with mapped links, but this is often overkill.

In 2014, it came to our attention that image maps were exhibiting some strange behaviors on smart phones. On iPhones, the image and the image map had to be restrained in a table to function properly, and on Android phones the image map was reducing to half its size, rendering it useless. Our recent tests have shown that these problems have been fixed. People using older phones might experience problems, however, so its a good idea to keep track of your subscriber base to make sure they are seeing your emails the way you intended. For more information on both image slicing and image mapping, download a free copy of our Email Image Linking Guide, which includes detailed instructions for creating images slices in Photoshop and image maps in Dreamweaver. Available here.

So go ahead and use those image maps. Are you using them already? Have you done any deliverability tests with image maps versus sliced images? We’d love to hear your findings. Is there a reason we haven’t addressed here why you do or do not use image maps? Drop us a line and let us know.