title: Lazy-loading images via JS with <noscript> fallback
body: <p>I'm using a jQuery slider to display a series of images and none of them are showing in a Google image search, even though we rank at the top of normal search results for the relevant keyword. My suspicion is that Google is not indexing the images because they're being (lazy-)loaded into the slider with JavaScript via the <code>data-image</code> attribute. It is critical for performance purposes that I lazy-load the images and not use a set of standard <code>&lt;img&gt;</code> tags instead, so I'm trying to figure out the best way to serve the assets in a way that's more easily indexed by search engines. I'm considering using the <code>&lt;noscript&gt;</code> tag within the slide markup as follows:</p>
  
  <pre><code>&lt;li class="slide" data-image="img/image.jpg"&gt;
      &lt;div class="caption"&gt;IMAGE INFO&lt;/div&gt;
      &lt;noscript&gt;&lt;img src="img/image.jpg" alt="Image info" width="x" height="x"&gt;&lt;/noscript&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>I'm curious if there are any potential issues with this approach, or if something entirely different would be preferable? Will search engines still consider this markup relevant with respect to SEO if it's contained within <code>&lt;noscript&gt;</code> tags?</p>
  
  <p>Thanks for any insight here.</p>