---

Though it might seem like an afterthought to add alt text to images, it can make a huge difference for the success of your campaigns. Alt text is easy to style in many clients, and can help get your message across whether or not image blocking is on. I'll cover how to style your alt text, as well as some email client considerations.

How to Style Alt Text

Styling alt text is actually very easy! We'll be using this image for our example. Images that have text in them with a message you really need to get across are the perfect place to use alt text. First, you'll need to add the alt text attribute to the image tag.

<img src=".../image.jpg" width="300" height="300" alt="Get 30% off today!" />

This text can appear in a variety of different ways in the email, but by default it will take on the styles of its container. There are a few styles we should set for maximum readability.

<img src=".../image.jpg" width="300" height="300" alt="Get 30% off today!" style="font-size: 18px;line-height:20px;" />

Font size will help make sure that the alt-text doesn't get lost. Don't forget to set line-height, as many email clients will cut off the bottoms of letters if the line height is shorter than the font-size. Line-height can also be used to create spacing above and below the alt text. Next we'll add a background color and font color, to mimic the color of the image.

<img src=".../image.jpg" width="300" height="300" alt="Get 30% off today!" style="font-size: 18px;line-height:20px;background-color:#987654;color:#ffffff;" />

Most email clients support background colors for blocked images, and this can really help maintain the look and feel of your email. Finally, some centering. We can use text-align:center to make the text center within the image. Vertical centering is a bit harder. We can use line-height to center the text vertically. Our example image is 300px tall, so we'd set the line-height to 300px (assuming the text will all be on one line) to get it to center inside the image.

Where does alt text show?

Now that Gmail no longer blocks images, most clients will show images by default. However, many clients allow their users to choose whether or not to download images by default. They may opt to not download these images for security or to conserve mobile data. Note that Outlook desktop clients (2007-2016) will show the alt text you've added, but only after a long "security warning" message. They will not allow you to style the alt text at all. Outlook 2011 for Mac does allow you to style alt text.

Alt Text in Email
Email Client	Blocks Images by Default?	Alt text displayed?	Alt text can be styled?
AOL	✔	✔	✔
Gmail	✕	✔	✔
Google Apps	✕	✔	✔
Yahoo! Mail	✔	✔	✔
Outlook.com	✕	✔	✔
Office 365	✕	✕	✕
Apple Mail	✕	✔	✔
Lotus Notes 8.5	✔	✔	✕
Outlook 2000-2016	✔	✔	✕
Outlook 2011 (Mac)	✔	✔	✔
Thunderbird	✕	✔	✔
iOS Mail	✕	✔	✔
Gmail App	✕	✔	✔

Alt text and accessibility

Using alt text as described above can greatly increase the accessibility of your emails. Screen readers will be able to read this text for the visually impaired. If your image has no text in it, the alt text can still help get the message across. Similarly, links can have the title attribute filled in to help the visually impaired. This text will also appear in some clients when the user hovers over a link.

Other considerations

Where possible, define height and width for your images using HTML attributes. This will preserve their dimensions (and your layout) when image blocking is on, and give you enough space to display your alt text. For fluid images, this may not be possible. Very small images, like social media icons, may break out of their correct size if too much alt text is included (see below). In this case you may want to keep alt text to increase accessibility To do so, define the image size using attributes, reduce the font-size to 1px, and change the font-color to white. This will prevent the blocked image boxes from blowing out their size. If the image is linked, some clients will show the text in blue and underlined. You can use inline styles to counteract this behavior in most clients. Finally, you may want to leave alt text off of some images. All things in moderation, and alt text is no exception. If an image isn't important to communicating the message of your email, and is just there for decoration, you may want to leave alt text off of it so as not to distract from the real goal of the email. As always, this is a judgment call.

How is your alt text looking?

If you haven't tested your email to see how it looks with images off, you should start today! Just make sure to check in the "Include a preview of each client with image blocking enabled" checkbox at the bottom of the test form, or select "Process all my email previews with blocked images by default" in our email testing platform to get image blocking results for your auto-process tests. Don't have access to our email testing platform? Get unlimited email, image, and spam testing, free for 7 days! Know any other alt text tricks or considerations? Let us know in the comments below!