Mastering Styled Alt Text In Email - Email On Acid

Trang chủ » Html Image Alt Text Color » Mastering Styled Alt Text In Email - Email On Acid

Có thể bạn quan tâm

Email On Acid Logo MENU Menu Talk to a Strategist Free Trial Talk to a Strategist Free Trial Blog / Mastering Styled Alt Text in Email Styling Alt Text in Email Email Development October 13, 2016 • Kyle Lapaglia 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.

Table of content

  • How to Style Alt Text
  • Where does alt text show?

  • 01

    Alt Text in Email
  • Alt text and accessibility
  • Other considerations
  • How is your alt text looking?

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. Mastering Styled Alt Text in Email 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. Other considerations 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!
Author: Kyle Lapaglia

Categories

Categories Select Category Email Deliverability Email Development Email Marketing EOA News Featured White Paper Industry News Reporting Splat Chat Tutorial White Papers

Latest Articles

css animation with snowflakes Email Development December 5, 2024
Let it Snow: How to Use CSS Animations in Holiday Emails
Pencil writes a list of email marketing goals for 2025 Email Marketing December 4, 2024
5 Email Marketing Goals for 2025
Badge in an email envelope indicating a DMARC policy Email Deliverability November 25, 2024
What DMARC Policy Should Senders Use in 2025?
Email On Acid Logo

Subscribe to our emails

Email *
  • I have read and agree to the Email on Acid Terms of Service. *
  • I have read and agree to the Email on Acid Privacy Policy. *

Check your inbox monthly for your EOA Newsletter!

Send me the Email on Acid newsletter. I expressly agree to receive the newsletter and know that I can easily unsubscribe at any time.

Follow us

Email on Acid
Learn More
Resources
Help

© 2023 Email on AcidPrivacy PolicyCCPATerms and Conditions

We use cookies to optimize your user experience as well as to send improved content. If you continue to browse our website, you accept these cookies. You can personalize and change your consent choices by returning at any time to this site. Allow all Disable all Cookie Settings

Your Cookie Choices

When you visit any website, it may store or retrieve information on your browser, mostly in the form of cookies. This information might be about you, your preferences or your device and is mostly used to make the site work as you expect it to. The information does not usually directly identify you, but it can give you a more personalized web experience. Because we respect your right to privacy, you can choose not to allow some types of cookies. Click on the different category headings to find out more and change our default settings. However, blocking some types of cookies may impact your experience of the site and the services we are able to offer.

Allow all Performance Cookies These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us to know which pages are the most and least popular and see how visitors move around the site. All information these cookies collect is aggregated and therefore anonymous. If you do not allow these cookies we will not know when you have visited our site, and will not be able to monitor its performance. > Targeting Cookies These cookies may be set through our site by our advertising partners. They may be used by those companies to build a profile of your interests and show you relevant adverts on other sites. They do not store directly personal information, but are based on uniquely identifying your browser and internet device. If you do not allow these cookies, you will experience less targeted advertising. >

Từ khóa » Html Image Alt Text Color