Home Resources Blog

Back in 2007 we did a bit of testing regarding the display of ALT text in the popular email clients. Flash forward to 2010 and we felt it was about time to do a bit of a refresher. Not only are there new email clients on the scene, but some of the existing clients have changed their tune towards displaying ALT text when images are blocked. Plus, we’ve got a couple of tips that we’d love to share while we’re at it.

Do ya think I’m text-y?

… so said Rod Stewart. First of all, why use ALT text? Consider the following email newsletter:

Images on

Now, consider if someone received it in an email client where images are either blocked by default, or intentionally. What would it look like?

Images off

Thankfully, the designers of this email newsletter have taken this into account and added some handy ALT text. As a result, the images that have text in them (eg. ‘Friend us on Facebook’) still have meaningful descriptions when images are blocked or turned off.

Now, consider how important this would be if you were visually-impaired and using a screen-reader to assist with reading your email. In this case, ALT text could mean all the difference. We see a lot of email newsletters that use images for headings and links – these can be particularly hard to understand if they’re not accompanied by useful descriptions.

That said, not all email clients are equal when it comes to supporting the ALT attribute, so lets look at the state of affairs in some of the top email clients.

ALT text in different email clients

We’ll explain what each of the descriptions mean in a moment, but here’s a run-down of the top email clients, market share and how they display ALT text:

Client Renders ALT Text
Outlook 2003 Info
Outlook Express Info
Windows Live Mail No
Yahoo! Mail Yes
Outlook 2007/2010 Info
iPhone Yes
Gmail Yes
Apple Mail Yes
Thunderbird Yes

Now, it isn’t all as dire as it may seem – in most of these email clients, images are displayed by default. However, there are a fair few quirks to be aware of.

Image width and height must be specified

We’ve had cases where email clients like Apple Mail have not displayed ALT text, despite what’s been determined above. Generally the reason has been that the <img> width and height have not been added to the HTML attributes, causing the placeholder to collapse.

Windows Live Hotmail doesn’t display ALT text

We’ve seen some curious changes in Windows Live Hotmail, but unfortunately, the ability to display ALT text isn’t one of them:

Hotmail with images off

Now, we don’t have an axe to grind with Hotmail, but from a usability perspective, this is pretty stiff. Plus, the way they grey out images can turn even the most majestic of email designs (like our newsletter, ha!) into an ugly duckling.

On top of that, images are blocked the first time you receive an email from a sender and a warning message is displayed (see pictured). Once you give an email newsletter the nod, images will display on all consequent campaigns.

Outlook’s ‘Right click here to download pictures…’ message

Outlook ’03 / ’07 / ’10

Outlook '03 / '07 / '10

Second off the shelf are the security warnings visible in Outlook ’03 / ’07 / ’10. On the upside, any ALT text is featured in the image placeholder (see right). On the downside, it’s prefaced by an long speel on protecting your privacy. With smaller images, there seems to be little point adding ALT text at all.

Outlook Express

Outlook Express

This isn’t the case with Outlook Express, which is comparatively liberal when it comes to displaying ALT text. With Express, you can use CSS to style the color of your ALT text, which is great for image-based headings.

No complaints from Entourage

Legendary customer Jeremy Bechtold generously sent in screenshots from Entourage 2004 & 2008. These email clients display ALT text, too. Thanks, Jeremy! We’ve also been told that CSS styling also works in these clients.

Entourage 2004

Tip: Keep ALT text short and sweet (or pay)

Now, one recurring glitch that came up during our testing was that a number of major email clients simply reject ALT text that exceeds the width of an image. For example, he’s two images in Outlook Express, with some fairly-long ALT text in one and a one-word description in the other:

Outlook Express

And here’s the same images in Yahoo! Mail:

Yahoo! Mail

The email clients that throw away long ALT text are: Windows Live Mail, Yahoo! Mail, iPhone, Gmail and Apple Mail.

So the takeaway here is to keep your descriptions short. Really short. Otherwise, they could disappear altogether.

Tip: Style your ALT text with CSS (and not with header tags)

In so much as we regularly see droll descriptions in image placeholders, it is possible to give your ALT text a little jazz within a variety of email clients. Using CSS styles, you can change the height and color of ALT text in: Yahoo! Mail, iPhone, Gmail, Apple Mail and Thunderbird. In Outlook Express, you can only change the color.

This is a particularly useful technique for header graphics, logos and other images that require a little emphasis. Awesome customer @obxdesignworks contributed this image to show how he uses styled ALT text in the header of his emails:

Styled header

Neat! However, as per the tip above, we’d probably keep our descriptions a little shorter.

Quite a few folks suggest wrapping images with header tags (eg. <h1>) to achieve similar results, however I don’t recommend doing this. In a few email clients, big gaps appeared above and below the wrapped image during our tests, so I’d stick to CSS styling for now.

It may be very easy to forget about adding ALT text to images, but as you’ve seen, they do make email newsletters considerably more usable for folks with email clients with image blocking enabled, or those who use screen readers. So remember – write ’em short, style ’em up and keep your email newsletters text-y!

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.

Subscribe

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free