The Ultimate Guide to Email Image Blocking

[ 0 By

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:

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.

Preview your emails with images-off

See how your emails look to subscribers with images-off using Litmus Checklist.

Try Litmus free →

 

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

Email Client

Images Blocked By Default

Renders ALT Text

Renders Styled ALT Text

Apple Mail

check-X
check-green
*
check-green
*

Lotus Notes 8.5

check-green check-green check-X

Outlook 2000-2003

check-green check-green check-X

Outlook 2007/2010/2013/2016

check-green check-green check-X

Outlook 2016 (Windows)

check-green check-green check-X

Windows 10 Mail

check-X check-X check-X

Outlook 2011 (Outlook for Mac)

check-green check-green check-green

Outlook 2016 (OS X)

check-green check-green check-green

Thunderbird

check-X
check-green
*
check-green
*

*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:

Early Outlook Image Blocking

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.

Email Client

Images Blocked By Default

Renders ALT Text

Renders Styled ALT Text

AOL Mail (Chrome)

check-green check-green check-green

AOL Mail (Firefox)

check-green check-green check-green

AOL Mail (IE)

check-green check-green check-X

Gmail (Chrome)

check-X
check-green
*
check-green
*

Gmail (Firefox)

check-X
check-green
*
check-green
*

Gmail (IE)

check-X
check-green
*
check-X

G Suite (Chrome)

check-X
check-green
*
check-green
*

Inbox by Gmail (Chrome)

check-X
check-green
*
check-green
*

Outlook.com (Chrome)

Sometimes check-green check-green

Outlook.com (Firefox)

Sometimes check-green check-green

Outlook.com (IE)

Sometimes check-green check-X

Office 365 (Chrome)

Sometimes check-green check-X

Yahoo! Mail (Chrome)

check-green check-green check-green

Yahoo! Mail (Firefox)

check-green check-green check-green

Yahoo! Mail (IE)

check-green check-green check-X

GMX (Chrome)

check-X
check-X
**
check-X
**

Web.de (Chrome)

check-X
check-X
**
check-X
**

Freenet.de (Chrome)

check-X
check-green
*
check-green
*

Mail.ru (Chrome)

check-X
check-green
*
check-green
*

Orange.fr (Chrome)

check-X check-green check-green

SFR.fr (Chrome)

check-X check-green check-green

*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-images-off-chrome

AOL Mail w/ images off (Chrome)

aol-images-off-ie

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.

outlook-images-off

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!

Email Client

Images Blocked By Default

Renders ALT Text

Renders Styled ALT Text

Android 4.x (Native email client)

check-green check-green check-green

AOL Alto Mail app

check-green check-green check-green

AOL Mail (Android browser)

check-green check-green check-green

AOL Mail (iPhone browser)

check-green check-green check-green

BlackBerry OS7

check-green check-green check-green

BlackBerry Z10

check-green check-green check-green

Gmail (Android browser)

check-X
check-green
*
check-green
*

Gmail (iPhone browser)

check-X
check-green
*
check-green
*

Gmail app (Android)

check-X
check-green
*
check-green
*

Gmail app (iOS)

check-X
check-green
*
check-green
*

Inbox by Gmail (Android 6.0)

check-X
check-green
*
check-green
*

Inbox by Gmail (iOS )

check-X
check-green
*
check-green
*

iOS 11.x (Native email client)

check-X
check-green
*
check-green
*

Mailbox (iOS)

check-X
check-X
**
check-X
**

Outlook.com (Android browser)

Sometimes check-green check-green

Outlook.com (iPhone browser)

Sometimes check-green check-green

Windows Mobile 7.5

check-green check-X check-X

Windows Phone 8

check-green check-X check-X

Yahoo! app (Android)

check-green check-X check-X

Yahoo! app (iOS)

check-green check-green check-green

Yahoo! Mail (Android browser)

check-green Sort of Sort of

Yahoo! Mail (iPhone browser)

check-X
check-X
**
check-X
**

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

WindowsPhone8

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)!

Yahoo-AndroidBrowser

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.

Yahoo-AndroidBrowser-ClickedLink

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!

alt-text-v3

No ALT text

alt-text-v1

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.

alt-text-v2

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!

Bulletproof-button-images-off

Images off view

bulletproof-buttons---images-on

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:

JCrew Images Off

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:

hellotravel-imagesoff

Images off view

hellotravel-images on

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.

ExactTarget---Images-Off-AOL-Chrome

Images off view

ExactTarget---Images-On---AOL-Chrome

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:

pizzaexpress-imagesoff

Images off view

pizzaexpress-imageson

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

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 →