Animated GIFs in Email: Examples & How to Create Them [Guide] - Litmus (2023)

As an email marketer, you’re always trying to improve your campaigns through the use of copy, design, and images. But with so much competition for subscribers’ attention, you need to get creative about how to entice readers to click through and care about your message. Enter: Animated GIFs in email.

Email marketers are increasingly turning to animated GIFs in email to provide extra visual interest in their messages. According to our 2020 State of Email data, 51.28% of marketers said they’re using animated GIFs at least sometimes in their marketing emails.

So how can you get in on this action? In this blog post, we’ll cover:

  • What a GIF is
  • The benefits (with inspiring examples)
  • The downsides of animated GIFs
  • How to make animated GIFs with Adobe Animate
  • Animated GIF best practices
  • Email client support and load times

What is an animated GIF?

GIF, which stands for Graphics Interchange Format, is an image format developed by CompuServe in 1987. Due to wide support across browsers and email clients, GIFs have been a popular image format since the early days of the internet.

More importantly, though, GIFs can be animated. Similar to how a flipbook works, GIFs rapidly display a series of images to produce the illusion of motion. In the internet’s early years, GIFs (and the marquee and blink tags) were the primary method of adding movement to a web page.

A lot has changed since the 1990s. Animated GIFs are enjoying a renaissance both on the web and in email marketing. While there is still some debate as to how you actually pronounce “GIF,” most will agree that GIFs can be an excellent marketing tool.

What are the benefits of animated GIFs in email?

Whether you prefer a hard “G” or like to rhyme GIF with a certain brand of peanut butter, let’s look at why GIFs are so useful in emails.

1. Grab your subscribers’ attention

Adding animation in email with a GIF is a great way to grab your subscribers’ attention, point them toward an action you want them to take, or keep them scrolling to make sure they get your whole message.

Grammarly uses a subtle animation to draw attention to their offer.

Animated GIFs in Email: Examples & How to Create Them [Guide] - Litmus (1)
(Video) A few email minutes on... what's new in Litmus.

Xfinity places their GIF further down in the email to draw their subscribers in and encourage them to scroll.

Animated GIFs in Email: Examples & How to Create Them [Guide] - Litmus (2)

We used a faux video GIF to draw attention to our video and get subscribers interested in clicking to see more.

2. Show off your products and services

You know your product is great. Make sure your subscribers know it, too. There’s nothing like an animated GIF to show off how your product or service works.

ILIA Beauty showcases their product in action with real people.

Animated GIFs in Email: Examples & How to Create Them [Guide] - Litmus (4)

Webflow shows their product in action so subscribers know what to expect.

Animated GIFs in Email: Examples & How to Create Them [Guide] - Litmus (5)

Magic Spoon shows off their different flavors and awesome package design.

Animated GIFs in Email: Examples & How to Create Them [Guide] - Litmus (6)

3. Simplify a complex idea

If a picture is worth a thousand words, then an animated picture is probably worth even more. Use an animated GIF to illustrate a complex idea or show your subscribers that things are even easier than they think.

Baggu took simple cleaning directions to the next level by animating them. By making four different animations, the subscribers have to scroll to see the whole story.

Animated GIFs in Email: Examples & How to Create Them [Guide] - Litmus (7)

Headspace shows you how to find your calm with a GIF better than anyone could explain with words.

Animated GIFs in Email: Examples & How to Create Them [Guide] - Litmus (8)

4. Tease something new or coming soon

Do you have some new content or product you’re about to release? Have a great offer coming out soon? Use an animated GIF to create awareness or interest in your product—and have subscribers looking out for your next email.

Apple teases an extended Black Friday sale and urges subscribers to “save the dates” for shopping so they don’t miss out on deals.

Animated GIFs in Email: Examples & How to Create Them [Guide] - Litmus (9)

Linus’ electric bike is just hinted at in the shadows in this email. Subscribers will have to click through to see the actual product.

Animated GIFs in Email: Examples & How to Create Them [Guide] - Litmus (10)

