Webmaster Forum

Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


Reply
 
LinkBack Thread Tools Display Modes
Share |
  #1 (permalink)  
Old 01-21-2010, 04:56 PM
hof hof is offline
Junior Member
 
Join Date: 01-08-10
Posts: 4
iTrader: 0 / 0%
.png vs .jpg for SEO

Hi there,

A quick question that is hopefully really easy to answer. I'm replacing the alt text (for SEO purposes) and noticed that some images have .png extensions and others .jpg. The problem is the .png extension doesn't show the alt text when I mouse over it. To be sure, what I think is the alt text when I mouse over is coded as alt="abc" and not title="abc" right? If so, does that mean the search engines can't read the alt text I'm adding to the .png images?

Thanks for helping out a newbie!
 
Reply With Quote
  #2 (permalink)  
Old 01-21-2010, 05:03 PM
HTMLBasicTutor's Avatar
Administrator
 
Join Date: 10-29-07
Location: British Columbia, Canada
Posts: 20,794
iTrader: 5 / 100%
I'm a little confused by your question but will give it a shot.

The extension of the image itself (.png, .gif and/or .jpg) has nothing to do with the alt attribute showing up when you mouse over the image. It would depend on if the alt attribute is included (required to validate XHTML) or not.

If this doesn't help, please reply rewording what you are trying to ask.
__________________

HTML Basic Tutor - Learn how to code for better SEO
Basic Computer Information - Computer & internet basics for website owners

SEO troubleshooting and review services available. - Pm me.
 
Reply With Quote
  #3 (permalink)  
Old 01-21-2010, 05:19 PM
hof hof is offline
Junior Member
 
Join Date: 01-08-10
Posts: 4
iTrader: 0 / 0%
Thanks for the quick reply!

Here is the actual code:

<img src="images/flash_images/orange_tanks.png" alt="scuba diving rentals" width="64" height="89" hspace="10" vspace="10" align="right">

When I mouse over it, shouldn't I see 'scuba diving rentals'? The only difference I could see between this and another image was the .jpg extension which was why I thought that was the problem. I hope this makes it clearer?

Here's an example of an image that works on a different site. But I see that in the code, this part - "images/diveshop.png" - is a link. Do I need to make it a link somehow to give it alt text?

<img src="images/diveshop.png" alt="picture of dive shop" width="480" height="326" />

Thanks for your help!
 
Reply With Quote
  #4 (permalink)  
Old 01-21-2010, 07:11 PM
HTMLBasicTutor's Avatar
Administrator
 
Join Date: 10-29-07
Location: British Columbia, Canada
Posts: 20,794
iTrader: 5 / 100%
Quote:
Originally Posted by hof View Post
Thanks for the quick reply!

Here is the actual code:

<img src="images/flash_images/orange_tanks.png" alt="scuba diving rentals" width="64" height="89" hspace="10" vspace="10" align="right">
It appears from your second example the page is coded using XHTML, not HTML. What you have here is for old HTML.

What happens if you change the coding to this?
HTML Code:
<img src="images/flash_images/orange_tanks.png" alt="scuba diving rentals" width="64" height="89" />
The hspace and vspace are not valid attributes for an image anymore.
__________________

HTML Basic Tutor - Learn how to code for better SEO
Basic Computer Information - Computer & internet basics for website owners

SEO troubleshooting and review services available. - Pm me.
 
Reply With Quote
  #5 (permalink)  
Old 01-21-2010, 08:35 PM
Hades's Avatar
Senior Web Developer
Latest Blog:
None

 
Join Date: 01-23-07
Location: Argentina
Posts: 2,273
iTrader: 0 / 0%
Quote:
Originally Posted by hof View Post
Thanks for the quick reply!

Here is the actual code:

<img src="http://www.v7n.com/forums/images/flash_images/orange_tanks.png" alt="scuba diving rentals" width="64" height="89" hspace="10" vspace="10" align="right">

