If you grew up in the ’80s and ’90s like I did, you remember when VHS tapes overtook Betamax as the preferred video recording format. While the video quality and recording time of VHS offered slight improvements, there wasn’t a stark contrast between the two formats. When DVDs were introduced, however, the difference was enormous, and DVDs became the prevailing video format far faster than VHS overtook Betamax.
Such quality differences between Cinemagraphs and animated gifs are leading to a pronounced migration among email marketers over to Cinemagraphs.
It seems like just a few years ago that animated gifs started to make their way into emails. Static emails were overtaken by animated gifs as email marketers saw higher click-thru rates when leveraging animation. In fact, Experian CheetahMail research on the topic found that 72 percent of email marketers who leverage animated gifs or Cinemagraphs experience higher click-thru rates.
Flixel, the company behind the MacOS Cinemagraph Pro software that helps you create visually stunning Cinemagraphs, worked with DoubleClick to find that Cinemagraphs generate 5.6 times higher click-thru rates, compared to still images.
What’s the difference between Cinemagraphs and animated gifs?
The differences between Cinemagraphs and animated gifs are actually quite small, but they make a large difference on the professional impression left on your email recipients.
An animated gif is just that, a .gif-formatted image that has animation saved into its digital fingerprint. A Cinemagraph, however, can be either an animated gif or a web-friendly video. If you’re seeing a Cinemagraph in an email, it is actually just an animated gif that follows the four design principles outlined below. If you’re seeing a Cinemagraph on a website, it is often a video pretending to be an animated gif — it has no stop/play controls, it has no audio, and is set to auto play. Generally, Cinemagraphs are HTML5-based, meaning they don’t require an antiquated Adobe Flash component.
As a quick summary, here are two images that illustrate the difference.
Animated Gif:
Cinemagraph:
Here are the four main differences between Cinemagraphs and animated gifs:
Artistic aesthetic. In the two examples above, you’ll see a considerable artistic difference between the two images. The animated gif has a more free-spirited approach to it and looks like something you would find on a social media feed. The Cinemagraph, in contrast, is more professionally appealing and could be found in an email message targeting a more professional audience.
Photo quality. Because Cinemagraphs benefit from smaller image movements (see next point) they can boast higher resolution and better-composed photography. An animated gif with a lot of movement takes more storage space and thus takes longer to download in a mobile-consumed email — hence the poorer quality.
Movement isolation. Unlike in the animated gif above, where you see the drink container bouncing and flipping all over the image, in a Cinemagraph the movement is subtle. Generally, the entire image is still, with just an isolated component that moves. In email marketing, this is an excellent tactic that draws more attention than a movement heavy image.
For example, in the image to the right (courtesy of Experian), you’ll notice that the dog is blinking. When I first viewed this image it was very subtle, and I wasn’t sure if there even was movement. I had to watch it for a few seconds to recognize the movement. If this image had been in an email I would have spent an extra 4 or 5 seconds looking at the email — just what an email marketer wants.
Loop effect. Almost all animated gifs, like the example above, are on an obvious loop. A good Cinemagraph (which actually is on a loop) tricks the viewer by not looking like it’s on a loop. In the example above, there are the slight movements of the water movement behind the jogger. Those little waves in the water are looping, though that is not immediately obvious.
How do you create a Cinemagraph?
Because email clients cannot play back videos, you must save your Cinemagraph as an animated gif. There are a lot of options for creating animated gifs. Here are a few of the most popular methods:
Earlier in this article, I mentioned Flixel’s Cinemagraph Pro. If you’re getting serious about Cinemagraphs and you have a Mac, I would highly recommend you invest the $200/year to get access to the full Flixel suite of software. It is the best Cinemagraph creation software out there and will allow you to create stunning Cinemagraphs, as well as save them in a more email-friendly animated gif format.
Photoshop. If you’ve got some basic Photoshop skills you can create your Cinemagraph inside this tool, and save it out as an animated gif. Dan Denney, UI extraordinaire, has created a free and easy-to-follow tutorial all about “getting GIFfy with Photoshop.”
If you’re a Mac user who doesn’t own Photoshop, I recommend GIF Brewery. It’s a free program that enables you to easily turn full-fledged Cinemagraphs into animated gifs.
For those sporting a Windows operating system who don’t want to use Photoshop, I recommend you try out Instagiffer. It is a free solution that makes turning videos, Cinemagraphs, and other sources into animated gifs with a few clicks.
2 important points to remember about Cinemagraphs and email marketing
All the most popular email marketing solutions (Hubspot, Campaign Monitor, Marketo, etc.) enable you to insert animated gifs into the emails you are sending. The same cannot be said for receiving animated gifs, though. Here are a few points to remember when using Cinemagraphs in your email marketing.
Small(ish) file size. Because many emails are opened on mobile devices with slower download speeds, make sure your emails are rather lightweight. When using a lot of images in your emails, use images that have been saved in the smallest file size appropriate. In this article on email marketing best practices, you can learn about using TinyPNG to get your images the right size. In general, emails that are 100kb or less have higher deliverability rates. If you’re including an animated gif you should expect your emails to be considerably larger, and you will see a slight drop in deliverability rates. What you gain in click-thru rates, however, more than makes up for the non-deliverable emails. If including a Cinemagraph in your emails aim for 600kb or less.
First frame. While almost all email clients allow for animated gifs, there is one big holdout that still does not accept them: Microsoft Outlook. Outlook will not render the animation and instead will show only the first frame. That is why it is imperative that the first frame of the animation be sufficient to communicate your message. Take, for example, the animated gif used by House of Cards promotional team. If loaded in Outlook the first frame (every frame in fact) contains all you need to see to understand what they are communicating.
I’m ending with this House of Cards Cinemagraph example because it illustrates the value of Cinemagraphs over animated gifs. The motion in the automobile windows is a subtle touch that grabs the attention without shouting “Look at me, I’m a moving meme!” The photo quality is high and the artistic relevance ties into the overall dark and moody theme of the television series.
What compelling examples have you seen of Cinemagraphs in email marketing? Let us know in the comments.
Comments