The Ultimate Guide to Email Image Blocking

[ 19 By

One of the largest problems that email campaigns face 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 campaigns that lack the ability to immediately communicate and make an impact, even looking broken. Talk about a bad first impression!

As a result, it’s extremely important to optimize your emails for images-off viewing—especially considering that 43% of Gmail users read email without turning images on. 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 elements are a must-have best practice in the email world. When images in email are turned off or disabled, ALT text (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

check-green check-green check-X

Outlook 2011 (Outlook for Mac)

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

Outlook.com (Chrome)

Sometimes check-green check-green

Outlook.com (Firefox)

Sometimes check-green check-green

Outlook.com
(IE)

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

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

While all webmail providers support ALT text, support for styled ALT text relies on the browser being 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 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
*

iOS 6.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 definitely 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 constrains of the container 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 users that read their emails in the Android browser experience a unique image blocking tactic. Yahoo 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, ALT text is one of the best ways to get around clients that block images by default. Since many email clients support ALT, it’s a fantastic way to provide some context for subscribers when images are disabled. As an added benefit, 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 attributes 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" />

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 a bit of 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 aspect 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 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.

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 for the visually impaired, 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. It 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:

Creative Image Slicing

If you’re feeling really ambitious, you can get pretty fancy with your images-off optimization through the use of image slicing. PizzaExpress is the perfect example of a company that uses techniques like this!

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.

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 30+ desktop, mobile, and webmail clients, including images-off views? Give Litmus a try free for 7 days!


  • Jaina

    Could the Outlook.com image blocking from “suspicious looking senders” be down to the IP address from where the image is served or email is sent from? We currently send emails via a shared IP address and have this issue with our emails. I just put it down to being on a shared IP address and not having a great reputation because of this.

    • Narong Saron

      Although I can’t give you a definite answer, since we host our images on the same servers we send the emails from, but I’m willing to bet that it has to do with the IP the email is being sent from. Since clients use that to determine your server reputation, it makes sense that they’d use that in deciding whether to show your images or not.

      • Jaina

        Hmm, I might see if we can do a test with images hosted on the same IP as the email is being sent from. See if that makes a difference. Currently our images are hosted on a different server. Be interesting to see if that makes a difference

        • Alex Burch

          Jaina, did you ever resolve this? One of our clients is having an issue with images at Outlook and we can’t figure out if its a problem with the image hosting or a problem with IP reputation.

          • Jaina

            Not a resolution as such, but after some tests it looks like it’s probably more an issue with being on a shared IP and reputation of the domain name too. Neither of which we, as email marketers, have control over, where we are.

  • Danielle Jamil

    Thank you for providing a current table of the defaults! I’ve been looking for one since the gmail change… Great info!

  • christine

    the red and green are confusing for the first column. to confirm, if there is a red X under “Images blocked by default” then that means the images SHOW by default?

    • http://www.litmus.com Justine, Litmus

      Sorry about that!

      Green check = “Yes, images are blocked”
      Red X = “No, images will show automatically”

  • Paul Rose

    I was hoping PizzaExpress would be mentioned in this email. Their email marketing is probably the best I’ve seen.

    You haven’t seen creative use of tables until you see their ‘Happy Birthday’ email. Extremely creative, with or without images on.

    • http://www.dennisaltermann.com.br/ Dennis Altermann

      There a link of those emails, for example? :)

  • Joe McGonegal

    So even with images on, HelloTravel emails (from a travel site I presume) don’t use pretty pictures?!

    • http://www.litmus.com Justine, Litmus

      It looks like they don’t for that particular communication!

  • John Fung

    Great article! Is there a way to track the before and after performance of adopting the stylized alt text? Would the click-to-open rate be the best indicator to gauge the benefit of applying these recommendations?

  • Herman

    For those that are interested … we got hung up with this Gmail blocking images… after much research and testing we have found that adding this meta data allows for the images to flow every time successfully and our e-mail tracking servlet works with Gmail.

    Keen to hear if this solves your problems too….

  • Pingback: In Email Marketing, Is a Picture Worth a Thousand Words? | Content Generator()

  • Lesley Langham

    Oh, now i get it! Great article that really cleared up my understanding of image blocking. Thanks.

  • Pingback: Email Design Best Practices - 20 Tips | Teach to Fish Digital()