With overloaded email inboxes, it’s difficult to create a message that really grabs the reader’s attention. One way to do this is to add motion–in the form of an animation. Be warned this approach comes with certain challenges. While web pages can contain animated content of many kinds (such as embedded videos), most of these content types do not work in emails. Email messages can contain graphics, but not many graphic formats can be animated. For example a JPEG file, one of the most common formats for graphic content in emails, can not contain animated content.
GIF images - The exception
The one exception is the animated GIF image format, which you will occasionally see used in emails. However, this too has problems. For one thing, animated GIFs tend to be fairly clunky-looking, with jerky animation. Any attempt to make a standard animated GIF animate more smoothly, tends to result in a very large file, often too large to include in an email. For this reason, the animated GIF format generally works best for simple, cartoon-like animations–shown above. So how can we get around these limitations to include video-like animation in an email?
Enter the cinemagraph
A cinemagraph is a form of animated GIF. It is created by using a video clip as a starting point, and then “freezing” all but a small area of the video. The result is an image that is mostly static, but has animation in certain limited areas. Since the actual amount of animation involved is small, the file size of a cinemagraph is much smaller than what a standard animated GIF of the same dimensions would be. Also, because the file starts out as a true video, it is more photo-realistic than many animated GIFs.
Creating the 2018 YPPS holiday card
To create the YPPS holiday card, we started with some stock video footage of a fireplace with a mug of cocoa and bowl of popcorn in the foreground. We took just a small section of the video - a few seconds long - and edited it so that it could be looped smoothly. Then we made a still image of one frame of the video, and laid that over the top of the actual video footage. Certain areas of the still image were masked off - the fire in the fireplace, and the steam rising from the cup - so that the video was visible through the masked areas of the still image. Next, we edited the image to replace the original mug with a Yale mug and remove some unwanted content in the image (a bottle of mustard behind the popcorn bowl), and added Handsome Dan in the background. (Dan’s tongue was animated to add a little more realism and a touch of humor). Finally, text was added to the holiday message. The finished cinemagraph was saved in animated GIF format so that it could be sent out in an email.
Here is a screen capture of the original video:
And here is the finished cinemagraph:
Designers beware - Not all email programs support cinemagraphs
While cinemagraphs have many advantages, it should be noted that they are not absolutely perfect, as a method for adding animation to emails. The most serious issue is that the final file does have to be an animated GIF, and while most email client programs do support animated GIFs, there are some exceptions, the most important one being Microsoft Outlook (PC version). Programs like Outlook will still display the image, but it won’t be animated - it will simply display as a still image of the first frame of the animation. The best way to address the issue of non-compliant email programs is:
- to make sure that there is no important content in the animation that is not visible in the first frame (e.g. a text message that fades in part way through the animation), and
- to include a link in your email to a version of the image that has been uploaded to a web page, so that users of Outlook still have the option of seeing the full animation. (We added the text “This is an animated card - if your email program does not support animation, click here to view the card in your web browser” below the image in our email.)
For more information on cinemagraphs and/or custom email content creation, contact Nick Appleby at nicholas.appleby@yale.edu.