Tinker teases both a Black Friday sale as well as a limited edition watch with this animated GIF to keep subscribers looking out for the next email with more information.

(Video) Litmus: The world’s best email creative tools

Animated GIFs in Email: Examples & How to Create Them [Guide] - Litmus (11)

The downsides of animated GIFs in email marketing

As wonderful as animated GIFs are, they aren’t without their faults.

Lack of accessibility

Animated GIFs can pose a problem in terms of accessibility for a variety of reasons.

Content flashing rates between 2 Hz and 55 Hz can harm users with photosensitive epilepsy. In addition, users who are visually impaired may have difficulty reading or reviewing content on a GIF before the animation changes. So, ensure your animated GIFs either have smooth transitions or don’t animate from one frame to the next at a high rate.

And, since GIFs are image files, you should always include appropriate alternative text for users who rely on assistive technology like screen readers. Images are inherently inaccessible for a lot of people, so providing copy and context allows them to understand your message more clearly.

Animated GIFs in Email: Examples & How to Create Them [Guide] - Litmus (12)

Create accessible, inclusive emails for all your subscribers

Get the insights and step-by-step advice you need to write, design, and code emails that can be enjoyed by anyone—regardless of their ability.

Learn how →

Poor background transparency

If you need to bring more color or some background transparency to your animated content, then an animated GIF may not be the way to go.

GIFs are not graceful when it comes to transparent backgrounds. But, you can bring an animated alternative to email in the form of an animated PNG (APNG). Be sure to take note of the same compression tips and tricks we share next since APNGs also like to pile on the kilobytes (KB).

And if you’re looking for yet another alternative to animated GIFs, you might want to explore CSS animations.

Creating animated GIFs for email campaigns with Adobe Animate

You can create GIFs in a number of ways. Online makers allow you to animate a selection of photos or turn a video into an animated GIF, or you can use software such as Adobe Photoshop or Adobe Animate to make custom designs move.

Here’s an overview of how to make an animated GIF in Adobe Animate.

Step 1: Create a new file and input dimensions

To make a GIF in Adobe Animate, first create a new file and input the dimensions you would like this to be. Pro tip: Create your animation at twice the size for retina display, just as you might for static imagery.

Step 2: Import the graphics to be animated

You can design your animation directly onto the canvas, using the software’s shape and drawing tools, creating a layer for each element. If you created the design for your animation in Adobe Illustrator, you can simply copy and paste your vector graphics onto your canvas. Otherwise, you can import graphics into Adobe Animate by going to file > import > import to stage. Or if you’re importing a graphic that will be reused multiple times, you can “import to library.”

Step 3: Create your animation

Now you can use the timeline to create your animation. There are a lot of possibilities with software like this, and it would be hard to touch on all of these in a single blog post. However, there’s a wealth of resources out there with many helpful guides on YouTube, in Adobe’s online tutorials, and within the software itself.

I would recommend paying particular attention to content around symbols, tweening, and ease. With these three functions alone, you can create highly engaging animation that helps grab attention, push your message, and delight your audience. All while bringing buckets of brand personality to your emails.

(Video) (Part 1 of 2) PutsMail and Litmus HTML Email Template Testing

Symbols

A symbol is a graphic, button, or movie clip that you create once and then re-use by selecting it from the library.

Once you’ve created a symbol, you can re-use it within your animation—this is called an instance. If you were to edit your symbol, such as by changing the color, it would be made across all instances (similar to email partials). But if you were to edit an instance, your change would only apply to that one instance.

For animated GIFs, we suggest only converting your design elements to graphic symbols. Both movie clips and buttons have their own timeline attached to them, so you can animate them independently of the main timeline. However, as any animations created outside of the main timeline aren’t honored when you export your animation as a GIF, it makes sense to stick with graphic symbols which only animate on the main timeline.

Tweening

Tweening is how you animate from one state to another. You can use either shape, motion, or classic tweens.

