Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps
Adding some movement to an email can bring the message to life and improve your email marketing. As these five brands showed us, GIF hero image designs engage the recipient and entice them to check out what an email has to offer.
But there are 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 incorporate them into your next email campaign.
Size for GIFs in emails
It's important to consider the type of images you use in an email, as well as the overall size of an email's HTML and its loading speed. A slower loading time can mean less engagement from your subscribers.
There is no hard and fast rule for the maximum size of a GIF in email, but the larger the file, the longer it will take to load. A good rule of thumb is under 200 KB.
Since most readers receive email on their smartphones, consider loading time on mobile networks (although many readers can connect mobile devices to Wi-Fi). If your readership primarily uses desktop computers, try out a few larger GIFs to see how they perform.
Nike sent a campaign with a 2.7MB GIF:
Email on Acid's Campaign Precheck includes an image optimization feature that helps you determine if your images are too large. It also lets you optimize the image with one click and then host or download it to insert into your email.
What about Outlook?
Since only older Outlook clients don't support GIFs, it's worth exploring more options for animating images in an email. If you have a lot of subscribers using older Outlook clients, check out this handy hack to display a specific static image to those clients.
Ways to use an animated GIF in emails
Animated GIFs aren't just for hero images anymore. Check out these different ways to use GIFs in your campaigns.
Encourage the recipient to scroll
Adding an arrow or sign that prompts the user to scroll further is great for longer emails or to draw attention to a specific module.
Bring static images to life
Fans of the Harry Potter films and books have probably already imagined adding real movement to photos.
These animated images can be used in many areas, from e-commerce to entertainment. For example, you could experiment with giving a model wearing the clothing you're selling a slight spin. This can give the email recipient a little more information and a full 360-degree view of the product, increasing the likelihood of a click.
Funny typography
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 put 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 static fallback image.
Moving backgrounds
Using background image fixes that cover as many email clients as possible, you can insert an animated GIF instead of a static image to add some movement to your content. The fallback for these images is the same as for a regular GIF, so only the first image will be displayed if the email client doesn't support animated GIFs.
View the full email online.
Calls to action
By adding a small motion or encouragement to a CTA (a crucial part of your email), you can draw attention to an action you want the recipient to take.
The code for this button can be found on Codepen.
cinemamovies
Adding movement to an otherwise static image can make a photo more engaging and impactful. Using this type of image adds some excitement to an email through subtle movement (“Did that just move?”). This technique can increase reading time and encourage readers to keep scrolling to see more.
Emphasize your brand’s style or voice
Don't forget that you can also use GIFs to add more character to an otherwise formal email or to enhance your brand's style and voice.
Creative Boom, an international graphic design blog, has a pair of eyes that follow you around their website. They also incorporate this fun technique into their emails by discreetly placing it in the footer.
Pizza Express uses dough ball characters that appear throughout their kids' menu, company website and social media channels, so incorporating these characters into their emails is a great way to reinforce their brand.
How to use GIFs in emails?
As we've seen in these examples, adding more motion to your email can increase reading time, highlight important areas of your email, or enhance your branding.
How do you use GIFs in your emails? Let us know in the comments section below!
Author: Jay Oram
Jay Oram is part of the design and code solutions team at specialist email agency ActionRocket. In his role at ActionRocket, Jay can usually be found experimenting with new code for email or finding that elusive rendering fix. You can find more of Jay's articles at emaildesignreview.com or on Twitter at @emailjay_.
Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps
