Do You Take Full Advantage of HTML Images?

Like many publishers, you may be using images to enhance the effectiveness of your HTML messages.

As we’ve discussed before, one of the drawbacks to using HTML images is that many email clients block images. Of course, there are things that you can do to address image blocking issues.

Today, I want to bring your attention to a little trick with HTML images that can help you to get your message across even when images are blocked.

A Typical Blocked Image

When an email client blocks images, they typically show an outlined blank area where the image was supposed to be, along with a “broken image” icon:

This looks pretty ugly…is that little thing in the corner supposed to be your picture? Let’s hope your subscriber doesn’t think so.

Wouldn’t it be better if you could put something in place of that blank image?

• Your subscriber would be less confused
• You’d look more professional
• You could drive your subscriber to take some action

You Can — Turn Blocked Images Into a Positive With Alternate Text

You can put text in that blank area where your image appeared by using a frequently overlooked area of HTML known as alternate image text.

That way, instead of the blocked image icon above, your subscribers would see:

Now, not only did you give subscribers an idea of what would normally display there, you told them to go shop your site.

I consider this to be an advanced tactic… not because it’s hard to do (it’s a piece of cake, as I’ll show you in a moment!), but because I see so few people using it effectively.

Let’s take a quick look at a couple of email samples to see what I mean.

What NOT To Do

Here’s an email I got a while back from Borders — not exactly a company with a small marketing budget. Click to see it full-size:

As you can see, Borders made virtually no use of alternate text. This is especially bad since nearly the whole email is images. (There was some text at the end of the email, but I had to press “Page Down” twice to get to it.)

The result? I have zero idea what is supposed to be in the body of the email. The subject says “coupons” but I can’t see them, and I have no idea how to get to them!

Much Better Image Use

Contrast that with an email I recently got from Sierra Trading Post, a discount clothing and housewares retailer:

Nearly every image uses alternate text, and they even sneak some promotional copy into the big one near the top of the message.

They also keep the image sizes smaller, and use a combination of text and images. Between that and their alternate text, this email is infinitely more readable than our other example.

So How Can I Use Alternate Text With My Images?

When you are working on an HTML message in your AWeber account, and you want to add an image, you click the “Insert/Edit an Image” icon in the HTML editor.

You’ll now be given the following dialog box to enter your image URL and format your image:

Whatever text you enter in the “Title” field (circled in the image) will be used as your alternate text (it will also appear when someone hovers their mouse over the image in your message).

You can’t control whether your subscribers choose to display your images or not. That doesn’t mean you can’t communicate your message to them effectively.

See Also

Effective Image Usage in HTML Messages

11 Responses

Notify me of followup comments via e-mail

Email Tips.
  Delivered.

Popular Topics

Search the Blog

Recent Comments