Using ALT Text Tags in HTML Email

What is ‘ALT Text’ and why should you care?

As most of us have now experienced, many email clients now DISABLE graphics images by default. We haven’t seen specific metrics on what % of email inboxes have images disabled by default but general consensus seems to be in the 50% range, and increasing. So, if your email includes images, the recipient will see only a box with a red ‘X’ where the image belongs, until they manually enable ‘display images’ in their email client.  This has implications with respect to email design.

To demonstrate exactly what we mean, here’s what your well-crafted, graphically pleasing email looks like in an Outlook preview pane when image display is disabled:

This doesn’t exactly jump out and say READ ME!

So how do you improve readability and and design if images aren’t going to be displayed?

Here’s the same email when it was first opened:

That’s why it is useful to add ‘ALTernate’ text that will be displayed in the event the image is not displayed. To do this, simply add the following information to a graphic image within your email:

  ALT="Insert your ALTernate text here"

Adding ALT Text tags to all images will display the ALT text string in place of the image when images are blocked.  Here’s an example from Paypal (a real one..) in Gmail – note that by default even images from Paypal were blocked by default from Paypal.  However Paypal used ALT text in case the image didn’t display – here’s how it looks – you can see the ALT text ‘Paypal Customer Survey:

Using ALT Text helps will improve readability and it will also improve your text-to-image ratio, since SPAM filters also filter on the ratio of text to total image size within your email.