Tuesday, June 03, 2008

Tip: Complete the alt="" for images uploaded via Blogger

keep in mind what follows only apply when preparing posts in the EDIT HTML mode and not in the COMPOSE (WYSIWYG) mode.

screen shot showing Blogger post editor in Edit HTML mode plus highlight image upload icon and Preview link

I prepare practically all posts in the [Edit HTML] mode and you are highly encouraged to do the same. You get better control over your blog. HTML is not difficult, and as you browse through my Blogger related blogs (this blog as well as the blogs in my signature line at the bottom of this post), you will eventually pick up the more important elements of HTML. I guarantee you it will not be difficult. If you are more familiar with the COMPOSE (WYSIWYG or What You See Is What You Get) mode, don't fret. You can always check by clicking "Preview" and get WYSIWYG displayed, just as in the COMPOSE mode.

A typical script you will get after uploading the image is given below:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_jizoPL28qCY/SD_AiGSnP8I/AAAAAAAABfk/F5OUlKXf57E/s1600-h/comments+blogger+tips+and+tricks.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://1.bp.blogspot.com/_jizoPL28qCY/SD_AiGSnP8I/AAAAAAAABfk/F5OUlKXf57E/s400/comments+blogger+tips+and+tricks.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5206091386300350402" /></a>

you will get when you upload an image like the one below (Update: If you use the updated post editor you will have to add the alt="" tag yourself, otherwise use the old post editor to upload images):

Blogger Dashboard: 72 comments waiting for moderation

Note the alt="" highlighted in red. This is a HTML attribute which had been added by Blogger for your convenience. You are greatly encouraged to put some text between the quotation mark "", like for example, alt="some text" where "some text" are text which is descriptive of the image. For example, for the image above, I have edited alt="" to alt="Blogger Dashboard: 72 comments waiting for moderation".

The purpose of this alt attribute is so that if for some reason the image cannot be displayed, the ALTERNATIVE TEXT that you have put between the quotation mark in the alt="" attribute will be displayed instead. It will also be of the help to the visually handicapped as the alt text will be read out for them. Also some visitors may be using all text browser which will see the alt text instead of the image. Further, search engines which cannot read images will be able to read the alt text an idea of what the image is about.

