For the most recent results and tips, view our guide on Image Blocking in Email.
Since our last update to our ‘Image Blocking in Email Clients‘ guide in 2007, its come to our attention that a lot has changed. In fact, email clients are more aggressively blocking images by default than before, with a 2009 report stating that only 48% of email recipients see images automatically. This means that if an email campaign relies heavily on images, it’s probably not being read by over half of its intended recipients.
What this means for email designers is that we have to be prepared for images to be blocked automatically in our campaigns. In this post, we’ll look at current conditions for image blocking in email clients, as well as suggest new strategies for getting your message across, even if it’s image-free.
Default settings in popular email clients
As well as refreshing our original results, we’ve also covered current conditions across the most popular mobile email clients. For more information on how ALT tags display in these email clients, check out our most recent results.
|Desktop clients||Images displayed by default||Images disp. for trusted senders||Renders ALT Text|
|Outlook 2007||No||Yes||Replaces ALT text with security message|
|Outlook for Mac 2011||No||Yes||Yes|
|Windows Live Hotmail||No||Yes||Yes|
|Webmail clients||Images displayed by default||Images disp. for trusted senders||Renders ALT Text|
|Yahoo! Mail Beta||No||Only if changed in ‘Spam’ settings||Yes|
|Mobile clients||Images displayed by default||Images disp. for trusted senders||Renders ALT Text|
|Android Gmail||No||Can select ‘Always show pictures from this sender’ when images are displayed||No|
|Windows Mobile 7||No||No||No|
As you can see from the above results, blocking images by default in email clients is the norm, not the exception as was previously thought. Webmail clients in particular have cracked down on the automatic display of images, most probably to prevent tracking images from being downloaded in spam email.
Surviving image blocking in 2011
In our earlier blog post, we provided some timeless advice for ensuring your message is displayed, even with images off. These pointers are more relevant than ever, as we ultimately have to anticipate our images being blocked in the inbox.
In addition to becoming a known sender, ensuring that your images come with ALT text and using text as much as possible throughout your designs, there are some creative solutions to consider when designing for image blocking. Here are two of our favorites.
Style up your ALT text
Now you’ve got your ALT text in place, how about making it a little fancy? Funnily enough, you can style up your ALT text using CSS, just as you would any other text in your HTML email. Here’s an example of an email in Yahoo! Mail Beta with a plain-jane ALT tag:
How about if we want to make it look more like the heading? More like:
Here’s the code we used to achieve this:
<img src="https://h2.campaignmonitor.com/assets/uploads/pizza.jpg" alt="Try our Bacon Lover's Pizza" width="220" height="200" style="color: #C30; font-weight: bold; font-size: 16px;"/>
A tip is to explicitly set the width and height of images with ALT text to prevent them from collapsing. This technique works in Yahoo! Mail, iPhone, Gmail, Apple Mail and Thunderbird. In Outlook Express, you can only change the color.
Another example and more details can be found here.
Substitute images with HTML/CSS
Perhaps one of the most creative approaches we’ve seen when it comes to tackling image blocking can be found in this amazing email for Pizza Express. Thanks to a table layout and some meticulous image cutting, this design substitutes images for blocks of color, turning the email into a work of 8-bit wonder when images are turned off (click to enlarge):
Thanks to Andrew King for this excellent example. To view some more email newsletters that have used a similar technique to do away with images, I highly recommend you scoot over to Anna Yeaman’s blog post on how to bypass image blocking by converting images to HTML. She’s famously used her pixel-art and coding skills to send totally imageless HTML email campaigns, although you wouldn’t know it at first glance (click to view):
On a closing note, image blocking is something that we all have to take seriously as email designers. Sending all-image HTML email campaigns may have worked in the past, but at a time when so many email clients do not display images by default, it’s likely that they will either not display in most preview panes, or simply get junked/deleted.
The good news is that there are both practical and highly creative approaches you can take to this issue, most of which are easy to implement. If you have a favorite technique for ensuring your message gets displayed in any inbox, we’d love to hear about it in the comments below.