Convert video to gif for email + Twilight demo

A simple way to view video in the majority of email clients, is to convert your video file into an animated gif.

Click here to view my Twilight demo and forward yourself a copy. Forward to a Friend is at the top right. Your privacy is safe, I cannot view your email address and this does not subscribe you to my newsletter.

As an animated gif, the video will play in all email clients except Outlook 2007 which only displays the first frame. Compare this to embedded video, which does not play in webmail clients, Outlook 2007, MAC or Lotus Notes.

Twilight ”Video gif”

The final gif is 216 x 120 resolution, 22 seconds long and 2.11mb in size.

This is approx 100k per sec, which means anyone with a 128k/s internet connection will be able to view the playback smoothly (that’s anyone not on dial up).

Twilight demo: {Click to view email and forward yourself a copy}

This demo is 2.20mb with all artwork included. I added in pre-header text, and a fallback link to the trailer for Outlook 2007 users. It’s an animated gif so does not have sound. Click here to view the email and forward yourself a copy.

How to convert a video file to an animated gif

There are free video to gif tools available. I prefer to convert the video file myself. It affords you more control, resulting in smaller file sizes and higher quality footage.

1. SnagIt

Firstly we captured the screen area of the Twilight video from the web, which created an AVI file. We set up SnagIt so it would capture using Microsoft video 1 codec, at 100% compression quality and at 12 frames per second.

This is so we wouldn’t have to edit the timing of the gif file. If you capture at 30 fps, when you convert to a gif it won’t be able to play back fast enough resulting in jerky footage.

12 fps sounds slow, but animators will tell you that 12 fps - or half rate - is enough to give the illusion of smooth movement.

Another benefit is that it hugely reduces the file size to around 25-35% of the original file.

2. DeBabelizer Pro

Once we had our video captured, we imported it into DeBabelizer Pro to re-size the video. You need to scale the video to the resolution you require for your email, before it’s converted to a gif (In our case down to 216 x 120)

Click here to view this screenshot full-sized

This avoids the inevitable pixelation you would get resizing a 256 color gif. Scaling at this point in the process rather than later made a huge difference to the overall quality. We then re-saved the file as an AVI again.

3. ProMotion 5

We loaded the AVI file into ProMotion 5. On import we set the number of colors to 128 with an optimized palette. This generates a custom palette for every frame. We experimented with different palette depths such as 64 and 256.

Gif stores palettes in power of 2 resolutions. If you were to create a 129 color palette you’d end up with 256 color entries. To get the file as small as possible you want to keep within those boundaries.

The Twilight footage at 256 colors did not look significantly better, but resulted in a 15-20% larger file so we stuck with 128.

4.  Editing in ProMotion 5

At this point the video was edited down from 2.5mins to 22sec in length. We tweaked fade-ins so they did not stretch out unnecessarily. We then saved the animation out as a gif file.

5.  Animated gif to jpg

Finally we renamed the twilight.gif file twilight.jpg. The jpg does not play locally in a web browser, but it will play once it’s placed on a server. Do you think there are any benefits to renaming a gif jpg?

The resulting jpg is streamed by the browser in the same way as any embedded object such as video or Flash. You won’t need to wait for the file to download completely before it starts to play.

6. Treat it like any other image file

At this point you have a jpg which plays, “Video” in an email when placed on a server. It’s really an animated gif in disguise. Treat it as any other image when you design your email creative.

Two things to explore further to reduce file size

One property of the gif file format that we didn’t fully exploit, is that a gif file is able to store a different sized palette for every frame. You can capture one section of your clip at 64 colors and another at 128 or 256.

For example the opening title of the Twilight clip could have been captured at 16 colors, as it’s largely shades of blue and black. The more detailed frames would still be captured at 128 colors. You can refine this process so that every single frame has an optimally sized palette which would reduce file size without loss of quality.

We also did not really play around with disposal methods. Rather than redraw each frame in it’s entirety, you can force the renderer to only refresh a segment of the frame. Which means if only a small portion of the frame changes, the file size for the next frame can be significantly smaller and refresh faster.

No need to outsource design and delivery

Unlike embedded video your ESP will have no problems accepting and delivering a jpg.  This saves you engaging a third party to design and deliver the video email on your behalf.

Further reading

A video strategy should be on every retailers mind for 09.

Dave Witzig from ShopNBC reported that customers that watch their videos convert at twice the rate of customers who don’t.

SilverDock Video merchandising solutions have increased sales conversion rates by 20% to 40% for online retailers like Amazon.com

GasLogGuys, CEO Mike Hackley stated, “10% to 15% of shoppers who look at videos of burning logs go on to click and buy,” he says. “Without the videos, we get about a 1.5% conversion rate.”

Conversion rates increased 45% on 10 different products after retailer MyWeddingFavors tested more than 100,000 video impressions.

Chad White of the Retail Email Blog reported his first embedded video email from a retailer.

Posted on Wednesday, December 31st, 2008 at 3:08 pm.
Responses are currently closed, but you can trackback from your own site.