Your Guide to Increasing Email and Web Conversions Over 25% with Animated Video GIFs

  • By: Craig Lillard
  •   0
  •   1267

Email is considered by many the most powerful internet marketing tool in existence.  It is the ideal way to continually reach the people who have shown interest in your product or organization.

An Experian marketing report has shown that, on average, Email marketing returns between $45 and $51 for every $1 spent.  That's incredible!  Therefore, it is crucial for any business or organization to gather an email list of vetted and interested subscribers and then use that list wisely to share your company with those who are interested in what you have to offer.

An Email marketer needs to understand open rates, clickthrough rates, and conversion rates, all of which are important in realizing how your list is interacting with your emails.

Open Rates measure the number of people that have opened your email.  The email delivery company MailChimp measures email opens by placing a small .gif image in the email with a unique URL.  Each time that image is downloaded from their server, an email is considered "opened."

Clickthrough rates measure when someone clicks a link from within your email.

Conversion rates are more difficult to measure and some type of tracking software or script is generally needed to do so.  A "conversion" happens when the end-user not only opens or clicks in an email, but also completes a "goal."  That goal could be signing up for an account on your website, or it could be buying a product.

Email marketers must always be in search of news ways to improve each of these goals: opens, clickthroughs, and conversions.  One of the most interesting ways to increase all three is to use motion in your email.  

You probably think I am going to suggest using Stock Video, after all, Stock Video is RevoStock's bread and butter! Unfortunately, there is a problem with using video in email.  When it comes to video, Email is the final unexplored frontier.  There really isn't a good or proper way to embed a video in an email.  The Email service Constant Contact states:

"Embedding a video directly into your email, event-related email, or survey invitation can increase the chances that your email becomes undeliverable because some email client's can't play videos and some Internet Service Providers (ISP's) block video attachments because they are commonly used to spread viruses."

Because of this, emails are often wastelands of staticity. 

ENTER THE GIF

Whether you pronounce it with a hard 'G' like I do, or a soft 'G' like the Peanut Butter, in the last few years, the Animated 'GIF' has seen a significant resurgence.  

GIF stands for Graphics Interchange Format.  This classic image format was created by Steve Wilhite while he was working at CompuServe in 1987.  "If you want lossless, compressed graphics, there is nothing better than GIF,” said Alexander Trevor, the chief tech officer at CompuServe at the time.

On June 15, 1987 a new release of the image format allowed people to create "compressed animations using timed-delays."  This changed everything and in the early days of the web the Animated GIF was king!

"Under Construction" GIFs like these were very popular in the 90s.


Eventually, however, most in the design realm realized how tacky these animations had become and the popularity of the animated GIF all but went extinct.

Recently, however, the GIF has seen a grand resurgence!  As broadband speeds increase, it isn't unreasonable for GIFs to be used where they would have been considered too large or cumbersome in the past.  Social sites like Tumblr are loaded with GIFs. GIFs are cool again!

Resurgence of the GIF Image Format

Don't Call it a Comeback!!  Ok, Call it a Comeback!!


The diagram above, from Google's "Search Trends" forecaster shows the former decline, as well as recent rise of interest in the GIF.  

Today, animated GIFs are seen everywhere from popular entertainment blogs like BuzzFEED, to corporate websites, to marketing emails.  Many of the GIFs floating around are more for entertainment purposes (GIFs of popular scenes from TV Shows/Movies) than  commercial purposes.  Using professional level GIFs to drive customer engagement, however, is a brilliant way to leverage this ripe technology!

MOTION CONVERTS CUSTOMERS!

Studies have shown that the Animated GIF has a significant impact in producing higher opens, clickthroughs AND conversions not only in emails, but on web pages as well!

Maybe the constant lack of motion in emails today is the reason that animated imagery is helping animated emails to perform better than their unanimated counterparts?

Study after study is proving that emails that use animated GIF's convert significantly more than emails with static images:

Car company increases lead gathering by 65% by using an Animated GIF for a "call to action" button.

Fashion company sees a 26% increase in clickthroughs by using an Animated GIF instead of a static image.

Bluefly sees a 12% increase in customer dollars spent when using an animated image in their email over a static image.

