New Ideas for Using Animated GIFs in Email

Adding a bit of movement into an email can bring the message to life and elevate your email marketing. As these five brands have shown us, GIF hero image designs wow the recipient into checking out what an email has to offer.

But there are some other ways a GIF can enhance an email. In this post, we’ll cover some different uses for animated GIFs in email and how you can implement them in your next email campaign.

It’s important to consider the types of images you use in an email, as well as the overall weight of an email’s HTML and its loading speed. A slower load time could mean lower engagement from your subscribers.

There isn’t a hard-and-fast rule on the maximum size of a GIF in email, but the higher the file size, the longer it will take to load. Aiming for under 200kb is a good rule of thumb.

With most readers receiving email on their smartphones, you should consider loading time on mobile networks (although many readers are able to connect mobile devices to WiFi). If your readership is mainly desktop, why not try out some bigger GIFs to see how they do?

Nike sent a campaign with a 2.7mb GIF:

Email on Acid’s Campaign Precheck includes an image optimization feature that allows you to see if your images are too heavy. It also lets you optimize the image with one click, then host it or download it to include it in your email.

Now that it’s only older Outlook clients that don’t support GIFs, it’s worth exploring some more options for animating images throughout an email. If you have a lot of subscribers using older Outlook clients, check out this handy hack to show a specific static image to these clients.

Animated GIFs aren’t just for hero images anymore. Check out these different methods for using GIFs in your campaigns.

Adding an arrow or character beckoning a user to carry on scrolling is great for longer emails, or to draw attention to a specific module.

Fans of the Harry Potter films and books have probably imagined adding real-life movement to photographs.

These animated images could have many applications, from e-commerce to entertainment. For example, you could experiment with adding a subtle spinning movement to a model wearing the clothing you are selling. This can give the email recipient a little more information and a full 360º view of the product, increasing the chance of a click.

Adding moving text to images is a cool way to add a signature or interesting element to a message. If you use this technique, be sure to include a separate static image or include all the text in the first frame to accommodate older Outlook clients. Also, don’t forget to include descriptive alt text.

Check out the code for this “Thank You!” message, including a fallback static image.

Using background image fixes to cover as many email clients as possible, you can include an animated GIF in place of a static image to add some movement behind your content. The fallback for these images is the same as a normal GIF, so only the first frame will show if the email client doesn’t support animated GIFs.

View the full email online.

By adding a small bit of movement or encouragement to a CTA (a crucial part of your email), you can draw attention to an action you would like the recipient to make.

Find the code for this button on codepen.

Adding movement to an otherwise static image can make a photo more engaging and effective. Using this type of image adds a bit of intrigue into an email (“Did that just move?”) by adding subtle movement. This technique can increase the reading time and encourage readers to scroll on to see more.

Don’t forget you can also use GIFs to add some character to an otherwise formal email or use it to enhance your brand style and voice.

Creative Boom, an international graphic design blog, has a set of eyes that follow you around their website. They bring this fun technique into their email, as well, by placing it subtly within the footer.

Pizza Express uses dough ball characters that appear throughout their kids’ menu, company website and social media channels. So, bringing these characters into their email is a great way to enhance the brand.

As we’ve seen in these examples, including more movement in your email can encourage longer reading time, highlight important areas of your email, or enhance your branding.

How do you use GIFs in your emails? Share with us in the comments section below!