When I mouse over it, shouldn't I see 'scuba diving rentals'? The only difference I could see between this and another image was the .jpg extension which was why I thought that was the problem. I hope this makes it clearer?

Here's an example of an image that works on a different site. But I see that in the code, this part - "http://www.v7n.com/forums/images/diveshop.png" - is a link. Do I need to make it a link somehow to give it alt text?

<img src="http://www.v7n.com/forums/images/diveshop.png" alt="picture of dive shop" width="480" height="326" />

Thanks for your help!
The fact that an image has an "alt" attribute does not mean that it should display a floating tooltip when you mouse-over it. That is only a built in feature of some browsers. The alt attribute ensures that the image will have a default text to be used on its placeholder if: 1-the image is missing,2-the image can't be loaded due to connection problems, 3-the image is being crawled by a search engine.

That said, there is no SEO consequence of having a .png or .jpg image as long as the <img> tag is crawl-able: it is visible, not restricted by robots, etc...

The attribute that displays a tooltip when doing mouse-over on an image is the "title" attribute, and can be set on images and anchor tags as well.
__________________
Cristian Espinoza ~ Sr. Web Developer
Currently available for Freelance Web Development

(+54 9) 1155 601 661
Skype: espinoza.cristian
 
Reply With Quote
  #6 (permalink)  
Old 01-24-2010, 07:35 AM
FGTH's Avatar
Contributing Member
Latest Blog:
None

 
Join Date: 03-06-04
Posts: 612
iTrader: 0 / 0%
I avoid using png because of transparency issues in some browsers.
 
Reply With Quote
  #7 (permalink)  
Old 01-24-2010, 05:08 PM
HTMLBasicTutor's Avatar
Administrator
 
Join Date: 10-29-07
Location: British Columbia, Canada
Posts: 20,794
iTrader: 5 / 100%
Quote:
Originally Posted by seo101 View Post
Thanks for this tips.. I've been using png because the image is more clearer than jpg... I dont know how it affect seo though
It doesn't affect SEO directly. Transparent .png images cause a problem for some versions of IE. i.e. your IE visitors. So as far as getting referral backlinks from visitors, yes it could affect your backlinks if you use transparent .png images and have a lot of IE visitors.

You can use .png images that are not transparent with no problem and as you pointed out, some images are clearer for your visitors when saved as a .png image.
__________________

HTML Basic Tutor - Learn how to code for better SEO
Basic Computer Information - Computer & internet basics for website owners

SEO troubleshooting and review services available. - Pm me.
 
Reply With Quote
  #8 (permalink)  
Old 01-25-2010, 09:50 AM
ArtphotoasiA's Avatar
Contributing Member
Latest Blog:
None

 
Join Date: 12-07-09
Location: Italy
Posts: 228
iTrader: 0 / 0%
IE6 and lower will not work and support correctly the .png be carefull!

beside that i use both.... alt="abc" and title="abc" one is really the alt tag that is usefull for SEO the other one is a tool that help to show with every browser (not only IE) the title of the images using mause over the image.

Have nice coding...
__________________
More by Corrado Prever... visit www.corradoprever.com
Porfolio... visit www.500px.com
 
Reply With Quote
  #9 (permalink)  
Old 01-30-2010, 06:03 PM
mr.joebert's Avatar
Contributing Member
 
Join Date: 04-07-08
Location: Clearwater, FL USA
Posts: 119
iTrader: 0 / 0%
The only difference it will make is load time. PNG images tend to be of better quality which uses more space for storing image data so they have larger filesizes than JPG images.

If a search engine is using load time as a ranking metric, JPG will be better for photographs and whatnot, but it's not going to matter for things like navigation icons and things of that nature since they're small and tend to use roughly the same filesize to be represented by either format.
 
Reply With Quote
Go Back   Webmaster Forum > Web Development > Coding Forum

Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off



V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 06:40 AM.
Powered by vBulletin
Copyright 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2014 Escalate Media




Search Engine Optimization by vBSEO 3.6.0 RC 2 ©2011, Crawlability, Inc.