• Features
    All Features Email Previews
    Builder Checklist Spam Testing Email Analytics Litmus Extension
  • Pricing
  • Resources
    Resources Litmus Conference Convince Your Team Gmail Promotions Builder
  • Enterprise
  • Community
    Discussions Snippets Templates Jobs
  • Blog
  • Sign In
  • Litmus
  • Features
  • Pricing
  • Resources
  • Enterprise
  • Blog
  • Community
  • Discussions
  • Snippets
  • Templates
  • Jobs
  • My Account
  • Sign In
  • Community Home
  • Discussions
  • Learning
  • Snippets
  • Templates
  • Jobs

    ALT Text in HTML Email

    • Posted by Alan Tippins

    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.

    Webmail Client Blocks Images by Default Displays ALT Text Styles ALT Text
    AOL YES YES YES
    Gmail YES YES YES
    Yahoo! YES YES YES
    Outlook.com Sometimes YES YES

    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:

    Desktop Client Blocks Images by Default Displays ALT Text Styles ALT Text
    Apple Mail NO YES YES
    Lotus Notes YES YES NO
    Outlook 2003 YES Sort Of * NO
    Outlook 2007 YES Sort Of * NO
    Outlook 2010 YES Sort Of * NO
    Outlook 2013 YES Sort Of * NO
    Thunderbird NO YES YES

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

    Mobile Client Blocks Images by Default Displays ALT Text Styles ALT Text
    Android Email (2.0) YES YES YES
    Android Email (4.0) YES YES YES
    Blackberry OS 6 YES YES YES
    iOS 6 NO YES YES
    Windows Phone 7.5 YES NO NO

    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

    • Avatar of Delete LoginDL
      Delete Login said:
      Why do the image sizes end in a question mark? I.e. width="400? height="149?
      Edit | Delete
    Login to leave a comment
    Litmus Logo
      Company
    • Team
    • Customers
    • Careers
    • Contact
    • Brand
      Product
    • Features
    • Pricing
    • Enterprise
    • Extension
      Tools
    • Events
    • Labs
    • Scope
    • Resources
      Help
    • Knowledgebase
    • Status
    • Community
    • Trust
    Subscribe to our emails

    Copyright © Litmus Software, Inc. 2005-2023. 675 Massachusetts Ave., 11th Floor, Cambridge, MA 02139. View our Terms of Service or Privacy Policy. Send us a note to hello@litmus.com or give us a call at +1 (866) 787-7030

    Sign in to Community

    Are you new to Litmus Community?

    Create a Free Litmus Account

    Use your existing Litmus login to connect with the world’s most amazing email designers.

    Having trouble signing in? Try Forgot password

    Join the Litmus Community

    Sign up to Community

    Litmus uses the information you provide us to bring you great content about email marketing trends, stats, events and relevant products and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy
    Already have a Litmus login? Sign in

    Get more out of your Litmus account

    Your free Community account includes access to the Litmus Community, as well as limited access to Litmus Builder. Check out the entire Litmus Email Creative Platform when you sign up for a free 7-day trial.

    • Email Previews

      Get 2,000 screenshots/month in popular email clients, including key international webmail clients, to ensure your emails look great everywhere.

    • Builder

      Quickly identify issues pre-send that could impact your deliverability—and get actionable advice for how to fix them.

    • Checklist

      Get screenshots in popular email clients to ensure your email looks great everywhere.

    • Code Editor Integrations

      Preview and troubleshoot your emails right where you build with seamless integrations between Litmus and any local code editor, like Dreamweaver or Sublime.

    • ESP Integrations

      Save time producing and troubleshooting your campaigns with seamless integrations between Litmus and your email service provider (ESP).

    • Spam Testing

      Quickly identify issues pre-send that could impact your deliverability—and get actionable advice for how to fix them.

    • Email Analytics

      Optimize your campaigns with subscriber-level insights to improve segmentation and targeting strategies.

    • Private Litmus Teams

      Get full team visibility. Manage Litmus access and monitor usage across private teams.

    No thanks, just sign me up without a trial

    Forgot password

    Enter your email address to reset your password


    Already have a Litmus login? Sign in