A shape tween can only be used with shapes or elements that you’ve drawn on to either the canvas or vectors imported using AI importer preferences (rather than as a bitmap). This is because a shape tween enables you to alter the shape of an object. For example: You could add a circle to one keyframe on your timeline, add a square on another, then morph your circle into your square with the shape tween.

Animated GIFs in Email: Examples & How to Create Them [Guide] - Litmus (13)

Motion tweens are used to create animation movements by specifying different values between the first and the last frames. With this kind of tween, you can alter an object’s properties—including position, size, color, effects, filters, and rotation.

Animated GIFs in Email: Examples & How to Create Them [Guide] - Litmus (14)

Classic tween is very similar to motion tweening. It was carried over from Flash and is retained within Animate as an additional option. This is my preferred way to apply motion tweening, as easing techniques (discussed below) are a little more straightforward to apply.

Ease

Easing goes hand in hand with tweening. If moving an object from one position to another using the timeline is the cake, then easing is the frosting!

Using Animate’s ease functionality, you can make the tween accelerate or decelerate at the beginning or end. Or add a little bounce when the tween completes. This really helps bring some personality to your animation.

Animated GIFs in Email: Examples & How to Create Them [Guide] - Litmus (15)

The ease applied to this tween starts the animation quickly and slows at the end.

Animated GIFs in Email: Examples & How to Create Them [Guide] - Litmus (16)

In this example, we applied a bounce-in ease to the tween.

(Video) Responsive Email 101: HTML + CSS Basics [Webinar]

For information on how to apply easing check out this video on YouTube.

Step 4: Export your animated GIF

Saving your animation out of Adobe Animate as a GIF is nice and simple. Just head to File > Export > Export Animated GIF.

How to keep your GIF file size down

Regardless of whether you use Adobe Animate or something else—keeping your GIF size for email down is crucial for email. There are a few things worth considering to help you keep your animations as light as possible.

Compression

Tools like Animate and Photoshop have limited compression options for GIFs; it’s often better to use external software instead for compression. We recommend ImageOptim, which is free to download, or EZgif, a free online GIF optimizing tool, to get your file size down to its optimum weight. We recommend keeping the size below one megabyte (MB), but the optimal file size will vary and depends on email load time.

Flat color

Including photography or gradients in your animation adds weight due to the amount of colors and shades these contain. A GIF can only contain 256 colors—compared to a JPEG which can include upwards of 16 million—which often results in the quality taking a hit. Keeping things simple is key.

Limited frames

The shorter the animation, the better. Each frame your animation contains adds weight to the GIF. Since an animation should really be about complimenting your copy, limit how long your animation plays and encourage readers to move down the email.

If you find that your GIF is carrying a little too much weight after saving and compressing, you can remove frames using Photoshop or EZgif.

Proofing your animated GIF

Now that you’ve completed your GIF, you may want to get feedback or approval before placing it within your email. With a real-time collaboration tool like Litmus Proof, you can centralize everyone’s comments and approvals.

Animated GIFs in Email: Examples & How to Create Them [Guide] - Litmus (17)

Animated GIF for email marketing best practices

Here are some best practices to keep in mind when using animated GIFs in email.

Pair GIFs with your CTA

Animated GIFs can be used to draw subscribers’ to a certain action you want them to take.

Pond5 uses an animated GIF to draw attention to the email’s primary call-to-action (CTA), “Download free clip.”

Animated GIFs in Email: Examples & How to Create Them [Guide] - Litmus (18)

Think small

When it comes to GIFs, think small: A little can go a long way. By animating only a part of your email, you can add a touch of animation without overdoing it. Plus, it helps keep down the overall file size of your GIF.

Here’s an example from Adobe—they keep the animation to a small portion of the email, but it goes a long way.

Another way to keep things small is by creating a short animation that can be looped. This limits the number of frames in the animation and also helps keep file size down.

(Video) CSS Inlining in Email: What It Is + How To Do It [Webinar]

Use GIFs to add personality

Bring out your brand’s personality in email with animated GIFs—like Rip Van Wafels does with this playful animation below.

