: SEO - Index images (lazyload) 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

@Dunderdale272

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 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 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.

Vote Up Vote Down