35 comments:

  1. Hi, Peter Chen ..

    Its me again .. dcuteztphantom
    I just wanna invite you to my blog again. I've uploaded a poll there. So.. can you give your vote ??? :)

    Thank you ...

    Emm.. by the way can you email me @ cyber.phantom79@yahoo.com and give some suggestions and critics about my blog, please. I think I need some help now :)

    ReplyDelete
  2. I'm glad that you are doing the same good articles as in the past months/years.
    Some of them helped me a lot.

    Best wishes,
    Biceps brachii

    ReplyDelete
  3. Hi Peter,

    Great post. While I knew about the alt thing that when you hover your mouse over the image, it will display whatever is given in the alt tag and that it is crawled by search engine spiders.

    But what does title do? How is it helpful? Especially considering that both alt and title contain the same text?

    And can't believe that Peter who writes such big posts everyday complete with screenshots and images is lazy enough to type a 't'.

    ReplyDelete
  4. Thank you very much! This post really helped me get the alt working.

    Iv whacked it on my newest post.

    sharpodue.blogspot.com

    ReplyDelete
  5. Thanks so much! I am a new blogger and have never heard of this before. Very helpful!

    ReplyDelete
  6. very nice...Thanks for tips

    ReplyDelete
  7. Hi!
    Thank you for this tips!
    You rock my friend!
    See you around.
    lunaticg.blogspot.com

    ReplyDelete
  8. Thank you! for showing that one must put the alt text in twice!

    ReplyDelete
  9. Thanks Peter for the helpful instructions on adding an alt tag to a blogger image. Your explanation was the best one I found! It looks great on my website How To Pass The EPPP Exam Without Even Trying! (http://eppp-study.blogspot.com/2009/08/eppp-flashcards-eppp-study-supermemo.html).

    ReplyDelete
  10. Hi Peter,


    None of my pictures have the 'alt=""' tag. Am I supposed to put that in myself? Also, my html looks nothing like yours. It doesn't start with "onblur...." and there's no 'border=0' in it. Just to name a few. What am I doing wrong? :(

    ReplyDelete
  11. Done. Thanks gajillion times.

    ReplyDelete
  12. Hi all,

    This post may need updating because it seemed controversial whether to use duplicate text for both alt and title attribute. Check back later.

    ReplyDelete
  13. Hey Peter your article was great but i have got a problem.. coz i dont usually upload pictures directly to blogger instead i host them from photobucket because it reduces the loading time of my page... Then how can i use alt tags?

    Please help me....
    Tuan Ahamed Cassim

    "SCIENTIFIC RESEARCHES AND FACTS"

    ReplyDelete
  14. No problem, alt="" and title can still be used for the codes you get from Photobucket as well as any <img> tag plus some other tags as well, eg, <a> you can add title="" so people hovering mouse over link can see what you wrote there.

    ReplyDelete
  15. Peter how can i point out a specific image i hosted .. by searching 4 what in html code..by the title or alt="" ?

    "SCIENTIFIC RESEARCHES AND FACTS"

    ReplyDelete
  16. search for what you put in the alt="" tag including the quotation marks.

    ReplyDelete
  17. Peter, there is only one alt tag in my html code ..if i insert something to that alt tag will this tag go to every image i am hosting?? I mean for example if i insert alt="globaltutor"
    Will this tag applies for every image i have in my blog??

    "SCIENTIFIC RESEARCHES AND FACTS"

    ReplyDelete
  18. Nothing you put in a post will apply to everything in your blog

    ReplyDelete
  19. Peter, sorry 4 troubling u dis much..but i still have got this problem .. :(

    Dis is the problem i have now -
    These r the alt tags i found...

    1) < img expr:alt='data:title' expr:height='data:height'

    2) < img expr:alt='data:title' expr:height='data:height'

    3) < img expr:alt='data:title' expr:height='data:height'

    4) < img expr:alt='data:title' expr:height='data:height'

    5) < img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/>

    6) < img alt='' class='icon-action' height='13'

    7) < img alt='' class='icon-action' height='13'

    8) < img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>

    9) < img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>

    10) < img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>

    These are the alt tags i found on my html code...

    Peter pls can u inspect these and find me the solution plsss....

    SCIENTIFIC RESEARCHES AND FACTS

    ReplyDelete
  20. First, I am not an IT person nor programmer, but I suspect that this:
    < img expr:alt='data:title' probably means whatever is in the title of something is the value of the alt='' tag.

    regarding alt='', just complete it for eg. alt='some text'

    ReplyDelete
  21. This was super helpful. I feel like an HTML pro now. Thank you. I often embed photos or I use the newer system which doesn't automatically give you the alt="". When I went to add that in, nothing came up when I hovered the mouse over the image. But, when I did title="" it worked. Do you see any problems with my doing it this way?

    ReplyDelete
  22. There should be no problem caused by adding the alt and title attributes as they serve different functions.

    ReplyDelete
  23. What exactly are the differences? I read that you should only use a title when the image links out and use the alt tag otherwise.

    ReplyDelete
  24. The content in alt attribute is displayed in browsers when for some reason the image cannot be displayed (and is also read by screen readers used by people visually impaired) plus text only browsers.

    The content in title attribute is shown in the tool tip when a mouse is hovering over the image.

    So you can see they serves different functions. However, using both for img is controversial and rather than joining in the controversy, I have long ago edited the post to leave out mention of the title attribute.

    ReplyDelete
  25. Oh just to add one more comment. Those who tells you to add the title attribute to the img tag when used as the anchor in a hyperlink probably is because they believe using img as the anchor does not provide info to search engine what that hyperlink links to. However, title attribute can also be added to the hyperlink tag <a href="" title="">

    ReplyDelete
  26. Well, I didn't see any alt tag in the html for images in blogger. Perhaps they have discontinued it.

    ReplyDelete
  27. It will be there when you use the old post editor but for the updated post editor they have changed the code and you can add alt="" yourself, no issue.

    ReplyDelete
  28. this is very nice
    see my site http://www.specialsedu.com

    ReplyDelete
  29. Really Helpful. Thank you very much.
    see my blog

    http://www.ed-that.com

    ReplyDelete
  30. I've been looking for this!
    Thanks :)

    ReplyDelete
  31. OMG! I love you people! Thank you so much!

    ReplyDelete
  32. Thanks man ... thanks a lot... its help me to come at first page of google .. www.tamilsms.net

    ReplyDelete
  33. How do you know when an alt tag actually is working?

    ReplyDelete
  34. Thanks for the info; I'll have to add some alt text to my cartoons for sure. I am curious though, why there is no space between the quote marks and the 'id' code.

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics