Do You Take Full Advantage of HTML Images?

Posted by Justin Premick

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:

If an email program blocks an image, your subscriber may see this.

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?

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:

There, isn't that better?

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:

Click to see 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:

Click to see full-size

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 Insert an Image into Your HTML Message in the HTML editor.

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

Insert Alternate Text in the Circled Box

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





Print This Post

Related Posts:
  • No Related Post




11 Responses

  1. Peter Koning
    January 23rd, 2007 at 11:47 am

    Good tip.

    To build on this, people do love pictures and will also click on them, so where it makes sense you should also link the pictures to whatever url makes sense.

    I think you need to view the html and add an <a href…></a> around the img tag, but I’m no expert. Maybe Justin or someone else can comment.

    Cheers,
    Peter

  2. Justin Premick
    January 23rd, 2007 at 11:53 am

    Peter,

    You don’t need to know HTML to link your images.

    When editing your message, left-click on your image in the HTML editor to select it. Then, click the "Insert/Edit a Hyperlink" icon (it looks like a globe with a chain link).

    In the popup that appears, enter the URL that you want the image to be linked to and click OK.

  3. Glenda Watson Hyatt
    January 24th, 2007 at 4:43 am

    Just to clarify, when using Aweber’s "Image Properties" screen and entering text in the TITLE field, does that then become both the ALT and TITLE for the img? That would be rather redundant for people using screen readers.

  4. Justin Premick
    January 24th, 2007 at 9:49 am

    Glenda,

    Yes, the text entered in that field would serve as both the ALT and TITLE attributes for the image.

    As many people are not familiar with those attributes and what the difference is between them, using one location to enter text to apply to both attributes makes that feature easier to use.

    If you are concerned about the use of that text in both the TITLE and ALT attributes, you may prefer to add alternate text manually, which can be done directly in your message HTML. Just click the ‘html code’ tab that appears in the lower left-hand corner of the HTML editor!

  5. Tony
    January 25th, 2007 at 1:30 am

    Nice feature!

    Makes sense that with so many spam filters and such, this will help get the message through!

  6. Charles Dare
    January 25th, 2007 at 7:22 pm

    The Company is to be applauded for having an education manager I didnt grow up computer literate and are devouring your info with gusto,I will commit sooner than later, bear with me as I learn more off my slow connection .Warm Regards @ many thanks,Charlie Dare.

  7. Walter Gavurnik
    January 25th, 2007 at 10:05 pm

    A point to note on the above responses,
    since Netscape and IE react differently to
    title and alt tags, it is best to use both.
    Personally, I have no clue how different email
    clients work with either tag, I only know that
    for SEO you should have both. This is also for
    site users to see the title/alt included.

    Sorry if this doesn’t make sense. I would love
    hear anyones thoughts on this.

    GB
    Walt

  8. Shaneshup
    February 9th, 2007 at 8:26 pm

    You should also remember to put a period ( . ) at the end of your alt text. Users who are browsing with softare for the visualy impaired will appreciate this ;-)

  9. » Who Cares About Plain Text? - AWeber Blog
    March 1st, 2007 at 9:06 am

    [...] But consider this: not every HTML message they get is well-designed (think about the messages you get). A lot of them are image-heavy, and may or may not make use of ALT text. So, they turn off HTML in their email client. [...]

  10. Hall of Shame external exhibits « Email Marketing Hall of Shame
    March 5th, 2007 at 12:01 pm

    [...] Tucked away in this useful AWeber post about images and alt-tags is an exemplary screenshot of a classic images-only email. [...]

  11. Francis Hayes
    June 19th, 2008 at 7:34 pm

    I second the motion by Charles. Of all the companies I deal (or have dealt) with online, Awber is the only one who is proactively educating their clients. This benefits both the client and Aweber. Probably the reason Aweber is the #1 autoresponder online.

    Justin and Aweber, thank you for this valuable service.

Leave a Comment













Subscribe without commenting

Subscribe via RSS rss




footer