Personalized animated GIFs are a great way to grab a customer's attention. It's a thumbnail, but it moves, and movement is the sure way of moving eyeballs to where you want them to be. It can also be used as the complete project, as it's a good medium for short concise messages such as special offers.
Idomoo allows you to render an animated GIF from any storyboard. Here's a list of several best practices to consider. Read on.
The animated GIF will most often be used in the email that will direct the viewer to the video landing page, however it can be a short video with a concise message in its own right.
Here are thing to watch out for:
- Include the first name so the viewer knows this is a message truly for them.
- Leverage meaningful data & personalization to make the message relevant to the individual:
- Scene selection: You can change what scene(s) each user sees based on their data. It can be a completely different GIF, in fact.
- Data personalization: Text on-screen can be data-driven (dates, account types, and messaging can all be tailored).
- We recommend the final file size of the GIF won't be higher than 1Mb. However, make sure the final size of the GIF is definitely not higher than 10Mb. To learn how read the part of the article called Getting GIFs Down to Size. Getting the size down will have a major effect on your style choice, so make sure you understand the limitations.
- The first frame of the GIF should show all important information. Some email clients such as older versions of Outlook won't play the GIF—they'll just show the first frame, so the first frame should hold all that you need. Remember, GIFs are looping, so the first frame of the GIF doesn't have to be the first frame of the animation.
- In case the GIF is just a thumbnail, make sure customers won't think the GIF is the video by asking them to click the thumbnail. Embed the CTA in the GIF itself rather than watermarking a play button on it.
- Loop the animation. You want the customers to notice the animation. Having it play only once means they might miss the animation.
- As you are looping, make sure the cut between the last and first frames work nicely.
Getting GIFs Down to Size
The GIF format is a very old format—from 1987 in fact! Because of this it uses very old technology for compression. To get your file size down, and definitely lower than 10Mb there are a number of variables to consider:
- The resolution of the image:
This is easy to understand. The bigger the image, the more space it takes. If you have very flat colors, this will have little effect, but otherwise, this has a big effect on file size. We recommend 480p or lower, but definitely don't go above 720p.
- The total number of frames:
In GIFs each frame is compressed separately, so the more frame you have the heavier your GIF will be. The number of frames is controlled by the duration of your video in seconds, times your FPS. Read about both in the next two bullets. The total number of frames should be ~100, and should definitely not go above 200.
- The duration of the animation:
The longer the videos, the more frames there are to compress. The standard is 6 seconds. Try and keep it below 20 at the most.
- The number of frames per second. This is called FPS:
Low FPS values mean less frames per second. The less frames you have to compress, the smaller the resulting file size. If your animation is very detailed it means getting the FPS down is difficult. Use simple animation.
- The amount of colors in the animation:
This has the most effect on file size. Compressing 20 frames of a flat orange image will result in a very small file. While compressing a single frame of colorful noise such as a field of flowers, will result in a very big file size. Gradients are also notoriously difficult to compress, so hands off those as well.
Though the above restrictions are, well, quite restrictive, there's a lot you can do with GIFs.
In the examples below I have chosen GIFs that tell a whole story, though the can be simpler and just direct you to the landing page where the video can share more details:
Idomoo's GIF email signature explains what Idomoo does in under 2Mb. Though the frame count is well above the recommendation (312 frames!) we have compensated with a small frame size (312 x 176) and a narrow color palette.
This examples shows a clear message in a tight space of time, with a clear call to action. This can direct customers to a full video, or just a webpage, but the message in the email is already very clear. The final size of the GIF is under 500Kb, achieved by 112 frames, a resolution of 640 x 360 and a very simple color palette.