15

For images loaded via AJAX, or that I don't want indexed, use the data-* attribute approach:

<img data-src="path/to/image.jpg" class="js-lazy-load" />

The javascript maps the data-src attribute to the src attribute:

<img src="path/to/image.jpg" />

But for images in the HTML that I do want indexed:

<a href="path/to/image.jpg" class="js-lazy-load">Image alt text here</a>

The javascript replaces the anchor with an image tag:

<img src="path/to/image.jpg" alt="Image alt text here" />

Seems that would preserve index-ability and the intent of the page (for accessibility) without affecting SEO (hopefully). But would love a second opinion.

Edit: Any feedback on how this approach - page with links to images versus page with inline IMG tags - would compare in regards to page rank. I'm guessing the inline IMG tags would fare better since each outgoing link would detract from the overall page rank (unless they had rel="nofollow" which would be counter productive).

Aeron
  • 153
  • 1
  • 6

2 Answers2

10

That's a good approach. Another approach you could take is to use the <noscript /> element to store the normal version of the img tag, which would be indexed by Google, and use JS to create the lazy loading version.

Alternatively, you could use Google's hashbang AJAX conventions combined with HTML5's history API to make bookmark- and index-able page states. This is especially preferable if you're doing some kind of infinite scroll page, as it provides a form of pseudo-pagination—something which most infinite scroll implementations desperately need (::cough:: Google Images ::cough::).

Edit: Using links as placeholders for the images could cause the PR flow from the page to be divided amongst more links, though PR is always conserved unless you use nofollow so in theory this would increase the PR of those images for image searches.

If you don't want that, or you want the page to degrade gracefully for non-JS users, you could go the opposite route and start with regular images but using blocking JS to substitute the src attribute of the images at page load (or even just delete the image elements and store the src attributes in your lazy loading queue). If you do it correctly, you can get this done before any of the images actually begin downloading.

Lèse majesté
  • 15,356
  • 39
  • 49
2

I have seen images loaded with this pattern:

<img data-src="path/to/image.jpg" class="js-lazy-load" />

get picked up by Google and Google Image Search and others have spotted it too. Since Google now executes javascript on your page, there may be no need to put the actual image into the src attribute. Neglecting a src attribute might lead to a grey border around your image, so probably best to go with something like:

<img src="placeholder.gif" data-src="path/to/image.jpg" class="js-lazy-load" alt="Image alt text here" />

Nb. this doesn't necessarily apply to other search engines.

Willster
  • 123
  • 5