Using animated GIFs in Email
Using animation within your email campaigns can be an effective way to bring attention to your message. They are commonly used to make your call to action stand out or just add a little fun to your email.
People often ask me about best practices when it comes to using GIFs within email. These include technical considerations, size limits and how best to use them. Fortunately there are some really simple steps you can follow to ensure your animation rocks.
Simple GIF guidance:
- Keep your GIF file size as small as possible whilst maintaining quality
- Make sure the first frame of the animation is something you wish users to see should their email client not support it (e.g. Outlook on the desktop)
- Be subtle with your animation (this is an email so we’re not trying to include an entire movie scene here)
- GIFs are suited to animate illustrations not necessarily photo realism
I know you've all been waiting for them… So here are a few examples I've spotted in the wild by various brands:
The above GIFs obviously had a lot of time and effort put into them. Three of these can be described as cinemagraphs. This is where a single frame on it’s own would make for a good photograph yet part of the image is subject to movement or animation.
When using Cinemagraphs you will want to be careful with file sizes as they can quite easily become too large and take forever to download on a slow mobile connection. They’re so heavy that they even took a while to load on Medium over my work connection.
Check here for more cinemagraph inspiration on Reddit.
Here are some final examples then I promise that’s it. No more GIF spam.
Here we have a GIF from Campaign Monitor. Useful for explaining new system features.
The subtle use of movement on the present above adds a little intrigue to this customer offer email.
Time for a little expanding on my simple guidance list above.
How large should my GIF file size be?
So you want to make an awesome looking GIF but you’re not sure on the file size you should be aiming for. I'm often asked what the maximum size of the file should be but I’ll never give you an exact answer.
When creating your GIF the answer will depend on:
- The design of your GIF
- What you intend to accomplish
- A little common sense when it comes to knowing your target audience
You’ll know that the more data a user has to download the longer it will take to display. You also need to keep in mind that many users will be opening your emails on mobile devices which means they could be on slower connections and a data usage tariff. As such it’s probably unreasonable to hit them with anything large in size.
To give you an indication of download speeds available over mobile here in the UK this report from Ofcom states that the average 3G connection speed in several major cities is currently 6.1Mbps.
This is by no means a highly accurate representation of the entire country.
Taking the average 3G connection speed of 6.1Mbps if you were to create a 500KB animated GIF, in theory, this would take 0.65 seconds to download. You can easily get results for yourself by typing something like this into Google:
500 kb over 6.1mbps
It’s up to you to decide if that’s acceptable for your users. Why not test it? Also keep in mind the total weight of your email. Not just the animated GIF.
Some email broadcasters will also limit the file size of images they broadcast. This is a defensive measure on their part to help prevent accidental emailing of large files to potentially millions of people. That 500KB GIF you have sent to a million people, even if hosted on a server, is a lot of bandwidth. Make sure to check with your email broadcaster on size limits.
Final Thoughts
The nature of the GIF file format is optimised for use with solid colours rather than gradients. This is down to the compression algorithms used within the format being more efficient at storing areas of solid colours than say the constantly changing shades of colours found within photos or gradient effects.
This means GIFs in general lend themselves to more illustrative purposes rather than photo realism. Obviously, just like the cinemagraphs above, as long as you are careful there are exceptions.
GIFs become animated by adding additional frames to the file. Therefore the longer your animation runs the larger your file size will be. This is primarily the reason why you should be aiming to keep your animation as short and as subtle as possible. Perhaps aim to make it look great whilst looping rather than animating something once and stopping.
Hopefully after reading all of this you now have enough information in order to know when you should and should not use GIFs within your campaigns. Also how to make them as effective as possible when using within emails.
Now go get creative!
For further reading and credit to people whose GIF’s I may have re-used above check out these great posts on the same subject:
https://litmus.com/blog/a-guide-to-animated-gifs-in-email
https://www.campaignmonitor.com/blog/post/3682/animated-gif-support-in-email/
http://www.adestra.com/using-animated-gifs-emails/
http://blog.raventools.com/animated-gifs-in-emails/
