Home Blog Animated .gif: how do you use it?

Share this post

Animated .gif: how do you use it?

Written by Leon Pruijn / 4 October 2017 / Innovation / Content

It’s hard to picture our lives – which increasingly take place online – without the animated .gifs. In blogs, on social media, and in chats with our friends. But emails are also seeing a rise in use of animated .gifs. Our attention is always drawn toward moving images. And because the support for video remains sub-optimal in most email clients, animated .gifs offer a good alternative. The ideas and opinions on the use of animated .gifs vary hugely. So what is the best way to use them? Read a few suggestions in this blog.

As direct communication

In 2015, Google responded to a journalist’s questions about entering the streaming video games market with an animated .gif that basically said it all. The reaction was striking, and opened the door for a type of corporate communication that had not been used much before. Sometimes, a good animation says it all. Even as a reaction to a question or remark, there is always a .gif that matches what you want to say, or show.

animated .gif in email

Draw attention to the most important information

When your readers receive a long email with a large amount of information, they generally first scan the email, and tend to miss the most important information. By using animated .gifs, you can draw attention to specific information, or strengthen a certain concept.

Support for animated .gif and support for video in email

Support for animated .gif in email is much better than support for video in email. The table below shows you which email clients support video in email, and which support animated .gif. The difference is vast. You can see that with the exception of Outlook 2007-2013, all popular email clients support animated .gifs, whereas support for video is limited to just 4 email clients.

e-mailclients die animated .gif supporten

Animated .gif as an alternative for video

So most email clients do not yet offer support for the use of video in emails. As you can see in the schedule above, at the time of writing, videos are only correctly displayed in Apple Mail, Thunderbird, the standard mail app in iOS10 and the mail app for the Samsung Galaxy.

Limited support already makes it challenging, but video also has the unfortunate drawback of having rather significant file sizes. If your reader has a limited internet connection, resulting in long email load times, your reader might give up before even viewing the email. If the reader happens to not be connected to the Wi-Fi, you are also quick to get him or her over their data limit. All in all, there’s plenty of reasons to take your file size into account. A good guideline is to not use files larger than 500 kb.

So in order to avoid these issues, we can use .gifs as an alternative for video. We can give small previews of a video using .gifs, and link through to the full version.

If you want to make your own animated.gif, or if you want to use a pre-made .gif, you can have a look at the Giphy collection for inspiration!

Which steps are important?

Choose your starting frame: generally speaking, animated .gifs are well supported. They do well in all webmail clients, but also in most desktop and mobile email clients. The main exception to this is Microsoft Outlook 2007-2013. These versions of Outlook only show the starting frame, not the entire animation.

So be sure to select your starting frame carefully. If you plan on continually looping the .gif, you can have it start at any random frame. But if your .gif for instance has a completely white frame, you will have to choose a starting frame that directly shows you what the .gif is trying to convey.

You can make an animated .gif with services like Photoshop and Giphy, and adjust the order of the frames. Having trouble? Photoshop and Giphy can help you along.

Keep an eye on file size: animated .gifs consist of many different frames, so like video, these files can get big rather quickly. In order to minimise your .gif’s file size, you could work with a tool like ImageOptim. This tool lets your readers download the email and the .gif faster. So you can use your .gif optimally!

Limit the use of animated .gifs: too many .gifs in a single email can start to feel like a carnival. That’s probably not what you’re going for. So make a well-considered choice when you want to use an animated .gif, and consider how you want to use it. The .gif has to support the goal you have in mind, not overshadow it.

Make your own animated .gif


1. Import the video

Open Photoshop

Go to File > Import > Video Frames to Layers

Select the video, click Open

Click OK to convert the video to frames for animated .gifs

Note:

It might not be possible to import and convert a video that is too long. You can limited the number of frames under ‘options’. You can import the entire video, or select part of the video. Another option is to divide the number of frames into steps, and for instance only import 1 out of every 2 frames.

.gif creëren stap 1

2. Go to Window > Timeline and open the Timeline panel

Click the button in the middle of the panel and select Create Frame Animation. Then click the button to create a new frame animation.

.gif creëren in Photoshop stap 2

3. Convert the layers to animation frames

Click the menu icon in the top right corner of the Timeline panel

Click Make Frames From Layers.

This will convert all layers in the Layers panel to frames for your animation.

Click the Play button at the bottom of the Timeline (or press the space bar) to preview the animation.

.gif creëren in Photoshop stap 3

4. Loop the animation

Click the repeat menu at the bottom of the Timeline panel and select Forever. This loops the animation indefinitely.

.gif creëren in Photoshop stap 4

5. Export the animation as a .gif

Go to File > Export > Save for Web (Legacy)

1. Select GIF 128 Dithered from the Preset menu.

2. Select 256 from the Colours menu.

3. If you want to use the GIF online, or wish to limit the animation file size, you can adjust the Width hand Height in Size options.

4. Select Forever from Looping Options menu.

.gif creëren in Photoshop stap 5

Click the Preview… button at the bottom left of the export screen to preview your GIF in a web browser.

Click Save… and select where you want to save the animated .gif.

Done, your animated .gif is now a fact.

Animated Gif

So, give your emails a boost!

Animated .gifs are amazing and can add so much to your emails, but use them in moderation. One, or maybe two .gifs can work very well and serve as a good alternative to video. But always consider their use carefully. They have to support the goal you have in mind, the file size has to be manageable, and you have to consider which starting frame you want to use, so your email (and .gif) look good in any situation. If you always follow these steps, you can give your emails a wonderful boost with amazing animations!

animated .gif

HDo you have any tips, or know of any handy tools? Let us know! Join the LinkedIn group E-mailmarketing Nederland and share your knowledge with other people in the field.

Scroll omhoog