Implementing animated GIFs in email

Once you have your GIF ready to go, you can include it in your email much the same way you would add any other image file:

<!--Animated Version for everywhere else--><!--[if (gte mso 9)|(IE)]><!--><img src="YourAnimatedFile.gif" style="display: block; padding:0; margin:0; height: auto; max-width: 100%;" border="0" alt="" width="538" height="269" /><!--<![endif]--><!--Static Version for Outlook--><!--[if (gte mso 9)|(IE)]><img src="StaticVersion.gif" style="display: block; padding:0; margin:0; height: auto; max-width: 100%;" border="0" alt="" width="538" height="269" /><![endif]-->

FAQs

How do you insert an animated GIF into an email? ›

How to insert an animated GIF in an email
  1. Copy the GIF's link. Once you have found the GIF you're looking for, your first impulse may be to right click and save to your computer. ...
  2. Open your email account. ...
  3. Maneuver to the “Insert Photo” section. ...
  4. Paste the image address. ...
  5. Click “Insert” ...
  6. Play with your GIF.
10 Apr 2019

Can you send animated GIFs in email? ›

The good news is that most email clients – like Gmail – support GIF files. Animated GIFs work in all webmail clients and most desktop and mobile clients. The only email client that can be stingy about sending GIFs in emails is Microsoft Outlook.

How do you create an animated GIF? ›

Create a GIF With Android

If you use Google Photos on Android (or iOS), you can make an animated GIF from a selection of your pictures. Just tap Library, then Utilities and Create New. Choose Animation, select the photos and tap Create.

How do you create an animated email? ›

How to create and send an animated email in 3 easy steps
  1. Use a built-in tool. ...
  2. Use a GIF library. ...
  3. Create your own GIFs. ...
  4. Make sure it serves a purpose. ...
  5. Check the file size of your GIF. ...
  6. Consider the email service provider of your audience. ...
  7. Aim for the first frame. ...
  8. Add descriptive alt text.
18 May 2022

How do I insert an animated GIF into an Outlook email? ›

Insert an animated GIF image in an outgoing email in Outlook
  1. In the Mail view, create a new email with clicking Home > New E-mail.
  2. In the new Message window, please place the cursor in the message body where you will insert the animated GIF image, and click Insert > Pictures.

How long should an animated GIF be in an email? ›

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.

How do you make a GIF for beginners? ›

How to Create GIFs in 3 Easy Ways - YouTube

How do you make an animation step by step? ›

This process usually consists of seven animation phases:
  1. Researching.
  2. Script.
  3. Storyboard.
  4. Art Direction.
  5. Recording the voiceover narration.
  6. Illustration and Animation.
  7. Sound Design.
12 Jul 2021

How do I create animated images? ›

How to turn a picture into an animation.
  1. Upload your image. Upload your desired image from your photo library or select a stock image to feature in your design.
  2. Animate your photo. Select the Animation tool and choose from a handful of creative animation options. ...
  3. Save and download.

How are animations used in emails? ›

Adding animation in email with a GIF is a great way to grab your subscribers' attention, point them toward an action you want them to take, or keep them scrolling to make sure they get your whole message. Grammarly uses a subtle animation to draw attention to their offer.

What is the file size for animated GIF? ›

Each separate frame image should be no more than 20 kb and it is recommended that the total size of the animated GIF file does not exceed 1000 kb. So generally it is recommended that your images do not exceed the size of regular web banners and pictures.

What is a good size for an animated GIF? ›

Source video resolution should be 720p max, but we recommend you keep it at 480p. Keep in mind media will appear mostly on small screens or smaller messaging windows.

What size should an animated GIF be? ›

GIFs. A good size for GIFs is 480x480. Similar to images, it's important to use ones that are close to being square. If they are too wide or tall, they could be cut off, and recipients would need to click to expand to get the full experience.

What are the 3 types of GIF? ›

