December 2009 snow in the UK gave me the unique opportunity to take a few photo scenes and combine them in a simple slideshow animation for my e-mail Christmas card. Karen Stamper, artist (http://www.karenstamper.co.uk/) saw the immediacy of the method in general and asked how the effect was achieved. Here's a general introduction from my experience.

The simple answer is - there are two basic methods you can use:

1. You use a single jpg image that is clearly a link to a slide show/animation/video on a website
2. You create a small gif animation that is also a link to a larger slide show/animation/video on a website

Read on to learn more on why, followed by how you first generate an a slide show/animation/video on the web and then produce the e-mail .

Background
First, some info on why these approaches are currently best.

1. E-mails are at present limited in what they permit you to do, compared to websites. Gif and jpg images work in e-mails. Tables are still used for formatting.
2. Gif images and animations have only 255 colours, as opposed to 24 million or more for jpg images; this affects image quality.
3.  Animation files in e-mails need to be small (no more than 100lb to 200kb) to avoid clogging up your recipients mail boxes.
4. There is no guarantee that the e-mail you send will look the same on the recipient's system. Providing a link to an external website means that they still get to see your animation/message as you intend it.
5. The web version can be in a wider range of formats (gif, flash, video, slideshow) and be of a higher quality than that possible in the e-mail version - and you can have sound too!

1. Create the website slideshow animation/video first

A. Identify the images you would like to use, preferably in jpg format, and size them appropriately for viewing on screen at a good quality (e.g. 1200 x 900 pixels).

B. Combine the images into a slideshow, add text and upload to the web in any one of the following methods that best suits your skills (this list is not exclusive).

1. Powerpoint presentation - uploaded to your website as a file you can link to.
2. PDF slideshow - uploaded to your website as a file you can link to.
3. Pictures uploaded in or equivalent, then use the share facility to generate the HTML code for a slide show that you can embed into a dedicated web page. - a small version is shown at the top of this article.
4. Create sideshow as a movie and upload to YouTube - then get code to embed YouTube video into a dedicated webpage.
5. Convert JPG images into 8bit colour files using Adobe Photoshop, Corel Photopaint or other image software and import into a movie that is saved as a .gif file (using same programs or freeware available on the net). Upload gif animation to your website and embed in a dedicated web page.

2. Copy the link to the slideshow/animation/movie for use in the e-mail

3. Then create an E-mail template using a table

1. Create a simple table of 2 cells, either as two rows or two columns. One cell will contain the image or animation, the other will contain your text that mirrors or complements the image.
2. Include a text link to your slide show/animation/movie file or web page
3. Make sure the text makes sense even in a plain text e-mail from which images and formatting have been stripped.

4a. An E-mail using a jpg image with a link

1. Take one of the jpg images used in your animation on the web.
2. In a photo-editing program, add a right pointing triangle, as used to indicate a video start control.
3. Resize the image and save so that it does not exceed about 100kb in file size
4. Embed the image into your table in the e-mail template.
5. Convert the image into a link to the slideshow/animation/video on your website.

4b. An e-mail using a Gif animation

You will need either a photoediting software like Adobe Photoshop, Corel Photopaint, or animation software like SwishMax, or freeware or an online gif conversion program that allow you to edit images, generate as gifs and save in a movie.

1. Select a number of photos for your animation, try not to exceed five or seven, because each picture will increase the file size dramatically.
2. Resize the images to a smaller size, ensuring they are of equal size and proportion, e.g. 400 x 300 pixels
3. Convert each image from RGB (24 million colours) to 8bit colour (255 colours). This is essential for gif format and also reduces the image file sizes further.
4. Combine into a gif movie
5. Save the gif movie to your PC - at this point you can generally specify the time each image is displayed.
6. With photos, rapid changes can irritate, so in my animation, for example, I displayed each picture for 3 seconds and the final image for 6 seconds.
7. You can generally also specify how many times you want your animation to run - from continuous loop, to a specified number of times to just once.
8. Then open your e-mail template and paste or insert the gif animation into the appropriate cell of the table.

5. Test your e-mail with the animation.

Whatever you do - test your e-mail first by sending it to yourself.

1.  If you have different e-mail accounts, try them all.
2. Check the links included in the e-mail to see if they work as expected.
3. You can then make any edits to ensure it looks OK.

6. When you are finally happy - personalise the e-mail and send it off to your recipients!

Conclusion

It is relatively easy to set up an animated e-mail itself.
However, most of the effort is in ensuring that the recipient can access the animation online as an alternative. This is to take account of where images are stripped from the e-mail or software (like Outlook 2007 for example) does not display the animation properly at the recipients end.

Good Luck!

For practical assistance, feel free to contact me.
Chris