How to Insert and Use Animated GIFs in Email Newsletters

Email DesignNataly Birch • August 26, 2021 • 6 minutes READ 

The web is teeming with websites where videos, CSS dynamic effects and WebGL-powered animations are running the show, but what about the email newsletters? In the majority of cases they are created with HTML and CSS looking almost like a mini version of a landing page, in fact, the situation is cardinally different. All the listed above technologies are good when it comes to web pages, but when it comes to email newsletters, they are useless.

• Videos are widely unsupported by email readers, unless subscribers use Apple Mail, iOS 10+ Native Client, Samsung Galaxy Native or Thunderbird.
• CSS dynamic effects are highly recommended as an alternative toJavaScript-driven effects, but don’t have proper support in user mail agents.
• JavaScript is forbidden, so no WebGL whatsoever.

What should you do if you are sick and tired of static email newsletters and want to add some dynamic zest to the experience? The answer may be surprising: Use GIFs.

Nasty Gal The Blackout Sale

GIFs are with us, like forever. Being widely overused by popular entertaining portals, GIFs are mostly associated with cats, celebrities and some ridiculous situations. However, they still have serious potential that turns into an advantage in email newsletters.

Animated Gifs in Email Newsletters

GIFs seem to be the only valid way of enhancing email newsletters with some action. Being a regular image format much like JPEG or PNG, it works almost in every email client. And if it does not work, the email will still show the first frame so that subscribers won’t be confused.

Animated GIFs are used to:

• Create a sense of intrigue
• Add an element of delight
• Trigger interest
• Add humor
• Visually support a message
• Make the newsletter inviting and friendly

With GIFs, the scope of use depends on your imagination. GIFs are great for adding diversity and enriching the user experience. As the recent studies show, they can increase chances of getting a better click-through rate.

Kate Spade Newsletter

What’s more, it is incredibly easy to incorporate them into a newsletter, especially if you are using an online HTML builder like Postcards. Its intuitive interface lets you add GIFs in seconds without writing a single line of code. There is even a small tutorial that will show you how to add GIF and make your email newsletter look professional and engaging.

However, you can’t just blindly rely on GIFs for every occasion. You may end up with a decline in subscription rate or even worse, an increase in the unsubscribe rate.

When to use GIFs

First, make sure that you correctly define a targeted audience. Check these things:

• Support of email clients
• Age of the audience
• Audience preferences

When you are ready, unleash the power hidden inside every little looped animation. Use them to:

• Show new features using visual cues instead of lists
• Show interactions to engage customers
• Illustrate difficult ideas to make complex concepts look simple
• Promote products in an unobtrusive manner
• Keep interest
• Simply engage customers

GIFs can be the right choice.

Pitfalls of Using GIFs in Email Newsletters

Much like anything else, GIFs have limitations and pitfalls. There are several issues that you need to take into account.

Before sending an email newsletter packed with GIFs, make sure that your subscribers have an opportunity to enjoy them. First, consider support of email clients. The good news is that the majority of email readers, starting with Outlook and ending with Apple Mail, support GIFs. There are some exceptions such as Outlook 2007-2013, but they still will show the first frame.

Another thing to consider is size and weight. In the world with numerous spam filters and people who are not willing to wait for a page to load more than 3 to 5 seconds, the size of the GIF plays a crucial role. If it slows down the performance of newsletter, chances are subscribers will turn it down.

Other pitfalls of using GIFs:

• As an image format, it can be blocked by spam filters.
• It won’t start to play until it is fully loaded, if subscribers have a slow internet connection it can cause problems.
• GIFs are widely overused; stick to one or two in your email because a large number can easily kill the entire experience.
• It can be inappropriate for the audience; exercise caution with GIFs since some people may consider this style offensive.
• Slow down the performance; static email newsletters are faster and more efficient than one that contains animations.
• Abrupt transitions or coloring can cause some people to experience difficulties in perceiving GIFs.

These obstacles are not insurmountable. You can efficiently deal with them on your own.

How to Overcome Obstacles

If you want your GIF to bring benefits to your campaign, here is some advice to stick to.

• Know your audience. If a GIF is not appropriate, then do not use it.
• Do A/B tests first. Sometimes your vision of the situation can be misleading.
• Use one or two GIFs at a time. Overusing is bad.
• Do not overdo. Pick only vital frames. GIFs are not videos, remember that. The animation should take several seconds, not a minute or more.
• Make it as lightweight as possible. Here you need to deal with a number of change layers, not the whole scene.
• Stick to the point. There is no time to beat around the bush; include only the key aspects.
• Focus on the first frame. Since some versions of Outlook refuse to show GIFs and display only the first frame, make it informative.
• Make the most out of ALTs. Since this is an image format, there will be subscribers who do not want to see images in their inbox. ALT is your lifesaver if an image display goes wrong.
• Not big, not small. The standard width of an email newsletter is 600px. The layout is responsive and will shrink in mobile screens.
• Ditch the idea of creating a retina version. It will crash and burn in your user’s mailbox.
• Go for custom GIFs. If you do not have time or money, then you should be very careful with the choice. With free GIFs, there is a big chance your audience has seen it already a million times.

Steps to Create GIFs

Runtastic Email

It doesn’t take much time and money to create a GIF for your next email newsletter. There are so many tools out there that will help you to build one.

• Adobe Photoshop
• Adobe After Effects
• GIF Brewery
• PhotoScape
• Microsoft GIF Animator
• Instagiffer
• GIF Animator
• GifApp
• Picasion
• Giphy
• COM and more

Some of these above options are premium pieces of software, but others are free to use.

Step 1: Choose one that fits you best.

Step 2: Focus on an idea. Choose only things that will help convey the message and get to the point. Do not include a CTA inside since it can get lost if the image is blocked. Place it somewhere nearby or connect your GIF to the video or landing page via a link tag.

Step 3: Optimize the result. Decrease size, play with color, animate only the part of the scene and experiment with the quality of an image.

How to Add GIFs to an Email Newsletter

Adding a GIF to an email newsletter is a piece of cake. If you are not a tech-savvy person, then it is most likely you are using a marketing platform or online HTML email newsletter builder like Postcards. If so, use the handy drag-and-drop interface where you can add GIF just by clicking on “Upload” or “Change image” button. In the panel, you can change size as well as add backlink and ALT.

If you are familiar with coding, then <img> tag is your friend. Being a regular image format, GIF does not differ from any other formats such as JPEG or PNG. Do not forget to add “alt” and style it to make it work consistently across numerous devices.

Conclusion

GIFs can be a powerful tool in email marketing. They can bring diversity to the design, enrich user experience, reinforce the message, increase CTR and separate your email newsletter from others. And with all that, they work well across numerous email readers. Of course, there are some pitfalls, yet all of them can be easily overcome.