The Secret Guide To Alt Image Tags

Alternative (ALT) attributes for images are standard practice across the web. However, it can often be overlooked in email marketing—a place where it is critical to include. Let us walk you through these and how they can improve your email marketing in just a few minutes.

ALT attributes in HTML allow alternative text to be displayed when an element cannot be rendered. In many cases, this happens because email services do not automatically load images, an image is broken, or a faulty connection. The primary use of ALT text is to make your content more accessible to screen readers and web browsers.

Basic & Stylized ALT Image Tags

A basic example of how an ALT attribute looks can be seen in the example below. Specifically where we see the "alt="  value being used. Whatever is typed in the quotation marks will be the text displayed when email services cannot render the image.

<img src="logo.jpg" width="400" height="149" alt="Your Logo">

However, you can also get creative with ALT tags by adding stylization. This type of example will be a bit more complex but can allow you to stand out amongst the competition.

<img src="logo.jpg" width="400" height="149" style="width: 100%; height: auto; display: block; color: blue; font-size: 38px; font-style: bold; font-family: 'Brush Script MT', cursive;" alt="Your Logo"/>

Litmus has a detailed post that goes into great detail about the full support that alt tags have, as well as additional examples.

ALT Tag Support In Webmail Clients

In some webmail clients, stylized ALT text may be unavailable or unnecessary due to images loading automatically. You can use this table to determine whether stylized ALT text benefits your email audience and whether it is worth the effort.

Table provided by Litmus

Please keep in mind that mobile and desktop clients will have their own limitations regarding what they support in terms of ALT image tags.