Apr
3
2013
AUTHOR
Jeff Stolarcyk

3 Tips for Great Looking Emails Even With Images Disabled

Building a great email can take a lot of time and effort, and that’s why it’s so shocking to discover that only about half of email recipients see HTML messages the way they’re meant to be displayed. The culprit is image blocking, and it’s not likely to go away any time soon.

Email clients block images in messages as a security precaution. On mobile clients, image blocking also saves data consumption, so it’s the default on most smartphones (the iPhone is a notable exception, however; Apple doesn’t block images by default in any of its mail environments – desktop, tablet, or phone).

When your images are blocked, there are a few tricks you can pull out to preserve the experience you want your reader to have.  If you’ve got a lot of time and dedication, you can even approximate something as complex as your original images in some cases (but we’re not going to get that in depth right now). Here are three great tricks to use to get around image blocking.

1. Define the height and width of your images

Defining image dimensions will do wonders for preserving the intended layout of your email.  Getting a good sense of what the message they’re seeing should look like can also entice some readers to enable images.

Gmail blocked the images, but the layout is still there.

2. ALWAYS remember ALT text

Even with your image dimensions defined, you’ll still be displaying blank boxes to your customers. Adding alt text on every important image in your email messages should be mandatory if you’re serious about reaching your customers through the inbox.

A vast majority of email clients will even recognize inline CSS properties on your <img> tags, so you can change the font, size, color and style of your text by adding a “style” property to your images.  Your ALT text doesn’t have to be boring, either.  Unlike images on a website, the alt text you use here won’t influence search, so take advantage of that freedom to be creative.  Instead of “Featured Sale Items”, try “Enable images to see what you’re missing!”

Alt Text for the Hero Image is shown in blue, inline CSS shows the main message in green, even with images disabled.

3. Add a dash of color

If you’re using a background image with your email template, you probably know it’s a good idea to also set a background color to provide a fallback for those instances where the background image doesn’t show up (thankfully fewer than there used to be, now that Gmail finally supports background-image). You can do the same with cells that contain images to add some vibrance to your email even when your images are shut off.  You can even use a table (in conjunction with an expertly sliced image) to use multiple colors to approximate the color palette of your image.

Another way around image blocking in many email clients is to ask your subscribers to whitelist you (add you to their address book). It’s important not lose sight of this important fact: even customers who don’t whitelist your “From address” are important; in fact, their user experience is probably more important. They need to commit to at least one extra step (turning images  on) on the way to converting.

Here’s an example of a portion of an email fully rendered with images and with Gmail disabling images. You can see how these tips make it understandable, even with the troublesome image block.

 

Gmail disabling the images, but still quite readable.

Email with images enabled, but remember nearly 50% won’t see it this way!

Side by Side Comparison of email with images disabled

Side by side view. Notice some of the color remains, the layout encourages enabling images, and the messaging isn’t lost.

So when constructing those beautiful emails, always remember the nearly 50% of viewers with images turned off! You will see the increase in conversions for the extra effort.

 

Solid Cactus Can Do Your Email Marketing for You!

 

Leave a Reply