Using an Animated GIF in their email, Dell computers sees both a 42% clickthrough rate increase AND a 109% CONVERSION RATE INCREASE!


And THE LIST GOES ON AND ON...  Simply put, the reason animated GIFs provide such obvious and significant improvements is likely connected to the human eye being drawn to the existence of motion on the page.

Again, this is especially true in Email where the eye has been trained to NOT expect any motion.  This training will only increase the positive effect a reasonable amount of subtle motion will have on your marketing efforts.

WHAT'S SO SPECIAL ABOUT A GIF?

So, why would you want to use a GIF over a JPG or a video?  There are a few reasons.

1.  GIFs go where video can't!  As mentioned, videos can't play in emails, but GIFs are supported by almost every email client and will play right within your email reader!

2.  GIFs are like moving Stock Photos!  Animated GIFs really deserve their own category.  They aren't videos, but they aren't photos either.  You can use a GIF like you would a photo, but get animation like a video.  You wouldn't generally use a video as a call to action button, or a header image, or a thumbnail, but you CAN use a GIF for all of these AND add motion and interest at the same time!

3.  GIFs are mesmerizing!  You may think this is a stretch, but as you will read below, the looping effect of a GIF draws you in and before you know it, you are watching the same thing over and over...  Greatness!!  Keep your readers and customers eyes GLUED on your content!!

4.  GIFs have their own 'coolness' about them.  After all, the entire Tumblr social network is practically built on this image format because GIFs are cool!

5.  GIFs don't need a video player.  When you open an article, or email in your mobile browser and there is a video, in most cases, you have to then open that video in a seperate video player.  GIFs play right within the browser!!  No need to draw attention AWAY from your page and information.  Keep the viewer right where you want them!

ANIMATED GIF CREATION

The easiest way to create GIFs today is to start with a video.  If you already have videos that you want to use, there are many public websites which will allow you to export your GIF using your own content, either videos or photos.  

Here are a couple websites where you can convert your own videos to an animated GIF online:

Online-Convert.com

Imgur Video to GIF Converter

These sites allow you to upload your own videos and then adjust various settings to produce a GIF with the right balance of quality and filesize.

You can of course, also create GIFs using image manipulation programs like Adobe Photoshop or Fireworks.  These software packages have a whole suite of tools to help you create a GIF from a number of frames or still images.

Additionally, you can create GIFs using your own footage with Adobe Premiere or After Effects!

REVOGIF STOCK ANIMATED VIDEO GIFS

RevoStock is the first site to offer professional quality Stock Video GIFs created on demand using our 720,000+ HD and 4K Stock Video files.

The internet is filled with "Free" Animated Video GIFs.  In most cases, these GIFs are fine for editorial/newsworthy use. However, this free content is, in most cases, copyrighted materials like movies or TV shows and therefore not appropriate for use in a commercial manner like promoting a business or organization. (Unless you have set up the proper licensing and received permission to use the copyrighted works, etc.)

Additionally, there is usually a quality issue when dealing with the free GIFs floating around the web.

Finally, these free GIFs aren't always ideal for advertising purposes and you may find yourself stretching to make the GIF's message fit in with yours.

Because of this, RevoStock created RevoGIFs!  The largest library of Pro Stock Animated Video GIFs in existence!

RevoGIFs Stock Animated Video GIFs for Email Marketing, Web Design and Blogging!

INTERSECTION CHAOS: BOSTON LOCK-DOWN RevoGIF (Size: 848 KB)


Our RevoGIF system allows you to pick any of our HD or 4K Stock Videos and quickly export them out to a Video GIF you can then use in your email, web design or internet marketing.  It's an incredibly fast and easy way to create ad-quality Video GIFs.

This way, you can create original and unique animated messages just for your brand or organization!

CREATE YOUR OWN REVOGIF NOW!  
IT'S FREE TO CREATE AS MANY TEST REVOGIFS AS YOU WANT!

WAYS TO USE ANIMATED GIFS IN YOUR EMAILS OR WEB PAGES TO BOOST CONVERSION RATES

So, while it is clear that Animated GIFs increase customer email response in a very good way, the question is, how does one use them in an Email to produce results?