For simplicity, we classify the different types of GIFs into 3 major categories: video-based, animation-based, and stickers. Video-based GIFs are the most traditional GIF that you're probably familiar with. They feature short clips of video content.

How do you use GIFs correctly? ›

Just find a GIF that you want and press the “copy link” button. Then, paste the link where you want to use your GIF. On most sites, the GIF will work automatically.

What is the easiest thing to animate? ›

Beginner Animation Exercises
  • Brick Falling Off A Shelf Onto The Ground. ...
  • Character Turning Their Head (Using Arcs) ...
  • Character Blinking. ...
  • Character Thinking. ...
  • Flour Sack Waving. ...
  • Flour Sack Jumping. ...
  • Flour Sack Falling. ...
  • Flour Sack Kicking A Ball. This exercise can be quite fun in that there are a number of ways you can set the scene.

What are the 5 types of animation? ›

  • 1# Traditional animation. Traditional animation, also known as cel animation, is the oldest form of animation. ...
  • 2# 2D animation. 2D animation, also known as vector-based animation, is all about creating movement in a 2-dimensional space. ...
  • 3# 3D animation. ...
  • 4# Stop motion. ...
  • 5# Motion graphics.
9 Dec 2021

How should a beginner start animation? ›

How to Animate for Beginners
  1. Step 1: Plan Your Storyboard. Storyboards are helpful for visualizing where you want your animation to go. ...
  2. Step 2: Create Your Workspace. Create a blank slate to work from before starting your animation. ...
  3. Step 3: Build Your Framework. ...
  4. Step 4: Draw Your Static Images. ...
  5. Step 5: Hit Playback.
22 Jul 2021

Which app is used to make animation? ›

Software #3: Adobe Character Animator

Adobe Character Animator is another one of Adobe's animation software stack. But unlike Adobe Animate, Character Animator lets you use motion capture to create live animations of your 2D characters.

What app can I use to make my own animation? ›

Adobe Animate

Animate makes it just as easy to process a finished image as it does to draw it from scratch. The app supports sound overlay, 3D models, ActionScripts, and of course integrations with other Adobe products. Once exported, the content can be used on websites, online videos, or games.

What are the 4 types of animations? ›

UNDERSTANDING ANIMATION

There are four types of animation effects in PowerPoint – entrance, emphasis, exit and motion paths.

What are the examples of animate? ›

Lively; vigorous; spirited. Belonging to the class of nouns that stand for living things. The word dog is animate; the word car is inanimate. Dynamic, energetic.

What is animation with example? ›

Animation is a method by which still figures are manipulated to appear as moving images. In traditional animation, images are drawn or painted by hand on transparent celluloid sheets to be photographed and exhibited on film. Today, most animations are made with computer-generated imagery (CGI).

How do I download and save a GIF? ›

– Click on the GIF to get its detailed page. – Then right-click on it and choose the “Save image as…” option. – Select a folder to save the GIF and rename the GIF file. – Press the Save button to save the GIF.

How do you send an animated GIF? ›

How to Text a GIF
  1. On the GIPHY mobile app, tap on the GIF that you'd like to share. Get the GIPHY App!
  2. Tap on the Text Message button.
  3. Your GIF will automatically appear in the Message app on your iPhone or Android.
  4. Hit send and watch your GIF autoplay in the text thread!

How do you find and attach a GIF? ›

How to Text GIFs on Android
  1. Open your default messaging app.
  2. Tap on the smiley face emoji on the keyboard.
  3. Tap on the GIF button.
  4. Tap on the search bar and look for your desired GIF.
  5. Tap on the GIF to preview and send.

› marketing › animated-images-... ›

An animated image, GIF, or video might sound difficult to create, but in reality, you don't need to carve out a budget to add this type of visual content to...
Looking to add some spice to your customer emails? Learn how to make simple animated gifs in Adobe Photoshop with this easy tutorial.
Give your email subscribers something to talk about by engaging them with unexpected movement. Incorporate animated GIFs into your email marketing strategy to p...

What software do you use to create GIFs? ›

