{"id":17171,"date":"2023-09-25T18:07:05","date_gmt":"2023-09-25T22:07:05","guid":{"rendered":"https:\/\/www.litmus.com\/?p=17171"},"modified":"2024-08-21T11:13:42","modified_gmt":"2024-08-21T15:13:42","slug":"a-guide-to-animated-gifs-in-email","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/a-guide-to-animated-gifs-in-email","title":{"rendered":"How to Create &amp; Add an Animated GIF to an Email"},"content":{"rendered":"\n\n\t<div id=\"simple-text-block-block_71331448bbd04f1802f087f9bb138641\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>As an email marketer, you\u2019re always trying to improve your campaigns through the use of copy, design, <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-personalization\">personalization<\/a>, <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/ai-emerging-email-technology\">artificial intelligence<\/a>, and beautiful images. But with so much competition for subscribers\u2019 attention, you need to get creative about how to entice readers to click through and care about your message. <strong>Enter: Animated GIFs in email<\/strong>.<\/p>\n<p>Email marketers are increasingly turning to animated GIFs in email to provide extra visual interest in their messages and according to our <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/page.litmus.com\/state-of-email-design.html\">2023 State of Email Design Report<\/a>, 58% of marketers said they\u2019re using animated GIFs in their marketing emails and 43% said there was somewhat of an improvement in email performance when GIFs are used.<\/p>\n<p>So how can you get in on this action? In this blog post, we\u2019ll cover:<\/p>\n<table style=\"background-color: #f2f3f6;\">\n<tbody>\n<tr>\n<td class=\"block-1\" style=\"padding: 20px;\"><strong>Table of Contents<\/strong><\/p>\n<ul>\n<li><a rel=\"noopener\" href=\"#what-is-gif\">What an animated GIF is<\/a><\/li>\n<li><a rel=\"noopener\" href=\"#benefits\">The benefits of animated GIFs<\/a><\/li>\n<li><a rel=\"noopener\" href=\"#considerations\">Considerations when using animated GIFs<\/a><\/li>\n<li><a rel=\"noopener\" href=\"#how-to-add\">How to add animated GIFs to your emails<\/a><\/li>\n<li><a rel=\"noopener\" href=\"#how-to-create\">How to create animated GIFs<\/a><\/li>\n<li><a rel=\"noopener\" href=\"#how-to-optimize\">How to optimize animated GIFs for email<\/a><\/li>\n<li><a rel=\"noopener\" href=\"#proofing\">Proofing animated GIFs<\/a><\/li>\n<li><a rel=\"noopener\" href=\"#testing\">Testing your animated GIFs<\/a><\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<h2 id=\"what-is-gif\">What is an animated GIF?<\/h2>\n<p>GIF, which stands for Graphics Interchange Format, is an image format <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.smithsonianmag.com\/history\/brief-history-gif-early-internet-innovation-ubiquitous-relic-180963543\/\" target=\"_blank\" rel=\"noopener\">developed by CompuServe in 1987<\/a>. Due to wide support across browsers and email clients, GIFs have been a popular image format since the early days of the internet.<\/p>\n<p>More importantly, though, GIFs can be animated. Similar to how a flipbook works, GIFs rapidly display a series of images to produce the <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/ed.ted.com\/lessons\/animation-basics-the-optical-illusion-of-motion-ted-ed\" target=\"_blank\" rel=\"noopener\">illusion of motion<\/a>. In the internet\u2019s early years, GIFs (and the marquee and blink tags) were the primary method of adding movement to a web page.<\/p>\n<p>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 <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/time.com\/5791028\/how-to-pronounce-gif\/\" target=\"_blank\" rel=\"noopener\">some debate<\/a> as to how you actually pronounce \u201cGIF,\u201d most will agree that GIFs can be an excellent marketing tool.<\/p>\n<h2 id=\"benefits\">What are the benefits of animated GIFs in email?<\/h2>\n<p>Whether you prefer a hard \u201cG\u201d or like to rhyme GIF with a certain brand of peanut butter, let\u2019s look at why GIFs are so useful in emails.<\/p>\n<figure id=\"post-7413 media-7413\" class=\"aligncenter\">\n<h3 id=\"post-7413 media-7413\" class=\"aligncenter\">1. Grab your subscribers\u2019 attention<\/h3>\n<\/figure>\n<p>Adding <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/animation-in-email-3-mistakes-you-shouldnt-fall-for\/\">animation in email<\/a> with a GIF is a great way to grab your subscribers\u2019 attention, point them toward an action you want them to take, or keep them scrolling to make sure they get your whole message.<\/p>\n<p>Grammarly uses a very subtle animation to draw attention to their offer leaving you wanting to spend more time reading\u2014and hopefully\u2014taking action on the email.<\/p>\n<figure id=\"post-7434 media-7434\" class=\"aligncenter\">\n<p><figure id=\"attachment_24156\" aria-describedby=\"caption-attachment-24156\" style=\"width: 422px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"wp-image-24156 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/01\/Grammarly_GIF.gif\" alt=\"Grammarly example of animated gifs in email\" width=\"422\" height=\"512\" \/><figcaption id=\"caption-attachment-24156\" class=\"wp-caption-text\">Source: <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/reallygoodemails.com\/emails\/today-only-55-off-an-entire-year-of-premium-goodness\/live\" target=\"_blank\" rel=\"noopener\">Really Good Emails<\/a><\/figcaption><\/figure><\/figure>\n<h3>2. Show off your products and services<\/h3>\n<p>You know your product is great. Make sure your subscribers know it, too. There\u2019s nothing like an animated GIF to show off how your product or service works.<\/p>\n<p>ILIA Beauty showcases their product in action with real people.<\/p>\n<figure id=\"post-7419 media-7419\" class=\"aligncenter\">\n<p><figure id=\"attachment_24159\" aria-describedby=\"caption-attachment-24159\" style=\"width: 607px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"wp-image-24159 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/01\/ilia-GIF.gif\" alt=\"Ilia example of animated gifs in email\" width=\"607\" height=\"775\" \/><figcaption id=\"caption-attachment-24159\" class=\"wp-caption-text\">Source: <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/reallygoodemails.com\/emails\/how-to-use-your-new-multi-stick\/live\" target=\"_blank\" rel=\"noopener\">Really Good Emails<\/a><\/figcaption><\/figure><\/figure>\n<div class=\"mceTemp\"><\/div>\n<h3>3. Simplify a complex idea<\/h3>\n<p>If a picture is worth a thousand words, then an <em>animated<\/em> 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.<\/p>\n<p>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.<\/p>\n<figure id=\"attachment_24163\" aria-describedby=\"caption-attachment-24163\" style=\"width: 420px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"wp-image-24163 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/01\/Baggu-GIF.gif\" alt=\"Baggu example of animated gifs in email\" width=\"420\" height=\"512\" \/><figcaption id=\"caption-attachment-24163\" class=\"wp-caption-text\">Source: <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/reallygoodemails.com\/emails\/machine-wash-cold-line-dry\/live\" target=\"_blank\" rel=\"noopener\">Really Good Emails<\/a><\/figcaption><\/figure>\n<h3>4. Tease something new or coming soon<\/h3>\n<p>Do you have some new content or product you\u2019re about to release? Have a great offer coming out soon? Use an animated GIF to create awareness or interest in your product\u2014and have subscribers looking out for your next email.<\/p>\n<p>Linus\u2019 electric bike is just hinted at in the shadows in this email. Subscribers will have to click through to see the actual product.<\/p>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_24166\" aria-describedby=\"caption-attachment-24166\" style=\"width: 512px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"wp-image-24166 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/01\/Linus-Email-GIF.gif\" alt=\"Linus Electric example of animated gifs in email\" width=\"512\" height=\"426\" \/><figcaption id=\"caption-attachment-24166\" class=\"wp-caption-text\">Source: <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/reallygoodemails.com\/emails\/introducing-linus-electric\/live\" target=\"_blank\" rel=\"noopener\">Really Good Emails<\/a><\/figcaption><\/figure>\n<h3>5. Draw attention to your call-to-action<\/h3>\n<p><span style=\"font-weight: 400;\">Animated GIFs can be used to draw subscribers\u2019 to a certain action you want them to take.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Pond5 uses an animated GIF to draw attention to the email\u2019s primary <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/click-tap-and-touch-a-guide-to-cta-best-practices\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">call-to-action<\/span><\/a><span style=\"font-weight: 400;\"> (CTA), \u201cDownload free clip.\u201d<\/span><\/p>\n<figure style=\"width: 321px\" class=\"wp-caption alignnone\"><img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/manual\/email-example-of-animated-gif-from-pond5.gif\" alt=\"Email example of an animated GIF used with a call-to-action (CTA) from Pond5\" width=\"321\" height=\"498\" \/><figcaption class=\"wp-caption-text\">Source: <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/reallygoodemails.com\/emails\/your-free-clipits-that-time-of-the-week-again\" target=\"_blank\" rel=\"noopener\">Really Good Emails<\/a><\/figcaption><\/figure>\n<h3>6. Adds personality<\/h3>\n<p>We used the <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/faux-video-a-fallback-for-video-in-email\/\">faux video technique<\/a> to create an animated GIF of a video featuring us to help add some authenticity and personality to a seasons greetings email.<\/p>\n<figure id=\"post-7417 media-7417\" class=\"aligncenter\"><\/figure>\n<figure id=\"attachment_24158\" aria-describedby=\"caption-attachment-24158\" style=\"width: 512px\" class=\"wp-caption alignnone\"><a rel=\"noopener\" href=\"https:\/\/litmus.com\/scope\/w61nayyvq2if\"><img decoding=\"async\" class=\"wp-image-24158 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/01\/Litmus-Holiday.gif\" alt=\"Litmus example of animated gifs in email\" width=\"512\" height=\"495\" \/><\/a><figcaption id=\"caption-attachment-24158\" class=\"wp-caption-text\"><a rel=\"noopener\" href=\"https:\/\/litmus.com\/scope\/w61nayyvq2if\" target=\"_blank\" rel=\"noopener\">See the full email in action<\/a><\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<h2 id=\"considerations\">Considerations when using animated GIFs in email<\/h2>\n<p>As is the case with most things in email, there are some very specific considerations you need to think about when using animated GIFs in email.<\/p>\n<h3>Support<\/h3>\n<p>Animated GIFs are supported almost everywhere. In 2019, <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/microsoft-expands-animated-gif-support-with-outlook-365\/\">Outlook expanded its support for animated GIFs<\/a>, but this only affects Office365. Outlook 2007-2019 still don\u2019t support animated GIFs.<\/p>\n<p>Here\u2019s a quick chart of which email clients do and don\u2019t support animated GIFs:<\/p>\n<div style=\"background: #f6f6f6; border: 1px solid #ddd; padding: 15px;\">\n<table style=\"border: 0; margin: 0;\" width=\"100%\">\n<tbody>\n<tr>\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 0px; font-weight: bold; line-height: 20px; text-align: left;\">Desktop Clients<\/p>\n<\/td>\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 0; font-weight: bold; line-height: 20px;\">Webmail Clients<\/p>\n<\/td>\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 0; font-weight: bold; line-height: 20px;\">Mobile Clients<\/p>\n<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff;\">\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">Outlook 2000-2003 <span style=\"color: #0e9453;\">\u2713<\/span><\/p>\n<\/td>\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px;\">Gmail <span style=\"color: #0e9453;\">\u2713<\/span><\/p>\n<\/td>\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px;\">iOS Mail <span style=\"color: #0e9453;\">\u2713<\/span><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">Outlook 2007-2019 <span style=\"color: #ea7165;\">\u2718<\/span><\/p>\n<\/td>\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px;\">G Suite <span style=\"color: #0e9453;\">\u2713<\/span><\/p>\n<\/td>\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px;\">Gmail <span style=\"color: #0e9453;\">\u2713<\/span><\/p>\n<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff;\">\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">Outlook for Mac <span style=\"color: #0e9453;\">\u2713<\/span><\/p>\n<\/td>\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px;\">Yahoo Mail <span style=\"color: #0e9453;\">\u2713<\/span><\/p>\n<\/td>\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px;\">Gmail IMAP <span style=\"color: #0e9453;\">\u2713<\/span><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">Apple Mail <span style=\"color: #0e9453;\">\u2713<\/span><\/p>\n<\/td>\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px;\">AOL <span style=\"color: #0e9453;\">\u2713<\/span><\/p>\n<\/td>\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px;\">Samsung Mail <span style=\"color: #0e9453;\">\u2713<\/span><\/p>\n<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff;\">\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">Windows 10 Mail <span style=\"color: #0e9453;\">\u2713<\/span><\/p>\n<\/td>\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">Outlook.com <span style=\"color: #0e9453;\">\u2713<\/span><\/p>\n<\/td>\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px;\">Outlook <span style=\"color: #0e9453;\">\u2713<\/span><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">Office365 <span style=\"color: #0e9453;\">\u2713<\/span><\/p>\n<\/td>\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">Office365 <span style=\"color: #0e9453;\">\u2713<\/span><\/p>\n<\/td>\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px;\">Yahoo Mail <span style=\"color: #0e9453;\">\u2713<\/span><\/p>\n<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff;\">\n<td style=\"border: 0; text-align: left;\" align=\"left\"><\/td>\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">Comcast <span style=\"color: #0e9453;\">\u2713<\/span><\/p>\n<\/td>\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px;\">AOL <span style=\"color: #0e9453;\">\u2713<\/span><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 0; text-align: left;\" align=\"left\"><\/td>\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">Orange.fr <span style=\"color: #0e9453;\">\u2713<\/span><\/p>\n<\/td>\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">\n<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff;\">\n<td style=\"border: 0; text-align: left;\" align=\"left\"><\/td>\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">SFR.fr <span style=\"color: #0e9453;\">\u2713<\/span><\/p>\n<\/td>\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">\n<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 0; text-align: left;\" align=\"left\"><\/td>\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">GMX.de <span style=\"color: #0e9453;\">\u2713<\/span><\/p>\n<\/td>\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">\n<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff;\">\n<td style=\"border: 0; text-align: left;\" align=\"left\"><\/td>\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">Web.de <span style=\"color: #0e9453;\">\u2713<\/span><\/p>\n<\/td>\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">\n<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 0; text-align: left;\" align=\"left\"><\/td>\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">T-Online.de <span style=\"color: #0e9453;\">\u2713<\/span><\/p>\n<\/td>\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">\n<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff;\">\n<td style=\"border: 0; text-align: left;\" align=\"left\"><\/td>\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">Freenet.de <span style=\"color: #0e9453;\">\u2713<\/span><\/p>\n<\/td>\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">\n<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 0; text-align: left;\" align=\"left\"><\/td>\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">Mail.ru <span style=\"color: #0e9453;\">\u2713<\/span><\/p>\n<\/td>\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>&nbsp;<\/p>\n<p>To maintain a great experience where animated GIFs are not supported, be sure to make the first frame contain everything you need as a static fallback.<\/p>\n<p>You could also provide a fallback for Outlook by hiding the normal GIF image and displaying a static image and\/or different content inside Outlook conditionals:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;!--Animated Version for everywhere else-->\n&lt;!--[if (gte mso 9)|(IE)]>&lt;!-->\n&lt;img src=\"YourAnimatedFile.gif\" style=\"display: block; padding:0; margin:0; height: auto; max-width: 100%;\" border=\"0\" alt=\"\" width=\"538\" height=\"269\" \/>\n&lt;!--&lt;![endif]-->\n\n&lt;!--Static Version for Outlook-->\n\n&lt;!--[if (gte mso 9)|(IE)]>\n&lt;img src=\"StaticVersion.gif\" style=\"display: block; padding:0; margin:0; height: auto; max-width: 100%;\" border=\"0\" alt=\"\" width=\"538\" height=\"269\" \/>\n&lt;![endif]--><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_c9476b5a40e2eb78fc74dda9f5bbefab\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><strong>When it comes to email client support:<\/strong> it\u2019s helpful to know which email clients are popular with your audience. If Outlook 2007-2019 is a top client with your subscriber base, take the time to ensure your fallback is working as planned.<\/p>\n<p>(Also, it <em>might<\/em> be a good idea to use a solution like <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-guardian\">Email Guardian<\/a> to look out for any broken emails before hitting the send button!)<\/p>\n<h3>Load Time<\/h3>\n<p>You can test load times with a tool like <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-checklist\/\">Litmus\u2019 automated pre-send testing checklist<\/a> to see if your images are taking too long to load. On average, we\u2019ve found that <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/two-seconds\/\">just over half of recipients only spend less than two seconds on an email<\/a>. So your animated GIFs need to load fast to make an impression.<\/p>\n<p>We tested different file sizes to find their average loading speeds over different connections. On average, a 4.4MB animated GIF can take over two times longer to load over a 4G LTE connection than over an Ethernet connection.<\/p>\n<p>Here are some average speeds for different file sizes on different connections based on our own experiment:<\/p>\n<h4>Average content download speed (in seconds)<\/h4>\n<div style=\"background: #f6f6f6; border: 1px solid #ddd; padding: 15px;\">\n<table style=\"border: 0; margin: 0;\" width=\"100%\">\n<tbody>\n<tr>\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 0px; font-weight: bold; line-height: 20px; text-align: left;\">File Size<\/p>\n<\/td>\n<td style=\"border: 0; text-align: left;\" align=\"center\">\n<p style=\"margin: 0; font-weight: bold; line-height: 20px;\">4G LTE<\/p>\n<\/td>\n<td style=\"border: 0; text-align: left;\" align=\"center\">\n<p style=\"margin: 0; font-weight: bold; line-height: 20px;\">WiFi<\/p>\n<\/td>\n<td style=\"border: 0; text-align: left;\" align=\"center\">\n<p style=\"margin: 0; font-weight: bold; line-height: 20px;\">Ethernet<\/p>\n<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff;\">\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">180kB GIF<\/p>\n<\/td>\n<td style=\"border: 0; text-align: left;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px;\">0.37<\/p>\n<\/td>\n<td style=\"border: 0; text-align: left;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px;\">0.29<\/p>\n<\/td>\n<td style=\"border: 0; text-align: left;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px;\">0.22<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">1MB GIF<\/p>\n<\/td>\n<td style=\"border: 0; text-align: left;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px;\">1.18<\/p>\n<\/td>\n<td style=\"border: 0; text-align: left;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px;\">0.54<\/p>\n<\/td>\n<td style=\"border: 0; text-align: left;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px;\">0.44<\/p>\n<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff;\">\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">3.2MB GIF<\/p>\n<\/td>\n<td style=\"border: 0; text-align: left;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px;\">2.87<\/p>\n<\/td>\n<td style=\"border: 0; text-align: left;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px;\">1.44<\/p>\n<\/td>\n<td style=\"border: 0; text-align: left;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px;\">1.04<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 0; text-align: left;\" align=\"left\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px; text-align: left;\">4.4MB GIF<\/p>\n<\/td>\n<td style=\"border: 0; text-align: left;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px;\">3.23<\/p>\n<\/td>\n<td style=\"border: 0; text-align: left;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px;\">1.83<\/p>\n<\/td>\n<td style=\"border: 0; text-align: left;\" align=\"center\">\n<p style=\"margin: 15px 5px; font-size: 16px; line-height: 20px;\">1.34<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>&nbsp;<\/p>\n<p>These times are the content download speed and don\u2019t take into account the time to first byte (TTFB). TTFB is a way to measure the responsiveness of a web server. So if you\u2019re hosting your images on a server that is slow to respond, the load times for the animated GIFs would increase for your subscribers.<\/p>\n<p>On top of slower load times, animated GIFs with larger file sizes will also use up data faster, which your subscribers probably won\u2019t be happy about.<\/p>\n<p>Since you don\u2019t have control over your server speed, your subscriber\u2019s connection, or your subscriber\u2019s data plan, it becomes extremely important to make sure that your animated GIFs are small enough to ensure that your audience can view it no matter where they\u2019re opening your email. We recommend 1MB at the largest.<\/p>\n<h3>Accessibility<\/h3>\n<p>Animated GIFs can pose a problem in terms of <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/resources\/ultimate-guide-to-email-accessibility\/\" target=\"_blank\" rel=\"noopener\">accessibility<\/a> for a variety of reasons.<\/p>\n<p>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\u2019t animate from one frame to the next at a high rate.<\/p>\n<p>And, since GIFs are image files, you should always include <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-styled-alt-text-in-email\/\" target=\"_blank\" rel=\"noopener\">appropriate alternative text<\/a> for users who rely on assistive technology like screen readers. <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/why-you-shouldnt-send-image-only-emails\/\" target=\"_blank\" rel=\"noopener\">Images are inherently inaccessible<\/a> for a lot of people, so providing copy and context allows them to understand your message more clearly.<\/p>\n<div class=\"cta\">\n<table style=\"background-color: #f2f3f6;\">\n<tbody>\n<tr>\n<td class=\"block-1\" style=\"padding: 20px 10px 20px 20px;\"><img decoding=\"async\" class=\"alignnone size-full wp-image-4234\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/element-1-1.png\" alt=\"The Ultimate Guide to Email Accessibility by Litmus\" width=\"510\" height=\"652\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/element-1-1.png 510w, https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/element-1-1-235x300.png 235w\" sizes=\"(max-width: 510px) 100vw, 510px\" \/><\/td>\n<td class=\"block-2\" style=\"padding: 20px 20px 20px 10px;\">\n<p class=\"zero\"><strong>Create accessible, inclusive emails for all your subscribers<\/strong><\/p>\n<p class=\"zero\">Get the insights and step-by-step advice you need to write, design, and code emails that can be enjoyed by anyone\u2014regardless of their ability.<\/p>\n<p class=\"zero\"><a class=\"btn medium orange button\" rel=\"noopener\" href=\"https:\/\/www.litmus.com\/resources\/ultimate-guide-to-email-accessibility\/\" target=\"_blank\" rel=\"noopener noreferrer\">Learn how \u2192<\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>&nbsp;<\/p>\n<h3>Image transparency<\/h3>\n<p>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.<\/p>\n<p>GIFs are not graceful when it comes to transparent backgrounds. But, you can bring an animated alternative to email in the form of an <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/animated-pngs-in-email-an-alternative-to-gifs\/\" target=\"_blank\" rel=\"noopener\">animated PNG<\/a> (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).<\/p>\n<p>And if you\u2019re looking for yet another alternative to animated GIFs, you might want to explore <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/understanding-css-animations-in-email-transitions-and-keyframe-animations\/\" target=\"_blank\" rel=\"noopener\">CSS animations<\/a>.<\/p>\n<h2 id=\"how-to-add\">How to add Animated GIFs in an Email<\/h2>\n<p>Adding an animated GIF to your email is exactly the same process or code that you\u2019d use to embed any other image file into your email:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;img src=\"http:\/\/yourwebsite.com\/path\/to\/awesome.gif\" width=\"100\" height=\"100\" alt=\"Description of your gif\u201d><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_54db96e4bfffa1a7756d4bc87d9b4e5c\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>But how do you go about creating an animated GIF?<\/p>\n<h2 id=\"how-to-create\">How to create animated GIFs for emails with Adobe Animate<\/h2>\n<p>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.<\/p>\n<p>Here\u2019s an overview of how to make an animated GIF in Adobe Animate. (Our animated GIF creation progam of choice.)<\/p>\n<h3>Step 1: Create a new file and input dimensions<\/h3>\n<p>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, <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/understanding-retina-images-in-html-email\/\" target=\"_blank\" rel=\"noopener\">just as you might for static imagery<\/a>.<\/p>\n<h3>Step 2: Import the graphics to be animated<\/h3>\n<p>You can design your animation directly onto the canvas, using the software\u2019s 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 &gt; import &gt; import to stage. Or if you\u2019re importing a graphic that will be reused multiple times, you can \u201cimport to library.\u201d<\/p>\n<h3>Step 3: Create your animation<\/h3>\n<p>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\u2019s a wealth of resources out there with many helpful guides on <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.youtube.com\/c\/TipTut\/search?query=animate\" target=\"_blank\" rel=\"noopener\">YouTube<\/a>, in <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/helpx.adobe.com\/animate\/tutorials.html\" target=\"_blank\" rel=\"noopener\">Adobe\u2019s online tutorials<\/a>, and within the software itself.<\/p>\n<p>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.<\/p>\n<h4>Symbols<\/h4>\n<p>A <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/helpx.adobe.com\/uk\/animate\/using\/symbols.html\" target=\"_blank\" rel=\"noopener\">symbol<\/a> is a graphic, button, or movie clip that you create once and then re-use by selecting it from the library.<\/p>\n<p>Once you\u2019ve created a symbol, you can re-use it within your animation\u2014this 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 <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/create-and-manage-dynamic-code-blocks-easily-with-partials\/\" target=\"_blank\" rel=\"noopener\">email partials<\/a>). But if you were to edit an instance, your change would only apply to that one instance.<\/p>\n<p>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\u2019t honored when you export your animation as a GIF, it makes sense to stick with graphic symbols which only animate on the main timeline.<\/p>\n<h4>Tweening<\/h4>\n<p><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/helpx.adobe.com\/uk\/animate\/using\/Tweens.html\" target=\"_blank\" rel=\"noopener\">Tweening<\/a> is how you animate from one state to another. You can use either shape, motion, or classic tweens.<\/p>\n<p>A <strong>shape tween<\/strong> can only be used with shapes or elements that you\u2019ve 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.<\/p>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-24203\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/02\/tweening-example.gif\" alt=\"animated gif tweening example\" width=\"300\" height=\"300\" \/>\n<p><strong>Motion tweens<\/strong> 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\u2019s properties\u2014including position, size, color, effects, filters, and rotation.<\/p>\n<figure id=\"post-7424 media-7424\" class=\"aligncenter\"><img decoding=\"async\" class=\"alignnone size-full wp-image-24202\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/02\/motion-tween-example.gif\" alt=\"animated gif motion tween example\" width=\"300\" height=\"300\" \/><\/figure>\n<h5><\/h5>\n<p><strong>Classic tween<\/strong> 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.<\/p>\n<h4>Ease<\/h4>\n<p>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!<\/p>\n<p>Using Animate\u2019s 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.<\/p>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-24200\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/02\/ease-applied-to-tween-example.gif\" alt=\"animated gif example of ease applied to tween\" width=\"300\" height=\"300\" \/>\n<p>The ease applied to this tween starts the animation quickly and slows at the end.<\/p>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-24201\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/02\/ease-applied-to-tween-with-bouncein-example.gif\" alt=\"animated gif example of ease applied to tween with bounce-in\" width=\"300\" height=\"300\" \/>\n<p>In this example, we applied a bounce-in ease to the tween.<\/p>\n<p>For information on how to apply easing <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/youtu.be\/hybbSfVTKms\" target=\"_blank\" rel=\"noopener\">check out this video on YouTube<\/a>.<\/p>\n<h3>Step 4: Export your animated GIF<\/h3>\n<p>Saving your animation out of Adobe Animate as a GIF is nice and simple. Just head to File &gt; Export &gt; Export Animated GIF.<\/p>\n<h2 id=\"how-to-optimize\">How to optimize your GIF for email<\/h2>\n<p>Regardless of whether you use Adobe Animate or something else\u2014keeping your <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/animated-gifs-in-email-10-tips-for-keeping-files-sizes-small\/\" target=\"_blank\" rel=\"noopener\">GIF size for email<\/a> down is crucial for email. There are a few things worth considering to help you keep your animations as light as possible.<\/p>\n<h3>Compression<\/h3>\n<p>Tools like Animate and Photoshop have limited compression options for GIFs; it\u2019s often better to use external software instead for compression. We recommend <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/imageoptim.com\/\" target=\"_blank\" rel=\"noopener\">ImageOptim<\/a>, which is free to download, or <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/ezgif.com\/optimize\" target=\"_blank\" rel=\"noopener\">EZgif<\/a>, 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.<\/p>\n<h3>Flat color<\/h3>\n<p>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\u2014compared to a JPEG which can include <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/docs.microsoft.com\/en-us\/windows\/win32\/gdiplus\/-gdiplus-types-of-bitmaps-about\" target=\"_blank\" rel=\"noopener\">upwards of 16 million<\/a>\u2014which often results in the quality taking a hit. Keeping things simple is key.<\/p>\n<h3>Limited frames<\/h3>\n<p>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.<\/p>\n<p>If you find that your GIF is carrying a little too much weight after saving and compressing, you can remove frames using Photoshop or <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/ezgif.com\/optimize\" target=\"_blank\" rel=\"noopener\">EZgif<\/a>.<\/p>\n<h2 id=\"proofing\">Proofing your animated GIF<\/h2>\n<p>Now that you\u2019ve created your GIF, you may want to get feedback or approval before placing it within your email. With a real-time collaboration tool like <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-proof\/\" target=\"_blank\" rel=\"noopener\">Litmus Proof<\/a>, you can centralize everyone\u2019s comments and approvals.<\/p>\n<figure id=\"attachment_24173\" aria-describedby=\"caption-attachment-24173\" style=\"width: 800px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"wp-image-24173 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/01\/Proof-GIF.gif\" alt=\"Proof GIF\" width=\"800\" height=\"450\" \/><figcaption id=\"caption-attachment-24173\" class=\"wp-caption-text\"><em>Friendly heads-up: This one\u2019s available in Litmus Enterprise plans only<\/em><\/figcaption><\/figure>\n<h2><\/h2>\n<h2 id=\"testing\">Test your animated GIFs in email with Litmus<\/h2>\n<p>Animated GIFs have the power to delight, wow, and captivate your email subscribers. But, make sure you use your GIFs wisely! Your subscribers should always stay at the top of your mind when creating and implementing GIFs in your emails. Don\u2019t animate just because you can\u2014think of how it\u2019ll benefit your audience.<\/p>\n<p>Additionally, to ensure your animated GIFs come across right, make sure <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-testing\/\">email testing<\/a> is part of your workflow. Taking the time to test will go a long way\u2014and help you truly deliver a memorable (and valuable) subscriber experience. With an <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/state-of-email-design-tools\" rel=\"noopener\" target=\"_blank\">email design tool<\/a> like Litmus <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-builder\/\" target=\"_blank\" rel=\"noopener\">Email Builder<\/a>, you can test as you build, and preview your email in 100+ popular email clients all in one seamless view\u2014saving you time and helping you work more efficiently. And finally, with <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-guardian\">Email Guardian<\/a>, you can set up a solution that protects your email campaigns using <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/ai-emerging-email-technology\">the power of artificial intelligence<\/a>!<\/p>\n<div class=\"cta\">\n<table style=\"background-color: #f2f3f6;\">\n<tbody>\n<tr>\n<td class=\"block-1\" style=\"padding: 20px 10px 20px 20px;\"><img decoding=\"async\" class=\"alignnone size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/checklist-recommended-clients.png\" width=\"601\" height=\"774\" \/><\/td>\n<td class=\"block-2\" style=\"padding: 20px 20px 20px 10px;\">\n<p class=\"zero\"><strong>Ensure your designs come across right<br \/>\n<\/strong><\/p>\n<p class=\"zero\">Broken emails lead to less conversions. Preview your emails across 100+ email clients, apps, and devices to ensure an on-brand, error-free subscriber experience. Every time.<\/p>\n<p class=\"zero\"><a class=\"btn medium orange button\" rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-testing\/\" target=\"_blank\" rel=\"noopener noreferrer\">Optimize your emails<\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p><em><br \/>\nThis blog post was originally published on January 9, 2020, by Jason Rodriguez. It has been updated for clarity and with new information on September 25, 2022.<\/em><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>An email marketers guide to animated GIFs in email! Learn about the benefits, examples, how to create them, and email client support. Read now to get started! <\/p>\n","protected":false},"author":17,"featured_media":79704,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"tags":[240,468],"blog_category":[10303],"class_list":["post-17171","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-animated-gif","tag-images","blog_category-email-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Create &amp; Add an Animated GIF to an Email - Litmus<\/title>\n<meta name=\"description\" content=\"An email marketer&#039;s guide on how to add animated GIFs in email! Learn about the benefits, how to create them, examples, &amp; email client support. Get started now!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.litmus.com\/blog\/a-guide-to-animated-gifs-in-email\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create &amp; Add an Animated GIF to an Email\" \/>\n<meta property=\"og:description\" content=\"An email marketer&#039;s guide on how to add animated GIFs in email! Learn about the benefits, how to create them, examples, &amp; email client support. Get started now!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.litmus.com\/blog\/a-guide-to-animated-gifs-in-email\" \/>\n<meta property=\"og:site_name\" content=\"Litmus\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/litmusapp\" \/>\n<meta property=\"article:published_time\" content=\"2023-09-25T22:07:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-21T15:13:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/09\/Guide-to-Animated-GIFs-refresh.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1380\" \/>\n\t<meta property=\"og:image:height\" content=\"725\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@litmusapp\" \/>\n<meta name=\"twitter:site\" content=\"@litmusapp\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create & Add an Animated GIF to an Email - Litmus","description":"An email marketer's guide on how to add animated GIFs in email! Learn about the benefits, how to create them, examples, & email client support. Get started now!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.litmus.com\/blog\/a-guide-to-animated-gifs-in-email","og_locale":"en_US","og_type":"article","og_title":"How to Create &amp; Add an Animated GIF to an Email","og_description":"An email marketer's guide on how to add animated GIFs in email! Learn about the benefits, how to create them, examples, & email client support. Get started now!","og_url":"https:\/\/www.litmus.com\/blog\/a-guide-to-animated-gifs-in-email","og_site_name":"Litmus","article_publisher":"https:\/\/www.facebook.com\/litmusapp","article_published_time":"2023-09-25T22:07:05+00:00","article_modified_time":"2024-08-21T15:13:42+00:00","og_image":[{"width":1380,"height":725,"url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/09\/Guide-to-Animated-GIFs-refresh.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_creator":"@litmusapp","twitter_site":"@litmusapp","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.litmus.com\/blog\/a-guide-to-animated-gifs-in-email#article","isPartOf":{"@id":"https:\/\/www.litmus.com\/blog\/a-guide-to-animated-gifs-in-email"},"author":{"name":"","@id":""},"headline":"How to Create &amp; Add an Animated GIF to an Email","datePublished":"2023-09-25T22:07:05+00:00","dateModified":"2024-08-21T15:13:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/a-guide-to-animated-gifs-in-email"},"wordCount":11,"publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/a-guide-to-animated-gifs-in-email#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/09\/Guide-to-Animated-GIFs-refresh.png","keywords":["Animated Gif","Images"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.litmus.com\/blog\/a-guide-to-animated-gifs-in-email","url":"https:\/\/www.litmus.com\/blog\/a-guide-to-animated-gifs-in-email","name":"How to Create & Add an Animated GIF to an Email - Litmus","isPartOf":{"@id":"https:\/\/www.litmus.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/a-guide-to-animated-gifs-in-email#primaryimage"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/a-guide-to-animated-gifs-in-email#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/09\/Guide-to-Animated-GIFs-refresh.png","datePublished":"2023-09-25T22:07:05+00:00","dateModified":"2024-08-21T15:13:42+00:00","description":"An email marketer's guide on how to add animated GIFs in email! Learn about the benefits, how to create them, examples, & email client support. Get started now!","breadcrumb":{"@id":"https:\/\/www.litmus.com\/blog\/a-guide-to-animated-gifs-in-email#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.litmus.com\/blog\/a-guide-to-animated-gifs-in-email"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/blog\/a-guide-to-animated-gifs-in-email#primaryimage","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/09\/Guide-to-Animated-GIFs-refresh.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/09\/Guide-to-Animated-GIFs-refresh.png","width":1380,"height":725,"caption":"illustration of person running meant to emulate an animated GIF"},{"@type":"BreadcrumbList","@id":"https:\/\/www.litmus.com\/blog\/a-guide-to-animated-gifs-in-email#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.litmus.com\/"},{"@type":"ListItem","position":2,"name":"How to Create &amp; Add an Animated GIF to an Email"}]},{"@type":"WebSite","@id":"https:\/\/www.litmus.com\/#website","url":"https:\/\/www.litmus.com\/","name":"Litmus","description":"Are you getting the most out of your email marketing?","publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.litmus.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.litmus.com\/#organization","name":"Litmus Software","url":"https:\/\/www.litmus.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","width":600,"height":314,"caption":"Litmus Software"},"image":{"@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/litmusapp","https:\/\/x.com\/litmusapp"]},{"@type":"Person","@id":""}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/17171","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/comments?post=17171"}],"version-history":[{"count":15,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/17171\/revisions"}],"predecessor-version":[{"id":100601,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/17171\/revisions\/100601"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media\/79704"}],"wp:attachment":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media?parent=17171"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/tags?post=17171"},{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/blog_category?post=17171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}