Styling ALT Text in Email

Email designers rely on images for more than just adding ornamentation to a campaign. Images often convey vital information and, more importantly, entice readers to engage with an email. Unfortunately, designers can’t count on images always being loaded. Many email clients (and users) disable images by default, bad connections can prevent images from loading, and visually impaired users can miss important information contained within images. How do email designers overcome this important problem?

The good news is that HTML provides a reliable solution in the form of alt attributes. Sometimes called “ALT tags” or “ALT text”, they provide information about the content of images in the form of text when images are disabled or unable to properly load. Fortunately, they are easy to set up and even style to fit in with your email design.

Adding ALT Text

Setting ALT text for images is simple. Since it is part of the HTML standard, all you need to do is include the attribute in your image tag:

<img src="logo.jpg" width="400" height="149" alt="Litmus">

While you should be including the dimensions of your images as a best practice, explicitly declaring the width and height of your image gives your ALT text a container in which to live when images are disabled. In the absence of explicit dimensions, some email clients will collapse that area and the ALT text with it.

Standard ALT Text Display

Let’s take a look at how images with and without ALT text are displayed. Here’s what a disabled image looks like without ALT text in Gmail:

Compare that to the same image when ALT text is included in the image tag:

While it’s not pretty, it does still provide some information about the content of the image. Even if users don’t enable images, they will still have some context for the rest of the message.

Styling ALT Text

You could stop there, satisfied that you are providing users some information about the images in your emails. But, as designers, we want to make things look nice. You can easily blend ALT text in with the rest of the message using simple inline styles just like with text or any other element in your email:

<img src="logo.jpg" width="400" height="149" alt="Litmus" style="font-family: Georgia; color: #697c52; font-style: italic; font-size: 30px;">

Here’s the same example above, but with ALT text styles applied:

Email Client Support

Since this is still email we’re talking about, support for ALT text varies across email clients. Using Salesforce’s impressive Dreamforce email, we can see how ALT text renders in a number of email clients.

You can see in the table below that webmail clients generally have very good support for ALT text.

That being said, your styles may not render properly for your ALT text. Webmail clients rely on the browser in which emails are viewed to render the HTML. Therefore, some browsers may not support styled ALT text. Let’s compare how Firefox and Internet Explorer render styled ALT text:

Styled ALT text in Gmail/Firefox:

Styled ALT text in Gmail/IE:

Firefox, as well as modern browsers like Chrome and Safari, handle styled ALT text beautifully. While Internet Explorer doesn’t fare as well, your message is still readable.

Desktop clients are a bit more reliable since there aren’t as many variables involved:

* Outlook adds a security message to ALT text. More details below.

While Apple Mail and Thunderbird don’t block images by default, you can choose to do so in the preferences for each application. I manually enabled image blocking on these clients to see if they supported styled ALT text.

Outlook 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.

Mobile clients have strong support for styled ALT text, which is great news—especially for marketers with heavy Android audiences.

Like Apple Mail and Thunderbird, I manually updated my iOS settings to block images in order to observe how this mobile OS handles ALT text.

Styled ALT text in Android (Samsung Galaxy Nexus):

Styled ALT text appears identically in the email and Gmail apps in Android.

Styled ALT text in BlackBerry OS 6 (Torch 9810):

Styled ALT text in iOS (iPhone 5):

Image blocking in Windows Phone 7.5 (Nokia Lumia 900):

ALT Text on Linked Images

Most images in an email act as links, too. In this case, ALT text for linked images may be underlined or blue in some webmail clients. Yahoo! underlines ALT text in linked images, while Gmail both underlines and ignores specified colors, instead defaulting to a vibrant blue:

Which Styles Work Best?

Designers will be happy to know that most styles are supported in most clients. You can readily style your ALT text using things like font-family, font-size, font-weight, font-style, and color.

Don’t feel like you are locked into using a client’s default typeface, either. Testing reveals that Arial, Georgia, Courier New, Palatino Linotype, Trebuchet MS, and Tahoma all work well in the clients tested above.

Finally, you shouldn’t let this article limit what you do with ALT text. Feel free to experiment with things like text-shadow, background-color, and even web fonts to see what works for your email design and audience.

Other Blocking Behavior

In many email clients, ALT text will disappear once the size or length of the text exceeds the width and/or height of the image container. Due to this behavior, it’s probably best to stick to shorter descriptions and smaller font sizes to avoid having your ALT text removed altogether.

Almost all email clients allow you to change your settings to display or hide images automatically (although most often hiding/blocking is the default setting), and they’ll prompt users to turn images on for individual messages. Some also allow users to add specific senders to a whitelist or address book, or select a “Always display images from…”

Further Reading

The Ultimate Guide to Styled ALT Text in Email
Displaying and Optimizing ALT Text in Popular Email Clients
Quick Tip: Remember to Style Your ALT Text
HTML Email for the Visually Impaired