Image Alt Text Vs. Image Title : What’s the Difference?

Most webmasters don’t see any difference between image alt text and title mostly keeping them the same. A great discussion over at Google Webmaster Groups provides an exhaustive information on the differences between an image Alt attribute and an image title and standard recommendations of how to use them.

alt text Image Alt Text Vs. Image Title : Whats the Difference?Alt text is meant to be an alternative information source for those people who have chosen to disable images in their browsers and those user agents that are simply unable to “see” the images. It should describe what the image is about and get those visitors interested to see it.
Without an alt text an image will be displayed as an empty icon: without alt Image Alt Text Vs. Image Title : Whats the Difference?In Internet Explorer Alt text also pops up when you hover over an image. Last year Google officially confirmed that it mainly focuses on an alt text when trying to understand what an image is about.

Image title (and the element name speaks for itself) should provide additional information and follow the rules of the regular title: it should be relevant, short, catchy and concise (a title “offers advisory information about the element for which it is set“). In FireFox and Opera it pops up when you hover over an image:

image title Image Alt Text Vs. Image Title : Whats the Difference?

So based on the above, we can discuss how to properly handle them:

  • the both tags are primarily meant for visitors (though alt text seems more important for crawlers) – so provide explicit information on an image to encourage them to view it or get them interested.
  • include your main keywords in both of them but keep them different. Keyword stuffing in Alt text and Title is still keyword stuffing, so keep them relevant and meaningful.

Another good point to take into consideration:

  • According to Aaron Wall, alt text is crucially important when used for a sitewide header banner.
f8d69258525dec38624a29eb3d570d8c 64 Image Alt Text Vs. Image Title : Whats the Difference?
Ann Smarty is the blogger and community manager at Internet Marketing Ninjas. Ann's expertise in blogging and tools serve as a base for her writing, tutorials and her guest blogging project,
f8d69258525dec38624a29eb3d570d8c 64 Image Alt Text Vs. Image Title : Whats the Difference?

You Might Also Like

Comments are closed.

27 thoughts on “Image Alt Text Vs. Image Title : What’s the Difference?

  1. We should also keep the disabled in mind while writing alt tags because text-to-speech browsers read the alt tag as a description of what the image is so that blind users understand what you are trying to communicate in an image.
    It’s useful when writing title tags to think of what the caption for that image would be.

  2. thanks for the tips, but i have one question: what about punctuation and special characters in alt. and title descriptions? can you use any of the following? @ | , . \ ?

  3. Let’s be clear – In IE, the alt attribute is used as a tool tip/pop up only if a title attribute is not used.
    When you use both an alt attribute and a title attribute, the title overrides the alt text and becomes the tool tip/pop up when the mouse is placed over an image.

    @Iog – I know you can use the following symbols, but I’m not sure about the others.

  4. @Log
    I’ve used , and . before so I’m sure that ? is fine as well. But if your putting a @ or | in your Alt or Title tag then you should reread what this article was talking about as there not used in the english language in any way you would be describing the relevance of the image. And if your putting an email address in an image as spam protection then putting the address in the alt tag would negating trying to hide it from the spiders.

  5. @SEO Canada | You’re right | No One Talks Like This | Point Taken

    : )

    I appreciate the advice, I’ve got a lot of changes to make.

  6. Chris G – Your right – except for when it comes to ‘img’ tags nested in an ‘a’ tag.

    <a href=”" title=”Click to send Chris an email”><img alt=”Chris G” /></a>

    In this case, IE would display ‘Chris G’ as the tool tip on the image, not ‘Click to send Chris an email’, which in my opinion is incorrect. IE should be using the text from the title attribute of the parent ‘a’ tag to populate the tooltip.

    Firefox works this way.

  7. I agree with photos and other visually informative images — they need both alt and title attributes. But what about the technical images? Slices, separators, corners and plenty of other stuff which doesn’t need to be titled? IE pops up their alt, causing unwanted attention where it’s not needed. In fact, nobody needs them to have the alt attributes, but such images fail validation simply because they don’t have alt. It would be nice if IE stopped treating alt like titles, it would allow us to alt technical images too — just for the sake of validation.

  8. @Rezo
    “Technical images” should be left with an empty alt-attribute to let text-to-speech browsers know that this image is unimportant.
    Like this:

  9. I wonder… At the end which atribute will last?
    The alt or title.
    Seems like title is becoming an substitute for the alt element.
    It’s possible that at the next HTML revision to say that ALT is deprecated?

  10. @Monturi Crap:

    Both attributes serve different purposes, so both will “last”. Alt is for when the *image* cannot be seen; title is additional descriptive or advisory information (for any element). Neither will be deprecated.

  11. I thought readers would be interested in an application called Alt&Title that applies missing alt and title attributes to applicable HTML tags. I have used it on hundreds of web pages and it has saved me many hours of work.

    Give it a go. I hope you find it as useful as I have!

    Here is the web page promoting it…

  12. Thank you for your article, is the first time when i understand that a title image is different than alt image. I understand what is the alt image now…but now i must learn what is the title image

  13. hey ann it would be great help for me..well can u tell me what if i don't use title tag and focused more on alt tag would it effects per image search.?

  14. hey ann it would be great help for me..well can u tell me what if i don't use title tag and focused more on alt tag would it effects per image search.?

  15. Thank you for breaking down the difference between the two. I’ve been searching for that. I hope that this information is still correct since it is 3 years after the post.

  16. Great tips, because the bots from every search engine view title txt and alt.txt differently with regards to images. Although I was told ALT txt is the most important of the two.

    Thanks guys.

  17. Amazed that no one mentioned the fact that WordPress 3.5 completely dropped core support for the image title. It only supports the image alt text. So if you want your titles back you’ll need the Restore Image Title plugin. This happened at about the same time Google revamped Google Image search, which relies primarily on file name and title.

    Also, on many premium themes, for the header logo, it looks for a file called header.jpg or header.png. There’s no way to include keywords in the file name. Now, if your theme supports a customization option for uploading your own header graphic, then yes, you can name that file whatever you like and fill it with keywords.

    One question. Where is the analytic data that supports the idea that you should make the title and the alt text different? Last I heard, Google was viewing that as trying to game the system and preferred both to be the same.

  18. Thanks a lot Ann. Untill now I was wondering what the purpose of the Title tag when you can perfectly give information about an image by using an ALT tag. I thought it is redundant. Now I can see both of them have their importance. Thank you.

  19. What if you have an anchor tag (link) wrapped around an image? Do you add title parameter content to both the “A” tag and “IMG” tag?

  20. In wordpress its a little confusing when adding images to a post as the image title goes in the ‘description’ field and the title field seems to be the file name.