Alt Text Styling (Especially for HTML Emails)

Alt Text Styling (Especially for HTML Emails)

Valid HTML requires that your image tags have an "alt" attribute inside of them—it can be empty, but the attribute should be there. This is usually used for the purpose of SEO, since it's another opportunity to add some keywords to your page. It's also for accessibility and enhances the experience of users with screen-readers, since your alt attribute could explain what the picture is/what it's for. Last, it's used as a back-up in case the image fails to load for whatever reason (e.g. image URL is bad, slow internet connection, images turned off in email client).

The cool thing with alt attributes is that you can actually style them, so they don't just look like this:

This image is broken, so I show up

I can add styles to either reflect parts of the image that are important, or change the font—essentially any style you need:

This image is broken, so I show up

This is achieved by adding a style attribute to the image tag, like this:

<img src="/not-real-image.jpg" alt="This image is broken, so I show up" style="font-family: Georgia, Times, Serif; font-size: 30px; color: #158bae;">

Real-Life Application

Alt styling has the greatest use-case when using images in HTML emails. You may say that styling the alt attribute is not worth the time on your enterprise website, since internet speeds are at an all-time high and most of your users will be using these fast services. However, email is likely always going to have a need for this trick. Many (if not all) email clients default to not automatically downloading/displaying images in email. This is for security reasons, as well as a nice feature for email-viewers on phones (saving data and disk space).

Recently at Revamp, I created a few email templates which featured banners with text in the image indicating what kind of email campaign the content was (newsletter, alert, thank you note, etc.). This was a good solution, since you shouldn't put live text over a background image in HTML emails, it conserved space and looked nice. However, this meant that if the person receiving the emails had images turned off, or hadn't chosen the "always display images from this sender" setting, they wouldn't know what the text/title of the email was.

Email with banner image

To rectify this, I simply added a style attribute to affect the font-size, font-family, color and background-color to the image tag.

Alt style example

This is a good habit to get into. The alt style not only adds a little bit of class to your broken image look, but it also tips off your users that they should turn on/download the images in the email. If there were no style or alt text at all, it's easy to ignore or assume there was some kind of mistake/error.