1.7

Designer. When generating output from the Email context, the Designer converts all CSS rules
that apply to the content of the email to inline style tags, as if local formatting was applied.
Using images in email campaigns: tips
Host images on a public server
In the Designer you can add images as resource to the template document. When used in
email messages these images are automatically embedded on sending the email. These
embedded images appear instantly when viewing the message in your email client.
There is, however, a downside to this method: embedded images can't be used to track email
open rates. Email services like mandrillapp.com embed a tiny tracer image at the bottom of your
message. Each time a recipient opens the email the tracer image (aka beacon image) is
downloaded and yet another 'open' is registered. On mobile devices this happens when the
user clicks the Display Images button.
So, when tracking open rates in your email campaigns, store your images on a publicly-
accessible server (preferably your own server - you could set up a process in Workflow to serve
images and track open rates) or a reputable image hosting service, like photobucket.com. Don't
forget to set the Alternate Text for your images on the Attributes pane.
Do not capture your email in one big image
Most e-mail clients do not automatically download images, so do not capture your email in one
big image. The recipient initially sees a blank message and probably deletes it right away.
Do not resize images in your email
Many mail clients do not support image resizing and will show the image in its original
dimensions. Resize the images before you link to or embed them.
Use background images wisely
Most mail clients do not support background images: a very good reason to stay away from
them in your mainstream email campaign. There is one situation in which they do come in
handy. Both iPhone and Android default mail have solid CSS support and cover most of the
mobile marketspace. You could use background images to substitute images when viewed on
these devices. This is done by hiding the actual image and showing a mobile-friendly image as
background image instead. This is a technique used in Responsive Email Design.
Page 334