How to use images in email — essential reading for eDM designers

Start with how human comprehension works.

First, the brain processes images far faster than text.

Second, we live in a visual culture. The shift from a text culture to an image culture has already happened, and visual content accounts for 93% of interpersonal communication.

Third, images carry emotion — and emotion is the real reason many people buy. Choose images correctly and they help your readers understand what you want them to feel, putting emotion to work on their intent.

Sending email with no images at all, then, is a serious mistake for brand and product promotion.

But there are things to watch.

In general, your email should meet these conditions:

1. It should look good and be tidy.
2. It should move readers to act, and more importantly produce a real result: converting them into loyal customers.
3. Email clients impose usability limits, so the critical thing is that your email displays properly whatever the client, in order to improve the reader-to-customer conversion rate.
4. The images you add should make your email more persuasive, not ruin it.
5. The share of people who do not display images in their email is still very high — around 40%. They will not see the beautiful pictures in your email unless they enable them.
6. You design email so the majority of your readers can see and read it. For that reason, your template should work for everyone, with images visible by default.

Two approaches that do not work

There are two ways to add an image to an email: embed it as an attachment, or add it as a URL. Both are worth flagging, because both can have serious usability consequences. Embed it as an attachment and many of your users simply will not see the image. Attach an image to the email and the message may well end up in the spam folder, because that is the usual method for distributing malware or phishing (which is in fact the main reason major email clients disable images by default).

Beyond that, if you pay by message weight, an embedded image increases the size, potentially past what your email provider will send. As for the URL approach, the problem is that images are what draw people into opening and continuing to read — if the reader only sees a link, where is the pull?

So when considering images in email, four things to remember:

1. Email design has limitations
2. Nearly half of email users will see your email with attached images disabled
3. Conversion and usability matter more than beauty
4. Do not use embedded attachments, because they make you look like spam

Given those four points, how should you use images in your email design? Here is the answer:

1. Do not turn your whole email into one large image

Too many people simply will not understand what is going on. If images occupy 30% of the email and the rest is straightforward text, that is more than enough to carry the content. But if you feel the urge to make your email that bit more beautiful and want several images, use an HTML table to organise the photos so they carry the meaning together.

2. Consider putting the key message image in the top two inches (5.06 cm) of your email

Two inches is a standard preview height. Typical email previews are laid out horizontally, so an appealing image in that upper zone will push users to explore the rest of your email.

3. Do not use images that are too large in dimensions or weight (resolution)

Your images should be in the right format and well compressed. Six hundred pixels wide at 72 dpi is recommended, which avoids display problems on both desktop and mobile. Incidentally, on modern mobile devices with Retina displays, email images can look blurred and pixelated.

4. Include a “view in browser” (web view) button, in case users cannot load the images.

A few more techniques:

1. Use images of people. One study found that sites using images of people scored higher than sites using other images. That applies fully to email design.
2. People do not really read email — they scan it. So if your email is persuasive enough to get users to open it, the most effective way to hold their interest and carry them further is a well-chosen banner photo at the top.
3. Consider placing images on the left side of the email. People notice images on the left of the screen first, and process that information around 60,000 times faster than text. Put the image on the left and you already have a grip on the reader’s emotion; put the suggestion and the solution on the right and the reader can be persuaded.
4. Always include a call to action, and make it genuinely visible.
5. Remove every unnecessary design element and allow enough space. Clean up your template and keep sufficient spacing between elements — space is very much the prevailing trend in web design, and it matters.
6. You can always test different versions, see how readers respond, and revise.

The key points of this article:

1. Email design implies certain constraints. If your email has a fixed layout consistent with your brand image, readers remember it and find it familiar.
2. Prefer referenced images over embedded ones.
3. Do not overuse images. When you build an email template, keep the seventy-thirty ratio in mind.
4. Images move emotion, so always give that emotion an outlet — every email needs a call-to-action button, and do not forget to put a working link behind it.
5. Using a drag-and-drop email design template solves a great many image problems.