In terms of software and programs to download you have options like GiftedMotion and SSuite Gif Animator on the more direct side and tools like GIMP that give you much more creative control. Online editors like GIPHY and Ezgif also make GIF-making a sinch, with no need to download a program.

What app do I need to make a GIF? ›

GIF Maker, GIF Editor

Over time, this awesome app has become one of the most popular GIF maker apps on the Play Store. You can make GIFs by cutting and cropping videos in your gallery or combining two or more images. You can also edit or add some funny emojis for a change. The best thing is the editing menu.

What is a good GIF maker? ›

12 Best Online Animated GIF Makers for 2022
  • Wave.video. Well, we have put Wave. ...
  • Make A GIF. If you're looking for an online GIF creator that helps you create animated GIFs from your pictures or even a Facebook or YouTube video URL, go to Make A GIF. ...
  • Imgflip. ...
  • GIFPAL. ...
  • GIFMaker.me. ...
  • Gifs.com. ...
  • Imgur. ...
  • Picasion.

Where can I download GIFs for free? ›

Part 2: Best 10 Websites to Download Animated GIFs
  • Giphy.
  • Gifer.
  • AnimatedImages.org.
  • Reaction GIFs.
  • Imgflip.
  • GIFbin.
  • Reddit.
  • Gfycat.
30 Aug 2022

How do you turn a picture into a GIF? ›

Convert to GIF With a Software Program
  1. Open the image in your photo editor.
  2. Select File.
  3. Choose Save As. ...
  4. Type a name for the new file.
  5. Select the Save as Type drop-down arrow and choose GIF. ...
  6. Look for an Options button to customize settings specific to the GIF format. ...
  7. Select Save.
23 Jan 2021

Whats the meaning of GIF? ›

GIF, in full graphics interchange format, digital file format devised in 1987 by the Internet service provider CompuServe as a means of reducing the size of images and short animations.

What is a GIF image? ›

GIF stands for “Graphics Interchange Format”. It's a bitmap image format which was created by CompuServe in 1987. This popular image format has a wide support base on the internet. GIF files are portable across various platforms and applications.

Can my phone make GIFs? ›

Did you know you can create GIFs on an Android phone? You can turn your favorite shows and movies into moving reaction images or create some fun GIFs from videos of your friends, family, or pets! You can even add moving elements to your pictures to create unique GIFs.

What is the most popular GIF app? ›

Best GIF Apps for Android Smartphone:
  • GIF Camera:
  • GIF Me Camera:
  • GIF Creator:
  • GIF Maker:
  • GIF Pro:
  • GIF Studio:
30 Aug 2022

Do you need an app to send GIFs? ›

Google Messages, Google's texting app, includes the option to send GIFs. You can also use your keyboard's GIF search, which brings up different results. Instructions for adding GIFs using Gboard are below.

Videos

1. Classic Webinar: Email Accessibility in 3 Easy Steps
(Litmus)
2. Introducing the New, Redesigned Litmus
(Litmus)
3. LookupAnswers How to use Litmus in your SFMC Workflow
(HowToSFMC)
4. Drag and Drop Visual Editor in Litmus Builder
(Litmus)
5. Walkthrough of Litmus Checklist
(Litmus)
6. Litmus Putsmail for HTML Email Preview Testing
(Responsive HTML Email)
Top Articles
Latest Posts
Article information

Author: Dan Stracke

Last Updated: 11/09/2022

Views: 6111

Rating: 4.2 / 5 (63 voted)

Reviews: 86% of readers found this page helpful

Author information

Name: Dan Stracke

Birthday: 1992-08-25

Address: 2253 Brown Springs, East Alla, OH 38634-0309

Phone: +398735162064

Job: Investor Government Associate

Hobby: Shopping, LARPing, Scrapbooking, Surfing, Slacklining, Dance, Glassblowing

Introduction: My name is Dan Stracke, I am a homely, gleaming, glamorous, inquisitive, homely, gorgeous, light person who loves writing and wants to share my knowledge and understanding with you.