Best way to open a thumbnail picture

[zaneta]

I have a webpage with thumbnail pictures of my products. When somebody clicks on a thumbnail picture i would like this picture to open to a larger one. Do you think i should link it to a .jpeg file or to a brand new html page containing just the picture and unique meta data.

In other words which of the two following is the best way to do it:

(1) <a href="http://www.example.com/widget1/widget1.jpg">

(2) <a href="http://www.example.com/widget1/widget1.htm">

Remember that in the latter case the htm page will only contain a picture, nothing more, except for unique meta data(title, keywords, description)

Thank you!

[edited by: tedster at 9:26 pm (utc) on Nov. 28, 2007]
[edit reason] switch to example.com - it will never be owned [/edit]

[thecoalman]

I'm not a big fan of pop-ups but for images they are ideal. Do search for lytebox, that's about as slick as it gets.

For people that have JS disabled the link will open normally so I'd go with the page if you can manage it.

[zaneta]

Thank you coalman

I was not planning to use javascript in any case.

The first <a>, links to a simple .jpg file, that opens inside the web browser (it is not an html page). The second <a>, links to an html page containing a jpeg photo. Which of the two do you believe is the best way for the search engine spiders to crawl?

[thecoalman]

Well the second of course, having said that I've seen some of my full size image files linked to correctly in google image search instead of the thumbnail.

[rocknbil]

Do not eliminate Javascript in this scenario - this is one of the really good applications for it. All you need to do is build the JS so it will work whether or not it's enabled.

To answer the question, it really depends on whether you need "extra data" with the image, which it sounds like you do (title tag, description, etc.) If you want to caption or add a head to the picture, use HTML. If not, just the image.

The "short story" on how to use JS and keep it accessible: you create a link, and in any function that opens your new window, you return false. This is what prevents the link from moving the page to the href URL. If javascript is disabled, it ignores the entire command and uses the link.

<a href="image_page.html" onClick="return newWin('image_page.html',400,600);" target="new window">Enlarge</a>

The function "newWin" returns false. Note the last two parameters, width and height - one of the things about JS is you can specify a window width and height when opening a new window, allowing you to customize it to your image size.

[zaneta]

Thank you rocknbil for your reply.

I am probably going to enlarge them as new unique .htm pages, in order to increase the number of my site 's pages.

On the other hand i have noticed that pictures that open as just .jpg files(without any title, description etc - not htm)rank good in google image search.

What is your opinion?

[rocknbil]

Mmm, this is an SEO question I think, but the little bit of Google Image searching I've done I've gathered the images get into Google by 1) keywords in the file name, 2) keywords in the ALT attribute of the image, and 3) keywords surrounding the image on that page, such as captions or companion text.

[thecoalman]

I am probably going to enlarge them as new unique .htm pages, in order to increase the number of my site 's pages.

Using either lytebox or the simpler method posted by rocknbill will do just that. The addition of the JS is just a nice little bonus for those that have JS enbaled, it provides for easier navigation. For seach engines or people with JS disabled they get the normal page because they still have a regular href link to follow.

[ZydoSEO]

If the new HTML page containing the enlarged image contains ONLY an image, I'd suggest you NOINDEX the page (and NOFOLLOW the link to that new enlargement page) since there will be no other content on the page for indexing purposes. So many people allow pages like this to get indexed and then when someone clicks on the link in the SERPs, their taken to a page that displays and image but has no text on it and frequently no links to get back to the rest of the site. It's a bad consumer experience.

So if you want this page to be indexed, I'd add product description text and other content as well as breadcrumbing or other navigations that will allow the user to know where they are in the site and to give them navigation to allow them to get back to the other parts of the site.

[ChrisBolton]

Rocknbil, one possible problem here:

<a href="image_page.html" onClick="return newWin('image_page.html',400,600);" target="new window">Enlarge</a>

Am I not right in thinking that the target attribute will not work in XHTML strict?

[epcer]

Thank you coalman