title: How to do lazy loading image with srcset?
body: <p>I'm using <a href="http://kenwheeler.github.io/slick/" rel="noreferrer">slick.js</a> to build a carousel. However, even though I change the attribute from <code>src</code> to <code>data-lazy</code> the images still get loaded before I scroll to that image. I suspect that it's because I have <code>srcset</code> tag in in my image. My question is how to prevent browser to load responsive image or how to do lazy-loading for responsive images properly.</p>
  
  <p>This is the sample of my img tag</p>
  
  <pre><code>&lt;img data-lazy="better_me.jpg" srcset="better_me.jpg 400w, better_me.jpg 200w" class="avatar photo avatar-200" alt="better_me" width="200" height="200" sizes="(min-device-resolution: 1.6) 400px, 200px"&gt;
  </code></pre>