One of the beautiful aspects of animated GIFs is the fact that they are as easy to work with as any other image.  There is absolutely no need for a video player.  Just insert the image where you want it to appear and you are all set!

Here are a few different ways you can use Animated GIFs in your emails:

1.  Headline Image - Many emails start out with a large sized image with a headline above or below.  This is a great way to instantly grab the attention of your viewer in a big way.

STOP!! IN THE NAME OF THE GIF!
Stop in the name of GIF!


City Crosswalk 4K RevoGIF (Size: 848 KB)


2.  Thumbnail Image - 
Thumbnails are not generally animated which makes them a great prospect for motion!  When you want someone to click a thumbnail, provide an animated thumb rather than a static thumb.  


An example of a thumbnail image animated GIF
with CSS decorations (Circle with a border and colorization)
from our RevoGIF landing page.



3.  Buttons - 
They are, of course, the Holy Grail of the clickthrough.  It is that little piece of HTML that is literally MADE to be clicked!  In the web design world, so much testing is done every day trying to figure out what works and doesn't when it comes to "Call to Action" buttons.  Color changes, text changes, size, shape....  None of this compares to the ultimate attention-grabbing factor that an Animated GIF button provides.  It is important to remember in all of this that subtlety is the key.  There is a definite fine line between beautiful interest grabbing motion and obnoxious, loud and cheesy motion.  Keep your animations clean and simple.  The Animated GIF can be used as the button itself or as a background for a button.  Here I use the subtly moving image of a guy giving a thumbs-up as the background for a call to action button!  Awesome!!

It is important to remember in all of this that subtlety is still the key.  There is a definite fine line between beautiful interest-grabbing motion, and obnoxious, loud and cheesy motion.  Keep your animations clean and simple.  The Animated GIF can be used as the button itself or as a background for a button.  Here I use the subtly moving image of a guy giving a thumbs-up as the background for a call to action button!  Awesome!!


Young Man Holding Thumb Up - 540KB


4.  Inline article images/illustrators
- When you are writing a blog or article, an Animated GIF is a great way to illustrate a point you are trying to make within your article.  For example, if you are trying to say "Sales Are On the Rise!" you could use an animation of a mountain climber climbing a mountain.  There are almost no limits to ways you can incorporate motion in your writing!

5.  Motion Backgrounds - Leveraging the power of CSS, you can designate an animated GIF as the background of any section of your web page from buttons to tables, to lists, to entire divisions of the page!  Additionally, you can use other CSS3 features to add blur or color tinting to the GIF in question.

Don't overdo it!  Like anything, while Animated GIFs are a great tool to boost your email conversion rates, overusing them will degridate their effect.  Use them wisely to preserve their impact.

Blue Shade Dots Motion Background - RevoGIF 611 KB

HOW TO: SETTINGS FOR BEST QUALITY VIDEO GIFS

It's crucial to understand that GIFs are a different animal and understanding these differences is incredibly important so that you create quality GIFs that look great and don't crash the browsers they are playing on.

GIFs load like images, not like videos.  This means that GIFs don't load incrementally or "stream" like a video will.  A GIF will load all at once like an image will.  If you have ever visited a page where a video wasn't set to stream, but instead it had to load FIRST before it would play at all, you can understand how this can be a problem.  Maybe you remember the dire days when most all videos said "BUFFERING" when loading!  Tough times, right?  So, you can't export a 30 second video to a GIF and leave the same settings (

So, you can't export a 30 second video to a GIF and leave the same settings (framerate, length, quality, resolution etc.) intact or else your GIF is going to be enormous, never load and likely crash the browser.

The ideal GIF file size is less than 1.5 MB.  Anything higher than this, you are starting to get in the danger zone.  So, to hit this filesize, you need to make sure you adjust a few things.

HOW TO CONFIGURE YOUR GIF FOR SUCCESS:


1.  FrameRate: You want to use a low frame-rate, usually between 10-15 fps.  Our RevoStock GIF creator defaults at 10fps and all of the GIFs on this page are 10fps or below and you can see they all look pretty good!  If you don't mind a little stutter, and sometimes stutter can be a good thing, you can go as low as 2 fps.  Here is an example of a GIF set at 2fps.  This one came out great!  Oh, also, with the image below, I actually used the ENTIRE video.  However, because I set the framerate so low, the filesize came out to only about 350kb!  Greatness!!!

