Displaying and optimizing ALT text in popular email clients

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!

Posted by Ros Hodgekiss

25 Comments

  • Blake Haswell
    5th October

    Hey guys,

    Just as a note, many people don’t seem to add useful or appropriate alt text to their images. Please remember that alt text must be able to replace an image, and any meaning the image provides should be also be provided by the alt text.

    If the image is for decoration only then the alt attribute should be left blank. In the above example the text “Young lady holding a credit card” doesn’t provide any meaning and only adds confusion. Presumably the image was of a young lady holding a credit card, but did that mean anything or was it just for decoration? If it did have some meaning then the alt text should explain that.

    I thoroughly recommend that anyone considering adding alt attributes to their images reads Ian Hickson’s FAQ: http://hixie.ch/advocacy/alttext

  • Ros Hodgekiss
    5th October

    Great to hear from you, Mr Haswell! And a solid comment, plus an awesome resource there to boot. You make a good point when you say that the best ALT text is sometimes none at all (for decorative images, anyway) - initially I only extended this rule to small images, but considering the bridal email above (where they’ve omitted the ALT), it makes loads of sense.

  • Neil L
    6th October

    Thanks for the good advice :-)
    We always try to specify good alt text and try to emphasize this with clients too… the only thing is that if you’re adding an image in Campaign Monitor the Alt text is generated automatically, usually using a combination of numbers and the file name…

    Are there plans to allow alt text to be manually specified (perhaps in a similar way to how you specify the links?)... otherwise we can’t change it!

  • Doug M
    6th October

    +1 for Neil L’s post. “Are there plans to allow alt text to be manually specified?”

  • Yannick
    6th October

    I’ve started playing with role and aria-level attributes to emulate headers witthout <hn> tag.

    Still investigating support in my free time though :)

  • hcabbos
    6th October

    I agree with Neil and Doug. There should be a field for inputting alt text.

  • Ros Hodgekiss
    6th October

    Neil, Doug & hcabbos - Good call on adding ALT text to images via the editor. I can’t say that it’s going to happen overnight, but I’ve added your votes and hopefully we’ll see it nudged into a future release.

  • Ben
    7th October

    I find in some email clients that if alt text has un-encoded characters these are better than encoding. For example £ can be encoded with £ . But some email clients display the £ instead of encoding it and showing the expected £.

  • PMcKern
    7th October

    Add my vote for a means to add alt text in CM. I was hoping that this article was an indication that the feature had finally been added, so I’m in let-down mode here. I’ve always found it odd, given CM’s interest in best practices (and an article advocating it, no less), that there is no way in CM’s design tools to add any alt text. I’m unaware of any workaround to make it happen, apart from putting something generic in the template, and would love to know if there is a way to make more specific alt text that will work with CM templates.

  • Billee D.
    7th October

    Thanks for the mention, Ros. I only wished that I had taken the screen shot from something like Mail or Gmail. In Opera, where I took that screen shot from, the alt text doesn’t reflow and ends up getting truncated a bit. Seems to work just fine in most clients though.

  • IT-Contractor-Mortgages
    7th October

    Useful post, thanks.  In my experience email marketing is becoming so much more of a science than it ever was and using these tags will help to get the response rate up a few percent.

    Byron

  • LTH
    7th October

    I was also a little disapointed after reading this post, that it’s still not possibel to add alt text in CM. I hope this feature will be implemented soon!

  • Neil L
    7th October

    Great thanks Ros :-)

  • Dozza
    7th October

    If using CSS to style ALT tags, use high contrast text against background colour, to make it as accessible/readable as possible. I.e. not dark green on a green background!

  • Pedant
    8th October

    Outlook prepends the security message. Sorry!

  • Martin
    8th October

    We love Campaign monitor but would like to add our vote to see manual alt tags added to the system. This ia a great article on the significance of alt tags, but without asking our designer to manually enter them each time we send a campaign (which defeats the object of Campaign monitor) we can’t add or edit them ourselves.

  • Jacques
    8th October

    +1 vote for me for adding ALT text with dynamic images. Alt tags are obviously important and it’s a shame clients can’t manage this with the editor.

  • Joe
    13th October

    I currently test in Hotmail, Yahoo, and Gmail, (in IE and FF) and the alt tags always appear. Entourage however, seems to only display a select few alt tags.

  • Ros Hodgekiss
    13th October

    Jacques & Martin - Thanks for your votes! Well noted.
    Joe - Are you on a Mac or PC? I’ll check it out, however I’d love to see your Entourage screenshots.

  • Ralph Thompson
    18th October

    great post thanks

  • Anwar
    26th November

    I’m still missing the ALT option in de Template editor. I think alot of people would stress to implement that option.

  • Patrice Bellan
    28th November

    I didn’t see it mentionned anywhere but here’s a use I make of alt text: at the top of the emails I send, I include a transparent pixel without setting its dimensions (bad practice but useful here), and set it’s alt to something like
    “We recommend that you change your setting and display pictures [...]”

    Since lots of people don’t see pictures by default and lots don’t even think about changing their setting, a little reminder seemed useful to me.

  • Ros Hodgekiss
    1st December

    Anwar - Thanks for your vote for this, I’ve certainly taken it into consideration.

    Patrice - This is a pretty nifty trick, there! It might not work in all email clients, but I’m looking forward to giving that a go and seeing if its something we can recommend adding to email campaigns in general. Thanks for sharing that with us!

  • Andrew Mobbs
    14th December

    +1 for alt text editing capabilities please CM team :)

  • Patrice Bellan
    19th December

    Ros - It’s not looking perfect on every client, but to me it’s no big deal since the only ones who should be able to notice that are the ones already seing a degraded version of the email :)

Sign up for free.
Then send campaigns for as little as $9/month

Create an account