Let’s settle this right here, right now… Jif is a brand of peanut butter.

GIF is a hard G—it stands for graphics. GIF is an acronym for “Graphics Interchange Format”. Essentially, it’s a sequence of bitmap images (as opposed to SVG animations, which are a sequence of vector based images).

Animated GIFs are a simple, flexible, low-risk way to communicate a complex idea (or even emotion) in a short amount of time.

In essence, an animated GIF is a brief, lightweight and portable video (without sound). They’ve been around since the 80’s and are, nearly, universally playable. They’re a useful tool for presenting a series of information, ideas, or processes.

If done well, GIFs can also render video footage in its simplest terms and still make sense—an effective previewing device for videos on the web.

why make animated gifs in email marketing?

In the context of email, animated GIFs are less used for entertainment and more often used to grab attention, add whimsy, and call the viewer to an important point in the email.

They’re also an effective stand-in for incorporating, what appears to be, video in an email.

Animated GIFs are perfect for the short attention span generation.

Pacing is important to communicate your idea(s) quickly and grab the viewer’s attention; however, it is equally important to leave enough time (on a frame) for key points to register in your viewer’s mind.

so many tools to use

The spectrum of tools for creating animated GIFs in email marketing ranges from utilizing the built-in animations of Keynote, to masterfully creating uber-complex animations (think: exponentially changing motion) in After Effects. In the middle of this spectrum is Adobe Photoshop, and it’s probably the de facto tool for this kind of job (especially now that Fireworks and Flash are a thing of the past).

Main points to consider

• File size
• Dimensions
• Limited color palette
• Number of frames (fewer is better)

The ultimate goal is to strike the balance among the dimensions, color palette, and frames, all of which have direct bearing on the final file size.

file size is king

With deliverability, mobile data throughput speeds, and ESP limitations in mind, the target max file size for animated GIfs in email marketing is a major consideration.

For WhatCounts customers, 300 Kb is the max file size.

Most ESPs have image file size limitations around 200 to 300kb. There are sometimes ways to work around these limitations, depending on the ESP.

One way, for instance, is to use an alternate hosting method for that asset.

That way, there’s no limit to the asset size, but, as mentioned before, deliverability and mobile data throughput speeds must be kept in mind

another dimension

Dimensions of an animated GIFs in email marketing can go from full email width (often 600px), like for a hero or promo banner, to the range of 200px to 300px wide for a supporting inline element.

This is not the time to go for retina resolution—it exponentially increases file size.

If you do use retina resolution sizing, you will have to sacrifice frames and/or colors to keep to your target file size.

limit color palette to the essentials

GIFs only allow up to 256 colors.

The goal here is less, way less. Using flat design inherently reduces the color palette while also giving the appearance of clean, vector-based elements.

However, you can still incorporate and mix in photographic elements or be completely based that way. Creativity plus experimentation is key to determining the limits of your animation.

Limiting the colors will also help to establish the overall mood of the animation.

number of frames

Keep in mind the pace of the animation beforehand.

Before animating movement, start off with key frames and resolves, then build up the in-between states, adding in more in-between states, only if necessary. This way you’re progressively building the animation, and not wasting time or file size.

Blur in-between frames for a more dramatic effect and a smoother looking animation. It will incur some file size increase, but probably not so much that it exceeds your target file size.

seamlessly loop

You want to make sure your viewers catch every point of what you are communicating in your animation. Making your GIF loop seamlessly will enable this, especially if their attention hasn’t registered until the middle portion of the animation.

Each time through, viewers may catch something they didn’t see before, which helps to convey more of the idea or story behind the animation.

You can set the animation to loop indefinitely or for a determined number of repeat experiences.

If the first frame of your completed animation matches the last frame, I recommend omitting the last frame, preventing any apparent hesitation that occurs when two identical frames are encountered.

Set frame duration time instead of repeating frames to remain on a salient point or frame. To keep file size to a minimum, reducing duplicate frames is a must and easy win.

strategically determine areas of animated effect

Less is usually more.

Confine animated GIFs in email marketing to limited areas. Every element in an animation doesn’t have to move for the animation to be effective.

This idea will also help reduce file size significantly. The less an individual pixel has to change, the better (for file size).

Cinemagraphs are great examples to illustrate this idea.

conclusion: the last shall be the first

When arranging frames in an animation, keep in mind most Outlook clients will only display the first frame of an animated GIF, so be sure to place the last frame first in Photoshop once you’ve worked out your animated sequence.

This should also help you to create more seamlessly loopable animations by adding any in-between frames needed to bridge that last, now first, frame flowing into its subsequent frame.

Need help making sense of these little animated wonders? We’ve got experts on our team who’ve been around the block a few times when it comes to animated GIFs in email marketing and know this stuff like the back of their hands. We’re here to help… just reach out.