For the most current results on image blocking in email clients, view our updated post.

I read an article on Clickz today by Jeanne Jennings on the current state of image blocking in email. Jeanne tested 30 random B2B and B2C emails in her inbox on their approach to image blocking.

While the results were mixed, I was very surprised to see her suggest that image alt tags might not even be worth the effort. She cited the instructions Outlook 2003 places before the alt text for every image (explaining the image is blocked and how to show it) as the reasoning behind this.

It’s a mouthful. And it precedes any alt tag text the sender might have included. So even when there were alt tags, they weren’t prominently placed or easy to read or skim. Based on this, the value of alt tags is minimal. I’m not sure I’d bother.

The only problem with this assertion is that not everyone uses Outlook 2003. In most of the popular email environments, such as Yahoo, Gmail, Thunderbird for example, alt text is displayed unimpaired for every image in your email and can go a long way to encouraging your recipients to enable images. But there’s another benefit that needs to be considered.

What about accessibility?

To many email readers, there’s an even more important reason to ensure descriptive alt text for every image in your email – accessibility. Any of your recipients who are visually impaired use the alt text you specify for each to get a better understanding of your email content, especially if that image has some relevance/importance to the content of your email.

Jennifer Kyrnin has put together some nice suggestions on how to write alt tags for accessibility that are worth a look.

The magic of CSS

While alt tags are extremely important, there’s an alternative CSS technique we can use in our HTML emails that in my opinion beats the pants off the old images/alt text approach.

This technique, explored in detail by Mark Wyner a few months back, includes the use of background images via CSS instead of simply placing the image in your XHTML/HTML content.

Using this approach, Mark can display styled and well formatted alt text when images are off, replaced with the image itself when images are on. No ugly placeholder images with a big red X, no messy instructions in Outlook, just a nicely styled text alternative or the image itself. Further to this, the content is completely accessible for the visually impaired. Talk about a win/win! So, I guess the takeaways are:

  1. Always use alt text for the images in your email
  2. Try to keep them as descriptive as possible (see here for more on this)
  3. If possible, try and use the CSS background image approach to avoid the ugly placeholder issue altogether.
  • Nate K

    However, there are still quite a few issues with CSS IR. If the mailer supports CSS, but blocks images – the ‘alt text’ may not be seen (depending on your technique and the CSS support of the mailer). For instance, if I open it in Apple Mail with images blocked, and you are using something like the Phark IR, then I would never see the text as it is hidden off-screen. The CSS rules will still apply, but the images would never be shown. This could be hiding some important content for the reader.

    The issue of IR is even tougher with e-mail, as you can’t resort to things like SiFR or using any creative scripting/flash (as that wont be displayed – or most likely blocked all together).

    For email, I would still add the images to the content (if they are important to the content). If they are decorative, use the CSS IR approach.

  • joel

    is there any way we can use alt tags in css for images????

Want to improve your email marketing? Subscribe to get tips on improving your email marketing delivered to your inbox.

Join 150,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free