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.
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!”
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.
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.