RevoGIF at 2 Frames Per Second

GRAPH 55 RevoGIF - 550KB


2.  Quality
: With most GIF converters, you can make some quality adjustments.  Naturally, the higher the quality settings, the bigger the filesize.  Our default is Best Quality, because I think it is better to use less frames, or a smaller resolution instead of skimping on image quality.  Personally I don't want my GIF to "look like a GIF."

3.  Delay: Delay determines how long of a delay occurs after each frame.  So, for instance, if you have a GIF with 10 frames, you could make each frame pause for 5 seconds.  It will give your GIF a stuttered look, which isn't always a bad thing.  Some GIFs need a stuttered look, so creating delay is a good thing.  For instance, if the video is a time-lapsed video, there already is a bit of stuttering, so adding in more, can help you seamlessly loop the video.  RevoStock's delay settings are in 1/100th of a second, so if you use the default setting of 10, it will delay for 10/100th of a second, and if you set it to 100, it will delay for 1 second.

4. Looping:  One of the hallmarks of animated GIFs is the fact that they can constantly loop.  I call it the VINE effect, although it probably should be called the GIF effect.  One of the reason VINE videos (Twitter's skyrocketing social video network) have exploded is because they constantly loop!  I am not sure why, but people like watching the same thing over and over again.  It allows them to take in the same scene in different ways.  When I watch VINE videos, I find myself laughing the more I watch them.  I notice different things about the videos on each subsequent loop.  GIFs have the same effect!  Our RevoGIFs loop by default, but you can also choose how many times you want them to loop before they stop looping.

I am not exactly sure why, but people like watching the same thing over and over again.  It allows them to take in the same scene in different ways.  When I watch VINE videos, I find myself laughing the more I watch them.  I notice different things about the videos on each subsequent loop.  GIFs have the same effect!  Our RevoGIF's loop by default, but you can also choose how many times you want them to loop before they stop looping or turn off the loop altogether.

Your ULTIMATE GOAL is to use as few frames as you possibly can while keeping your GIF looking good, and if you are wanting it to seamlessly loop, you want it to look as seamless as you can.  That means when it makes the transition from the last frame back to the first frame, it doesn't look like it jumps, but it transitions smoothly.  We also allow you the ability to REVERSE the animation.  The 'thumbs-up' button above uses this option.  This will play your designated timeframe forward and THEN backward creating a perfectly seamless loop.  The problem with this is it can sometimes look rather obvious and it also will double your filesize.

5. Resolution: Like these other settings, you want to use the lowest resolution you can that gets the job done.  Our RevoGIFs resolution options are currently either 640X360 or 320X180.  Either of these should be fine in most cases as long as you take care with the other settings.  You can often "up-rez" a smaller GIF and it still looks good.  

Below, I took "Graph" graphic used above and up-sized it to 500 pixels wide and you can see that it still looks great!  

RevoStock Up Graph 500 px
License this RevoGIF (Graph 55) here!


If you take a look at our RevoGIF homepage, you can see that the main header image is blown up HUGE and it still looks good as well.  Get creative with sizes and placements and you can make a lo-res GIF still look great!

CONCLUSION

GIFs are FUN!!!  They are cool, little, animated images of awesomeness!  

But, clearly they are also potent little tools of conversion!  I hope this article has inspired you to go out there and utilize this very under-utilized creative medium and in the mean time start improving your open, clickthrough and conversion rates!!

I would love to answer any of your questions, so please comment below and let's chat!

And remember...

RevoStock has an enormous collection of Videos you can convert to RevoGIFs for about the same cost as a Stock Photo of the same resolution and a fraction of the price of the original HD video file!  I would love to hear your thoughts on this new feature, and if you use a RevoGIF on your website, we would love to see it!

And remember, it's free to create a watermarked test RevoGIF, so you don't need to buy to see what your finished product will look like!

 - Craig 

Increase Conversions With RevoGIFs!