{"id":3764,"date":"2019-12-20T00:00:00","date_gmt":"2019-12-20T00:00:00","guid":{"rendered":"https:\/\/www.litmus.com\/blog\/animated-gifs-in-email-10-tips-for-keeping-files-sizes-small\/"},"modified":"2024-08-30T10:22:03","modified_gmt":"2024-08-30T14:22:03","slug":"animated-gifs-in-email-10-tips-for-keeping-files-sizes-small","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/animated-gifs-in-email-10-tips-for-keeping-files-sizes-small","title":{"rendered":"Animated GIFs in Email: 10 Tips for Keeping File Sizes Small"},"content":{"rendered":"

Surprising. Entertaining. Informative. GIFs are all of these things, and marketers and customers alike love these fun email additions. But you know what else GIFs can be? Big. It\u2019s easy for a GIF file size to grow to bloated, behemoth proportions that interfere with email load times.\u00a0<\/span><\/p>\n

So what\u2019s an email marketer to do? Evan Diaz<\/a>, the Lead Designer at Lucky Red Pixel<\/a>, has the answers. Here\u2019s what we learned from his Litmus Live presentation, \u201cCreating Animations That Delight and Help Subscribers.\u201d\u00a0<\/span><\/p>\n

Tiny but mighty: Why keeping GIF file sizes low is so crucial<\/span><\/h2>\n

Large GIFs lead to slow email loading or downloads that eat up a subscriber\u2019s phone data plan. Both of these can leave subscribers frustrated, which jeopardizes all your hard work and impacts your campaigns\u2019 performance. That\u2019s why keeping GIF file sizes small is one of the key challenges email marketers have to master if they want to use the power of animated GIFs in their email campaigns<\/a>.\u00a0<\/span><\/p>\n

How big can a GIF in email be?<\/span><\/h3>\n

In general, the smaller your GIF is the faster it loads in your emails\u2014and the shorter your load times, the better the experience is for your subscribers. But what\u2019s the maximum file size that\u2019s acceptable for a GIF? Evan advises keeping files under 5 MB. At 5 MB, a subscriber will probably only have to wait a few seconds for images to load. Here at Litmus, we\u2019re trying to keep GIFs under 1 MB to guarantee speedy load times and to not eat up too much of our readers\u2019 data should they open our email on mobile while on the go.\u00a0<\/span><\/p>\n

Focus on file size optimization throughout the GIF creation process<\/span><\/h2>\n

Reducing GIF file size starts on the drawing board. Once you have an idea for your GIF, there are some design choices you can make to keep sizes in check. Plus, when it comes to finetuning your GIF in Photoshop and processing it for use in email design tools<\/a>, there are additional tricks you can utilize to stop your GIFs from becoming too heavy. Here\u2019s the top ten tips for keeping GIF sizes small:<\/span><\/p>\n

1. Stick to simpler (AKA faster) transitions<\/span><\/h3>\n

If your animation involves transitions, stick to \u201ccuts\u201d over \u201cfades.\u201d Whereas cuts jump right from one visual to the next, fades take their time to deliver the same message. Fades involve more frames, more colors, and thus come with larger file sizes. The example below shows how significant the impact of a fade transition is on file size. If you choose a fade effect over a simple cut transition, your GIF file is 7.8 times larger.\u00a0<\/span><\/p>\n

\"Example<\/figure>\n

Not a fan of cut transitions? Evan suggests using a \u201ctranslate\u201d transition, where one frame slides over the previous image. This way, you get interesting movement without bogging down the file with more color transitions from a fade.\u00a0<\/span><\/p>\n

2. Use illustrations over photos when possible<\/span><\/h3>\n

In the same way that processing more colors in a fade transition increases GIF file size, so too do the complex colors in photographs. Illustrations will have more solid-color components than a photo or video, which typically makes them less heavy.\u00a0<\/span><\/p>\n

\"Example
Did you spot the subtle movement in this GIF from Marvel?
\nIt uses a lot of colors, so the impact on file size is huge. <\/span><\/figcaption><\/figure>\n

Another benefit of simply-colored illustrations is that you can incorporate more movement and animation with a smaller file size footprint. Subtle changes in a photograph are more cumbersome to load than multiple animated frames for an illustration that tells a story. If there\u2019s no way around using a photograph, then you should isolate the animated portion. Instead of the entire image being a GIF, you can significantly decrease the file size by leaving all non-moving sections as images.\u00a0<\/span><\/p>\n

3. Overlay colors to limit the color palette in photographs<\/span><\/h3>\n

Another way to bring down the file size when you need to use a photo or an embed video in email<\/a> is to overlay a single color on the GIF. A monochrome overlay gives the GIF an on-brand tint and limits the number of different colors the GIF needs to process. The result: smaller file sizes!<\/span><\/p>\n

\"Examples<\/figure>\n

4. When turning a video into a GIF, import every other frame to a layer<\/span><\/h3>\n

Photoshop will convert your video frames to layers when you select File > Import > Video Frames to Layers. This is a handy tool, but it can lead to a runaway GIF file size if you aren\u2019t careful. <\/span><\/p>\n

Optimize your file size by limiting layers to every 2 frames. This option will take every other frame to create layers, which reduces file size. If taking the layers down to every other frame isn\u2019t enough, Evan noted that having Photoshop only pick up one out of every 4 frames is still a good place to start.<\/span><\/p>\n

\"Screenshot<\/figure>\n

5. Delete duplicate frames<\/span><\/h3>\n

Remember: The more frames you use in your GIF, the bigger the file size. After importing your GIF to Photoshop, you can look at the animation frame-by-frame. If there are multiple layers with the same frame image, give the duplicates the boot.\u00a0<\/span><\/p>\n

Here at Litmus, we often use <\/span>EZGIF<\/span><\/a> to optimize our animated GIFs. The free online GIF optimizer gives you the option to easily delete duplicate frames if you don\u2019t have access to Photoshop or a similar tool.<\/span><\/p>\n

6. If you remove duplicate frames, adjust delay to keep GIF on pace<\/span><\/h3>\n

If you’re removing frames from your GIF, you\u2019ll need to change the frame delay to keep GIF timing the same. Simply \u201chold\u201d the single frame for equivalent of time it would have taken to run through the duplicate frames you\u2019ve deleted\u2014that’s how you keep the GIF on pace.<\/span><\/p>\n

Keep in mind that there\u2019s a simple inverse relationship in GIFs: the higher the frames per second, the less jerkiness in playback. A delay of .03 will likely be the default Photoshop gives your uploaded GIF, which creates a 30 FPS animation that loads very smoothly. But the more frames you need to load per second, the larger your file size will be. You\u2019ll want to find the sweet spot that keeps your animation smooth enough while keeping your file size low.\u00a0<\/span><\/p>\n

7. Choose adaptive color reduction<\/span><\/h3>\n

When you save your GIF for the web, you\u2019ll be met with a few options for color reduction. Evan\u2019s best practice suggestion is \u201cadaptive\u201d color reduction. This algorithm samples colors that appear most in an image and provides a fair balance between file size and color fidelity.<\/span><\/p>\n

8. Keep \u201ctransparency\u201d turned on<\/span><\/h3>\n

GIFs often handle transparently poorly, applying a harsh white edge around elements when set on a transparent background. If you\u2019d like to use animations on a transparent background, <\/span>animated PNGs are the way to go<\/span><\/a>. So what does that \u201ctransparency\u201d checkbox in Photoshop actually do? It allows pixels that didn\u2019t change from frame to frame to remain as they are. That means that areas on the GIF that remain constant from one frame to the next don\u2019t need to bother reloading. Evan suggests leaving this turned on most of the time, as it can reduce your file size by a third or more.\u00a0<\/span><\/p>\n

\"Screenshot<\/figure>\n

9. Balance the color table with dither<\/span><\/h3>\n

During export, you also have the option to adjust the number of colors saved to the image file\u2019s color table. The lower the number of colors, the smaller the file size. To get the best combination of optimized file size to color fidelity, choose:<\/span><\/p>\n

    \n
  • 128-256 colors for videos<\/span><\/li>\n
  • 64-128 colors for animated illustrations<\/span><\/li>\n<\/ul>\n

    If you want to really fine-tune your file size, you can combine your color table changes with the dither percentage. A higher dither percentage leads to smoother gradients, even with a limited color table. For example, a greyscale with only 8 color stripes becomes a smooth gradient with 100% dither turned on. A higher dither combined with a color table on the lower end for videos just might be the sweet spot for a GIF that looks nice yet loads quickly.<\/span><\/p>\n

    10. Simply reduce video quality and file size with Lossy<\/span><\/h3>\n

    Want to optimize your GIF file size without all the fine tweaking involved in color tables and dither? Selecting a Lossy level of 20% to 40% reduces file size, and some quality, in one fell swoop. You can play around with these percentages to find the balance of quality and file size that\u2019s right for you.<\/span><\/p>\n

    Watch Evan\u2019s full Litmus Live talk<\/span><\/h2>\n

    Are you looking for even more tips on how to create animations that delight and help subscribers? You can watch Evan\u2019s full Litmus Live talk below!<\/span><\/p>\n