October 3, 2017

The Ultimate Guide to Email Image Blocking

[ 0 By Lauren Smith

One of the largest problems that marketers face for their email campaigns is image blocking. Usually, due to their email client’s default setting or a personal preference, images are blocked automatically for many subscribers, leading to emails that lack the ability to immediately communicate and make an impact, or even looking broken. As a result, it’s extremely important to optimize your emails for images-off viewing.

It’s also become more common for subscribers choose to use their mobile device to view emails. While data coverage in some countries and regions is excellent, there may be times when mobile data service is either slow or inconsistent, for example on public transport.

When an all-image email doesn’t fully download and is viewed by the user, it could end up rendering like this for the subscriber:

I don’t see a problem with image-based emails. pic.twitter.com/3H3PWe7mXO

— Fabio Carneiro (@flcarneiro) February 18, 2015

With this information in hand, it’s more important than ever to make sure your emails are legible and actionable, especially when images can’t be seen.

 

DEFAULT SETTINGS IN POPULAR EMAIL CLIENTS

As with everything email-related, there aren’t standard settings across the board for image blocking. Below, we’ve outlined default image blocking settings for the most popular desktop, webmail, and mobile clients. In addition, we’ve included support for ALT text and styled ALT text. These HTML attributes are a must-have in the email world. When images in email are turned off or disabled, text populated in the ALT attribute (which is short for alternative text) often renders in place of the image. We’ll explain more about these techniques later in the post.

Desktop Defaults

*Images are enabled by default, but were manually disabled for testing purposes.

There are a few things to note about Outlook clients. Outlook 2000, 2003, 2007, 2010, and 2013 preface ALT text with a lengthy security message. Unfortunately, this makes ALT text in these email clients near useless as it only appears at the very end of Outlook’s security warning:

In addition, all of the Outlook clients (including Outlook 2011 for Mac) display images for trusted senders. If your subscribers add your email address to their address book, images will be displayed automatically.

Webmail

Webmail providers are a mixed bag when it comes to image blocking, as well as support for styled ALT text.

Inbox by Gmail (Chrome)

Outlook.com (Chrome)

Sometimes

Outlook.com (Firefox)

Sometimes

Outlook.com (IE)

Sometimes

Office 365 (Chrome)

Sometimes

Yahoo! Mail (Chrome)

Yahoo! Mail (Firefox)

Yahoo! Mail (IE)

GMX (Chrome)

Web.de (Chrome)

Freenet.de (Chrome)

Mail.ru (Chrome)

Orange.fr (Chrome)

SFR.fr (Chrome)

*Images are enabled by default, but were manually disabled for testing purposes.

**Images are enabled by default and cannot be disabled. However in both GMX and Web.De, all messages in the Spam folder have images disabled. And, when this is the case, images are collapsed and ALT text is not supported.

While all webmail providers support ALT text, support for styled ALT text in webmail email clients relies on which browser is used. Styled ALT text renders in current versions of Chrome and Firefox, but not in Internet Explorer. When it comes to Internet Explorer, font color applied to ALT text will render, but font, size, style, and weight attributes do not.

AOL Mail w/ images off (Chrome)

AOL Mail w/ images off (Internet Explorer)

Outlook.com has some major quirks when it comes to image blocking. Rather than blocking all images by default, Outlook.com claims to block content from suspicious-looking senders. However, it isn’t clear how they determine who is “suspicious” versus who is “trusted.” Users also have the ability to block images for anyone not in their safe senders list in their Outlook.com settings. Outlook.com treats these two types of content filtering differently, blocking images (but showing ALT text) for suspicious-looking senders while using grey boxes to block out images for users that have the stricter content blocking settings in place.

Gmail discontinued image blocking in December 2013. Marketers and designers should be delighted with this news—messages will display as intended, and open tracking is more reliable. However, the change hasn’t been without issue. Many designers have seen problems with Gmail’s image caching, leading to broken or mangled images.

Mobile

Mobile clients have great support for ALT text and styled ALT text, which is great news for designers!

*Images are enabled by default, but were manually disabled for testing purposes.

**Images are enabled by default and cannot be disabled.

However, there are still some quirks. For example, Windows Phone doesn’t render ALT text at all—instead, it displays a message asking users to “Download pictures.”

While ALT text and styled ALT text are both supported by the BlackBerry Z10, these elements don’t consistently display. If the ALT text is too large to fit within the constraints of the size of the image, it will not show up. If you have a large BlackBerry audience, be sure to use concise ALT text!

Outlook.com also blocks images by default in Android and iPhone browsers, following the same image blocking pattern as Outlook.com on desktop browsers.

Lastly, Yahoo! Mail users that read their emails in the Android browser experience a unique image blocking tactic. Yahoo! Mail blocks all images, background colors, links, etc. and only renders text from the HTML version. Yes, you heard that right—only the text from the HTML (not the text version)!

When subscribers click on the “View full HTML message” the email opens and, while styled ALT text and the rest of the CSS and HTML attributes load, images do not.

Due to the strange image blocking behavior in this client, a proper balance of live text and imagery, as well as ALT text, would help with this issue.

HOW CAN YOU COMBAT IMAGE BLOCKING?

With so many email clients blocking images by default, email designers have to be prepared. Luckily, there are a number of strategies to help combat image blocking.

ALT Text + Styled ALT Text

Mentioned earlier, using ALT text is one of the best ways to get around clients that block images by default. Since many email clients support the ALT attribute, it’s a fantastic way to provide some context for subscribers when images are disabled. In addition, ALT text makes your emails more accessible to visually impaired subscribers that use screen readers!

No ALT text

Unstyled ALT text

Luckily, adding ALT text is extremely easy—all it takes is adding an attribute to the image tag:

<img alt="insert alt text here" src="image.jpg" width="250" height="250" />

All images in your email need the ALT attribute to improve the accessibility of your email. However, not all images require ALT text. For example, images for bullet points or images used purely for visual design purposes. In these cases the ALT attribute can remain empty:

<img alt="" src="image.jpg" width="250" height="250" />

It’s important to include height and width values in order to create a placeholder box for the ALT text to reside in when images are disabled.

You can even take your ALT text to the next level by adding inline CSS to change the font, color, size, style, and weight.

<img style="font-size: 15px; color: #ffffff; font-style: italic; font-weight: bold; height: 250px; width: 250px;" alt="insert alt text here" src="image.jpg" width="250" height="250" />

This technique, known as styled ALT text, is a great option for maintaining branding and adding some fun to your images-off view.

Styled ALT text

Bulletproof Buttons

While the copy and design of your campaign can go a long way towards getting users to interact with your email, the most important part is often the call-to-action, or CTA. CTAs should be viewable even when images are disabled. There’s no special treatment for image-based buttons—they are blocked just like any other image, preventing users from taking action and converting from your email. While text links are an option, bulletproof buttons allow you to have a bit more fun and stay inline with your branding.

Bulletproof buttons consist of live text combined with a background color, styled to look like an image-based button. While there are numerous options for creating this type of button (Campaign Monitor’s free bulletproof button tool is a great option) we prefer to use simple HTML and inline styles, which holds up well across most email clients.

<table border="0" cellspacing="0" cellpadding="0" width="80%">
  <tr>
    <td bgcolor="#0b534a" style="padding: 12px 18px 12px 18px; -webkit-border-radius:3px; border-radius:3px" align="center"><a href="https://litmus.com" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none;">Visit Litmus</a></td>
  </tr>
</table>

Here’s an example from a recent email campaign that uses this technique. You can check out the Scope link to see the code in action!

Images off view

Images on view

Balance of Imagery + Text

While some industries (retail, travel) prefer to use image-based emails to maintain branding and deliver a pretty design, we don’t recommend it for an entire email. As Campaign Monitor explains, image-based emails don’t take into consideration file sizes for mobile recipients, accessibility, or the HTML-to-text ratio that some spam filters apply with their algorithms—it also doesn’t leave much room for images-off optimization. For example, check out this email from JCrew.com:

The email appeared entirely blank when I first opened it because an all-images design was used. In addition, the repetitive ALT text prevents users from differentiating between the sections in the body of the email.

We recommend ditching the image-based email and opting for a proper balance of live text and imagery instead. This ensures that your emails are accessible, eliminates the HTML-to-text ratio spam issue, and allows for the email to be legible and easy to interact with regardless of whether images are present or not. HelloTravel’s email is a great example of one that uses lots of live text, as well as bulletproof buttons, to combat image blocking:

Images off view

Images on view

This is definitely an extreme case since HelloTravel doesn’t use any images—they use all live text, background colors, and bulletproof buttons—but the email looks almost the same when images are disabled!

Background Colors

Adding background colors throughout your email, particularly behind images, allows for hierarchy and, to an extent, design to be present in an images-off environment. For example, in this email from ExactTarget, they use an orange background color behind the banner at the top. While it’s not nearly as attractive, the images disabled version has a similar hierarchy due to the use of background colors.

Images off view

Images on view

While there are several ways to code background colors, we recommend using the HTML bgcolor attribute with a 6-digit HEX code:

Mosaics & Pixel Art

If you’re feeling really ambitious, you can get pretty fancy with your images-off optimization through the use of mosaics or pixel art that are created using image slicing and background colors. PizzaExpress is the perfect example of a brand that uses this technique:

Images off view

Images off view

With careful planning, background colors and lots of nested tables, the striped-shirt chef tossing a pizza is still visible, although perhaps slightly pixelated and robotic-looking! While this type of image blocking optimization doesn’t replicate the original image, it does give subscribers a very good idea of what the image will be if downloaded and context of the content of the email.

This technique works best when there’s no visible ALT text on some images, which can impact accessibility. So, it’s important to weigh up the pros and cons of this technique for your audience.

SUMMING IT ALL UP

With so many email clients blocking images by default, and some subscribers choosing those settings on their own, image blocking is unavoidable. It’s up to you to make your emails stand out regardless of whether images are enabled or not. Luckily, you can earn a competitive edge in the inbox by using techniques like ALT text and background colors so your email can remain legible and actionable in all circumstances.

ADDITIONAL RESOURCES

• Click, Tap, and Touch: A Guide to CTA Best Practices
• Campaign Monitor’s guide to image blocking
• The Ultimate Guide to Styled ALT Text
• A Guide to Rendering Differences in Microsoft Outlook Clients
• Hands On with the BlackBerry Z10
• The Best Way to Code Background Colors for HTML Email

PREVIEW YOUR EMAILS WITH IMAGES ON AND OFF

Want to see how your emails look in over 70+ desktop, mobile, and webmail clients, including images-off views? Give Litmus a try free!

Start testing now →