When A Picture Doesn’t Speak A Thousand Words, ALT Text Can

Denise Chan

Research shows that 90% of information transmitted to the brain is visual, and visuals are processed 60,000X faster in the brain than text. And 67% of consumers consider clear, detailed images to carry more weight than product information or customer ratings. With stats like these, you don’t want to take the images in your email campaigns lightly.

A few days ago, we talked about responsive design and how not all browsers, email clients and devices read email layouts the same way. The worst case scenario here when an image is not compatible, it’ll break and your customer will see this dreaded icon:

Save broken images, lost revenue (and frustrated customers) by always adding ALT text to your HTML email templates. ALT text are words that are inserted as an attribute in HTML, displayed in place of a broken image. Even if an image doesn’t load, the ALT text will give the viewer enough context to still understand the message. Here are some tips to get you started:

Re-state the image

The ALT text copy works something like a caption; it describes what the recipient should have seen or the purpose of the image. Ideally, you want to stick to the text that was already in the image. Let’s say the image was a product shot titled “30% Off Fall Clearance”. Your ALT Text in this case would be “30% Off Fall Clearance” and not a detailed description of the product included in the photo.

Short and sweet

As with most other email copy (like the subject line), you’ll want to keep the ALT text short and to the point. Depending on the size of the image and the email client, extraneous text might get cut out. Even if it doesn’t, your customer will stop reading if they feel overwhelmed by text (bringing us back to that first stat on how text doesn’t process as quickly as visual information). To give you a better idea of word count, a 200-pixel wide button should have an ALT text count of roughly under 25 characters.

Spice up your ALT Text with CSS

We’re not going to lie, ALT text does look a bit 90’s – it’s not very sleek or appealing. But you can take it to the next level by styling it with CSS. Reformat and customize your text to a different color, font or larger size. We’ll follow up with a post at a later date on just how the code looks on this.

Happy optimizing your email images! Let us know how you’ve used ALT text differently in the past, or if you’re just getting started, and stay tuned for more on how to code awesome looking ALT text!