Mastering Styled Alt Text in Email
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?|
|Lotus Notes 8.5|
|Outlook 2011 (Mac)|
Gain more control with Mozify
Using our unique Mozify tool, you can have even more control over what appears when images are blocked. For example, you can add spans around different sections of text to more closely mimic the appearance of the marketing copy that was included in the image. You can use this to apply different font-family, font-size, line-height and so on.
I’ll show you how to do this quickly in the tutorial below.
First, start a new Mozify and paste your code into the start form. Mozify will load the code of your email, and each image (if displayed at its native size) can be clicked on to Mozify it. I’ll click on the 30% off image in this email and start the process.
Select “Text” and click “Next” to get started. Mozify will sample the colors in the image and choose one that is an average. For this image it was a bit too dark, so I’ll select “Cell” and change the background color to #619540. I’ll also select “Font” and change the color to white and the family to Verdana.
Now we’ll add in our text. For this example, we have just two lines of text. I’ll put each line in a span and use a BR to separate them. Then we can style each line on its own. Use the original/Mozified toggle to tweak your text until it matches the image as closely as possible. I settled on the following code:
<span style="font-size:100px;font-weight:bold;line-height:95px;">30% OFF</span><br/> <span style="font-size:52px;line-height:55px;">THIS MONTH ONLY!</span>
After adding that in, our Mozified image should look like this.
Click “Next” on the bottom right, and then “Insert” the Mozified image. Grab the code from our site and you’re ready to go! If you’re curious about where Mozify is supported, check out our Mozify page.
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.
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!