SEO - Index images (lazyload)

Question

Note:My question is not about Javascript.

I'm developing a plugin for jQuery/Mootols/Prototype, that work with DOM.

This plugin will be to improve page performance (better user experience).

The plugin will be distributed to other developers so that they can use in their projects.

How does the lazyload: The images are only loaded when you scroll down the page

(will look like this: http://www.appelsiini.net/projects/lazyload/enabled_timeout.html LazyLoad).

But he does not need HTML5, I refer to this attribute: data-src="image.jpg"

Two good examples of website use LazyLoad are: youtube.com (suggested videos) and facebook.com (photo gallery).

I believe that the best alternative would be to use:

<A href="image.jpg">Content for ALT=""</a>

and convert using javascript, for this:

<IMG alt="Content for ALT=\"\"" src="image.jpg">

Then you question me: Why do you want to do that anyway?

I'll tell you: Because HTML5 is not supported by any browser (especially mobile)

And the attribute data-src="image.jpg" not work at all Indexers.

I need a piece of HTML code to be fully accessible to search engines. Otherwise the plugin will not be something good for other developers.

I thought about doing so to help in indexing:

<noscript><img src="teste.jpg"></noscript>

But noscript has negative effect on the index (I refer to the contents of noscript)

I want a plugin that will not obstruct the image indexing in search engines.

This plugin will be used by other developers (and me too).

This is my question: How to make a HTML images accessible to search engines, which can minimize the requests?

Answer 1

HTML5 data attributes exist purely for per-author, ad hoc extension purposes. So they will never be "supported" in any particular way other than to be ignored by browsers and useful for scripts or meta-data.

Suggestion #1

<a href="image.jpg"><img src="data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Info"></a>

Here you are not relying on src to direct the search engine to the image. You are relying on href. This has nothing to do with JavaScript or HTML 5. It's old fashioned HTML that sets the stage for JavaScript enhancement.

The only difference between this and your own first example is that I have used an img tag inside the a rather than text. This provides a better perceptual loading experience IMO, YMMV.

Suggestion #2

You might also check out some of the recent solutions for re responsive images for responsive design and retina displays. Check out http://24ways.org/2011/adaptive-images-for-responsive-designs-again/ for some thoughts in that direction?

Suggestion #3

Another alternative is: some lazyload scripts remove/replace the src onReady/onLoad, then put it back as the user scrolls. I haven't had as much luck with this, because the requests usually fire before the JS kicks in. But it is an option.

So your HTML source delivers, simply

<img src="image.jpg" alt="Info">

This has nothing to do with JavaScript or HTML5 and is index-able. Again, this sets the stage for later JavaScript enhancement. Your JS onReady or onLoad transforms this into

<img src="data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="image.jpg">

(If you are very paranoid, you might wrap this in <a href="image.jpg"></a> so that it is still index-able after manipulation.) This prevents the images from loading before you are ready. Then, as you scroll, the JavaScript can then transform the code back into:

<img src="image.jpg" alt="Info">

When it's time for the image to load. Which, again, is still index-able.

Edit Because it's somewhat relevant, I'd like to share http://www.iwdn.net/showthread.php?t=5914 as a most reliable resource about indexing. Unfortunately, it's several years old at this point and the experiment hasn't been repeated.