title: jquery lazyload images and webp with fallback
body: <p>I am a bit confused how to use the picture fallback solution in combination with jquery lazyload. I use this library: </p>
  
  <pre><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>At the moment my images are integrated like this:</p>
  
  <pre><code>&lt;img class="center lazy" data-original="./bilder/uebersetzung-marketing-bwl.png" width="593&gt;
  </code></pre>
  
  <p>But webp fallback solution is structured like this:</p>
  
  <pre><code>&lt;picture&gt;
        &lt;source class="center lazy" srcset="./bilder/Uebersetzungsdienst-Jena-BM-Translations.webp" type="image/webp"&gt;
        &lt;img class="center lazy" src="./bilder/Uebersetzungsdienst-Jena-BM-Translations.png" width="1920" height="97" alt="Uebersetzungsdienst-Jena-BM-Translations"&gt;
  &lt;/picture&gt;
  </code></pre>
  
  <p><strong>My question:</strong>
  the integrated lazyload looks for <code>data-original</code> so it does not work with srcset. Is there a solution for that?</p>
  
  <p>If possible I would prefer to do not use another library but "simply" add some code.</p>