Don't Let Disabled Images Hold You Down!

It’s been awhile since we’ve discussed the importance of keeping in mind what your email message will look like with images disabled. Since our last posts on the subject (Don't Get Caught by the Dreaded Red X and Let's Raise the Bar), new tactics have surfaced that can help make the most of your message when images are off. The two tactics I’d like to share with you today are A) converting your images into html and B) styling your ALT text. Since most email clients disable images by default, it’s important to always keep this in mind – not just so your message still looks good to the average subscriber but also for the sake of accessibility for those that may be using a screen reader.

Converting your images to html

You may be thinking, “How does one convert images to html??” Well, it’s not truly converting the image in all its glory per se but you can get pretty darn close. Basically what you’re doing when using this method is “translating” the image into an html table made up of colored cells and/or rows that resemble the original image. Essentially you are making a pixelated, mosaic version of your image using sections of color. If you did this by hand, depending on the intricacy of the source image, it could be an incredibly painstaking and tedious task.  Luckily there are quite a few handy tools that you can use to simplify this process! One of my favorites is Mozify, a subscription feature provided by Email on Acid. The reason this makes my toplist is because the their process results in outputs that are quite detailed and give a close representation of the original image. I also love that they push the idea of not only using the tool to replicate the original but also to display an entirely different version to those without images enabled in order to prompt them to turn them on! See Mozify in action in the samples below:

This is the original message with images enabled >

And this is the version shown when images are not displayed >

Pretty cool, huh?? StyleCampaign has also developed an app that accomplishes this technique. Check out some of the neat examples they’ve produced in this blog post on The Email Guide.

Even without using a snazzy app, you can recreate this method by hand, just simplifying it a bit. Take a look at this example by PizzaExpress, a company well-known for its messages that shine with images disabled:

The one on the left shows images disabled and the one on the right shows images displayed >

When you have some extra time on your hands, give this method a try to see if you can improve engagement. Now onto the next method we'll take a look at...

Styling your ALT text

To start with, are you currently using ALT text, every single time?? If not, you’re missing the boat! Having ALT text is essential to providing those using a screen reader with information on what exactly is contained in your images. And it’s also essential for the majority of subscribers that have images disabled, either by default or their own choosing. If images are off, the ALT text may be the only chance you have to get your call-to-action front and center. Especially if you’re not making sure to include html text in the message itself, instead of containing text within your images. This is particularly crucial in the preheader / header areas of your message, which may be all that’s visible in the preview pane. Keep in mind that ALT text should be short and sweet – if it exceeds the size of the image, some clients won’t display it at all. Consider specifying the height and width of images, especially if you’re providing ALT text, so that there is a “placeholder” for that text and it doesn’t just collapse.

If you’re already using ALT text, kudos to you! Now you can try experimenting with the fun part: styling that ALT text to be more appealing and inline with the look and feel of your message. Not all email clients support styled ALT text but most of them do. CampaignMonitor has a good post that outlines the levels of support each major client offers. For a list that also includes mobile support for styled ALT text, see this great post by Litmus that’s chock full of examples.

You can use inline CSS to change the font, style, height or color of the text.  This can be especially useful for major elements, such as logos or buttons. Take a look at the example below:

This shows the logo when images are displayed >

This is the styled ALT text that is shown when images are disabled >

And this is the code that produced that effect >

A little bit nicer than the typical default ALT text, no? So give this method a try and see if you’re able to more successfully style your messages, regardless of email client image settings.

Have you tinkered with styled ALT text before? How about converting images into html? Let us know how it’s worked out for you by commenting below!

Anna Pfeiffer
Marketing Strategist at Bronto