Extravision Blogsblog

Recent Posts



Don’t let Alt text ruin the aesthetics of the email

April 29, 2014

It is important not to overlook the alt text attribute. The alt text is usually applied to an image tag so when an image cannot be displayed, the alt tag steps in as a substitute. Images that cannot be displayed are usually caused by a slow connection, an error in the src attribute or if the user uses a screen reader.
Most email clients have a default setting that prevents images from loading; hence the importance of adding alt texts to your images.
Remember the alt text should describe the image especially if it contains information that you don’t want your audience to miss and, if you have used images just for decoration; keep the alt text blank as so alt="".
How to add alt text to your images
The code you need for the alt attribute is alt=”add alt text here”. This is placed within the img tag. For the alt text to appear, it will need a placeholder box which can be created by adding width and height values to the img tag.
Here’s an example of the code:
<img src="logo.jpg" alt="Extravision" width="50" height="50" style="display:block;" />
You will notice that I added style="display:block;" to the img tag. Some email clients will add extra spacing and gaps around the image. This code ensures that that doesn’t happen.

Figure 1. Alt text default styling
Default example of alt text

How to style the alt text
Styling the alt text is done in the same way you would style normal text; by adding font-family, font size, and colour etc. into the style attribute. The style attribute can be adjusted to how you would like the alt text to appear.
Here’s an example of the code:
<img src="logo.jpg" alt="Extravision" width="50" height="50" style="display:block; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#01abe9; font-style:italic; text-align:left; -webkit-text-size-adjust:none; "  />

Figure 2. Styled alt text
Styled example of alt text

How to add alt text using wysiwyg?
Editing the alt text through wysiwyg is simple. You will need to right click on the image then select “Image Properties”. This will open up a pop up box shown in figure 3. Under “Alternative Text” is where you enter the alt text for that image.

Figure 3. Wysiwyg image properties
How to add alt text through wysiwyg

To style the alt text, simply click on the “Advance” tab then add the style to the “Style” section as shown in figure 4.

Figure 4. Wysiwyg advance image properties
Styling alt text through wysiwyg

Don’t forget to test your email on various email clients as they can appear differently.
Quick Tip: Remember to Style Your ALT Text - Nicole Merlin
The Ultimate Guide to Styled ALT Text in Email – Justine Jordan

Posted by Carissa Lo
Email Design

No comments

Comments are closed.

From the Blog

How to craft the perfect re-engagement email: Topshop example

In an ideal world, everyone on your list would be eagerly awaiting your email. They…

Jenni Malley
June 1, 2017

How To Get Your Perfect Email Template

If you send email campaigns then you probably use a template. Not every email campaign…

Jenni Malley
May 12, 2017

Latest Tweets

Get in touch

MediaCity UK
M50 2AB
Find us on Google maps

Main: +44 (0) 161 817 2929
Support: +44 (0) 161 817 2930
Email: [email protected]


Facebook IconTwitter IconVisit Our BlogVisit Our BlogVisit Our Blog