HTML Email Design Tips – Dealing With Images

Dealing with Images in Email

Coding HTML emails is not the same as coding HTML web pages, unfortunately, because email clients like Outlook 2007 and Gmail only support a subset of HTML code (about 45% to be specific.) With this in mind, here are the essentials to remember when using images in HTML email.

Dealing with Images in Email: Image blocking = X-rated Content

By default, Outlook, Yahoo, Gmail and other email clients DISABLE image display by default, so your recipient will have to right-click or explicitly opt to display images. There’s about a 70% chance that a nice, hand-crafted, HTML graphical email will look like a random juxtaposition of red ‘Xs’ when it’s received. So, when designing your email, start by assuming that your recipient will have image display turned OFF. Next, assume that 105% of your recipients will be too lazy to enable image display. Then ensure that your email conveys the important information through the text of the email. We suggest an 80/20 rule of thumb: 80% text to 20% images in your email.

Image files aren’t actually sent as part of an HTML email (Note – It is possible to send the images along as part of a MIME attachment but this is rarely used.) Images are hosted on your server, (or on our servers for free if you are a Pinpointe customer.) When your recipient decides to view the images, the images are downloaded. So be sure to use absolute, fully qualified paths for any images. For example:

This works: NOTE: I have replaced the < and > characters with [ and ] so that they display in ezines:

[img src="http://www.imageserver.com/pretty-image.gif"] 

This doesn't work:
[img src="../images/pretty-image.gif"]

Balance Copy and Images

Create a layout that ensures your text flows around the images in such a way that your readers can focus on the message instead of the red ‘X’s and blank spaces. Along the same line, avoid a format layout that starts off with a banner image, which will create a big dead spot at the top of the message and client’s preview pane when image display is disabled.

It is also important to balance the amount of text vs. graphics in your email for SPAM reasons. Many email filters produce a SPAM score based on the ‘graphic to text’ ratio. This SPAM-blocking technique was developed because earlier versions of SPAM firewalls filtered on text content, but then crafty spammers started creating messages that were one really big image. Most SPAM filters now rank the text to graphics ratio as another spam rating mechanism.

Use ALT-text Tags

HTML allows you to attach descriptive text tags to graphics images. The text is displayed when the graphic is not or cannot be displayed. If the image IS displayed, the ALT text will be displayed when the cursor is hovered over the image. Either way, you win. Note that Outlook 2007/2010 do not display ALT text; however almost all email clients do, and using ALT text does not cause any problems with Outlook, so we highly recommend using ALT text.

Here’s how to add ALT tags. First, open the Image tag (IMG), then add the ALT-text attribute. The HTML code will look like this: (NOTE: I have replaced the < and > characters with [ and ] so that they display in ezines)

[img src ="http://www.imageserver.com/pretty-image.gif"> 

alt="This message will appear if the image is blocked"]

Size Images Properly

It is best to properly size images before sending. We’ve all received emails that have embedded images that are 800×600 but are displayed in the email at a resolution of say, 200×150. This occurs when the image dimensions are set to 200×150 in the email. It displays properly in most (but not all) email clients but when the email is opened, the user has to download an image file that is 16x bigger than it needs to be.

Avoid Spacer Images

While the combination of spacer images and nested tables was popular on the web ten years ago, image blocking in many email clients has ruled it out as a reliable technique today. Most clients replace images with an empty placeholder in the same dimensions, others strip the image altogether. This can lead to a poor first impression for many of your subscribers. Stick to fixed cell widths to keep your formatting in place with or without images.

Always include the dimensions of your image

If you forget to set the dimensions for each image, a number of clients will invent their own sizes when images are blocked and break your layout. Some email clients will ignore the dimensions specified in code and rely on the true dimensions of your image, but we recommend setting the image size html gmail.

Avoid PNG Image Formats

Lotus Notes 6 and 7 don’t support 8-bit or 24-bit PNG images, so stick with the GIF or JPG formats for all images, even if it means some additional file size.

Don’t Use Image Floats

Outlook 2007, Outlook 2010 and earlier versions of Lotus Notes offer no support for the float property. Instead, use the align attribute of the.img tag to float images in your email, like this example below (NOTE: I have replaced the < and > characters with [ and ] so that they display in ezines.)

[img src="http://www.site.com/image.jpg" align="right"] 

If you’re seeing strange image behavior in Yahoo, adding the code align=”top” to your images can often solve this problem.

Understand and Use Preview Panes

More than 70% of Enterprise customers use Outlook, which displays a 4 line preview when your recipient is using the ‘Auto-Preview’ pane (most people do.) If the first thing in your email is a graphic or set of links to graphics images, then the resulting Outlook preview will just display the link URLS in the recipient’s inbox.

If this article was useful, kindly share it! Check out Pinpointe’s other articles for more tips on Email Design and delivery.

Was this useful? If so – kindly share it on Facebook, Twitter or your favorite social sharing tool! All Pinpointe papers and webinars are free.

Leave a Reply

Your email address will not be published. Required fields are marked *