The Ultimate Guide to Styled ALT Text in Email

[ 19 By

A commonly accepted best practice in the email world is the inclusion of alt attributes (frequently known as an “ALT tag” or “ALT text,” which is shorthand for alternative text) for images.

There are a few reasons why this practice has become standard among email aficionados:

  • Most email clients block images by default. In some cases, instead of showing the image, the email client will instead display the ALT text. This is definitely handy, especially in cases where an email design is predominantly composed of images. The ALT text can help communicate the message even if the images cannot.
  • In a situation where images can’t or won’t load due to a bad connection, broken link, etc., the ALT text will appear instead of the image.
  • Marketers and designers sensitive to the needs of visually impaired readers understand that ALT text is used by screen readers. Since these users are unable to view text or images, the ALT text serves to describe the image via the screen reader.

Setting up standard ALT text

Setting ALT text for images in an HTML email is simple. Known as an attribute, it’s a standard part of HTML’s syntax, and is included in the image tag:

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

It’s important to include height and width values as this creates a placeholder box for the ALT text to reside when images are disabled.

Standard ALT text display

Here’s what disabled images in an email without ALT text sent to Gmail looks like:

Disabled image without alt text in Gmail

Compared to disabled images in an email with ALT text:

Disabled image with alt text in Gmail

Which one would you rather receive?

Adding style to ALT text

You can also get fancy with your ALT text, adding a bit of inline CSS to change the font, color, size, style and weight of the ALT text:

<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:

Disabled image with styled alt text in Gmail

Styled ALT text support across email clients

While a nifty technique, this is still email we’re talking about, so naturally support is a bit scattered amongst different email programs. I’ve borrowed some elements from Salesforce’s impressive Dreamforce email to test styled ALT text for the following examples.

ALT Text in Webmail Clients
Webmail clients Images blocked by default Displays ALT text Displays styled ALT text
AOL
Gmail
Hotmail*
Yahoo!
Outlook.com Sometimes*

*Until recently, Hotmail blocked images by default. See below for more details.

Webmail clients such as Gmail are the most diverse since these mail programs can be accessed in different browsers. In all webmail clients, support for styled ALT text relies on the browser being used. Styled ALT text is supported in current versions of Firefox, Chrome, and Safari.

For example, styled ALT text will be visible to a subscriber viewing their Gmail in Firefox, but not for a subscriber viewing Gmail in Internet Explorer.

Styled ALT text in Gmail/Firefox:

Styled ALT text in Gmail/Firefox

Styled ALT text in Gmail/IE:

Styled ALT text in Gmail/IE

ALT text on linked images

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:

Styled & Linked ALT text in Gmail/Firefox

Hotmail & Outlook.com

Hotmail’s image blocking behavior is a bit agressive. Rather than simply displaying an empty container, it overlays each image with a grey block:

Image blocking in Hotmail

However, Hotmail users are being migrated to Outlook.com, and it looks like Hotmail no longer blocks images by default. Rather than blocking all images, Outlook.com claims to “block content from suspicious-looking senders,” though I’m not sure how they determine who looks suspicious! Randomly, some senders are “trusted,” automatically displaying images, while others throw a blocked content warning:

Blocked Content in Outlook.com

Users have the ability to block images for anyone not in their safe senders list in their Outlook.com settings. Outlook.com treats these two types of content filtering differently, using a Gmail-like image blocking behavior for “suspicious-looking” senders while using Hotmail’s grey boxes to block out images for users that have the stricter content blocking settings in place.

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

ALT Text in Desktop Clients
Desktop clients Images blocked by default Displays ALT text Displays styled ALT text
Apple Mail
Lotus Notes
Outlook 2003 sort of*
Outlook 2007 sort of*
Outlook 2010 sort of*
Outlook 2013 sort of*
Thunderbird

*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’s security message

Outlook 2003, 2007, 2010 and 2013 preface ALT text with a lengthy security message, stating “Right-click here to download pictures. To help protect your privacy, Outlook prevented automatic download of this picture from the Internet.” Unfortunately, this makes ALT text in these email clients near useless as it only appears at the very end of Outlook’s security warning:

ALT Text in Outlook

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

ALT Text in Mobile Clients
Mobile Clients Images blocked by default Displays ALT text Displays styled ALT text
Android Email (4.0)
Android Gmail (4.0)
Blackberry OS 6
iOS 6
Windows Phone 7.5

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 in Android

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 BlackBerry

Styled ALT text in iOS (iPhone 5):

Styled ALT text in iPhone

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

Styled ALT text in Windows Phone

CSS font properties, links and length are variables

Diving into specifics, most of the following font properties are supported in clients that display styled ALT text:

  • font-family
  • font-size
  • font-weight
  • color
  • font-style

I tried using Arial, Georgia, Courier New, Palatino Linotype, Trebuchet MS and Tahoma as ALT text fonts. All were supported in the clients I tested in:

Style ALT Text Fonts

I would assume that most web-safe or default fonts would be supported. I’d also recommend this list of commonly installed fonts on Windows and Mac.

Other notable image blocking behaviors

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…”

Preview your email with images off (and on!)

How does your email look with images disabled? Is your ALT text rendering properly? Preview your email in over 30 desktop, mobile, and webmail clients—including images-off views—with Litmus. Sign up for a free 7-day trial today!

Start testing →

More resources

  • Dennis, ListsUK

    Great article, Justine – thanks for the research and for clarifying which shows what so clearly.

    • http://www.litmus.com Justine, Litmus

      Thanks, Dennis! Happy to hear that all those screenshots are useful :)

  • Mike Kissel

    This is great Justine, thanks! I’ve also found that when images are used as links, the URL displays instead of the ALT TEXT. I’ve been using the title attribute to display my alternate text under that URL, but haven’t tried styling it at all yet. Thanks for the inspiration!

    • http://www.litmus.com Justine, Litmus

      Hi Mike! Which email clients did you see this in? I tested styled ALT text using linked and non-linked images, but never saw the URL display in the clients I tested in.

      If you try styling title attributes, I’d love to know how that goes!

  • CBLemuel

    a more complicated coding might affect deliverability. ISP filters may considered it spam. I had tested it year ago. sending to same subscribers on different days but on same time. A simple coding is 25% higher than those with formatted alt text images.

    • http://www.litmus.com Justine, Litmus

      Thanks for the feedback. We haven’t seen any evidence that styling ALT text can lead to deliverability problems. Adding ALT text adds very little “extra” code. I imagine there are probably other factors that might affect spam scores but were incorrectly attributed to complex HTML.

  • goswire_admin

    That’s super helpful! Thanks!

    • http://www.litmus.com Justine, Litmus

      Great to hear! We’d love to see any emails you create with styled ALT text!

  • http://www.litmus.com Justine, Litmus

    Hi Matthew, thanks for the comment & feedback. The good news is that styled ALT text is pretty easy to incorporate, and even if some email clients do ignore it, it’s a special treat for the ones that do!

    It also helps to know your audience, so you can get an idea of how many people will see the fruit of your effort :)

  • http://www.litmus.com Justine, Litmus

    Hi Carey, I did some research about a year ago into ALT tags on Android, and to my recollection they did display… check out slide 14 of this presentation: http://www.slideshare.net/LitmusApp/email-design-approaches-that-work-for-all-devices

  • http://twitter.com/joshmiles josh miles

    Hey Justine,

    Fantastic post! This is important, not only for “images off” mode, but also as subscribers are doing mobile email triage on their phones with slow connection speeds. Great tips!

    • http://www.litmus.com Justine, Litmus

      Great point, Josh! If someone is reading email on a slower internet connection, the ALT text will be visible before the images are finished downloading. I just might have to add that to the bullets in the intro :)

  • marco Sansalone

    I have some problem :( Why when I add the alt style the height tab is different ? Here there is an example:

    https://imageshack.us/photo/my-images/841/imagebmg.jpg/

    • http://www.litmus.com Justine, Litmus

      Hi Marco! Without more details (like seeing your HTML or knowing which email client this screenshot is taken from), it’s hard to troubleshoot. Does the little bit of extra space go away after images are turned on? You might want to take a look at this post, too: 

      https://litmus.com/blog/remove-gaps-spaces-images-gmail-hotmail-yahoo

      • marco Sansalone

        Thank you Justine for you reply! I Know about the “display: block” but I thought it was only for hotmail. Thank you so much!!! 

  • http://www.facebook.com/people/Kristin-Markell/591373346 Kristin Markell

    This is wonderful! I just ran into this minor issue testing out our new email templates that I am working on and worked like a charm. Thank you for providing the information!

    • http://www.litmus.com Justine, Litmus

      So glad it was helpful, Kristin! 

  • SNH
  • Pingback: How to Optimize Your Emails for Mobile: A Beginner's Guide | Blog E-Course