title: Using lazy loading AND webp images with JPG fallback
body: <p>I am currently lazy loading 'jpg' images using the <a href="https://luis-almeida.github.io/unveil/" rel="nofollow noreferrer">unveil.js</a> script and it works fine.</p>
  <p>I simply serve a placeholder image and eventually the image path is populated by the path in a data attribute. Here is my HTML...</p>
  <pre><code>&lt;img class=&quot;unveil&quot; src=&quot;blank.png&quot; alt=&quot;Variation 2&quot; data-src=&quot;variant2.jpg&quot;&gt;
  </code></pre>
  <p>and I call the function...</p>
  <pre><code>$(&quot;.unveil&quot;).unveil();
  </code></pre>
  <p>Now the problem is, I would like to add WebP images to my website but with a jpg fallback as WebP isn't supported in previous versions of Safari.</p>
  <p>Ideally I would use this markup...</p>
  <pre><code>&lt;picture&gt;
      &lt;source srcset=&quot;variant2.webp&quot; type=&quot;image/webp&quot;&gt;
      &lt;img class=&quot;unveil&quot; src=&quot;blank.png&quot; alt=&quot;Variation 2&quot; data-src=&quot;variant2.jpg&quot;&gt;
  &lt;/picture&gt;
  </code></pre>
  <p><strong>Questions</strong></p>
  <ol>
  <li><p>How would I modify the code to swap both the jpg source AND the WebP source? Is it possible to do this AND still use lazy loading?</p>
  </li>
  <li><p>Would be easier to detect webp support upfront?</p>
  </li>
  <li><p>Should I just not use lazy loading on webp images as they are small enough and continue using the script as is for jpgs incase webp isn't supported?</p>
  </li>
  </ol>
  <p>For reference, here is the code for the unveil.js script...</p>
  <pre><code>;(function($) {
  
    $.fn.unveil = function(threshold, callback) {
  
      var $w = $(window),
          th = threshold || 0,
          retina = window.devicePixelRatio &gt; 1,
          attrib = retina? &quot;data-src-retina&quot; : &quot;data-src&quot;,
          images = this,
          loaded;
  
      this.one(&quot;unveil&quot;, function() {
        var source = this.getAttribute(attrib);
        source = source || this.getAttribute(&quot;data-src&quot;);
        if (source) {
          this.setAttribute(&quot;src&quot;, source);
          if (typeof callback === &quot;function&quot;) callback.call(this);
        }
      });
  
      function unveil() {
        var inview = images.filter(function() {
          var $e = $(this);
          if ($e.is(&quot;:hidden&quot;)) return;
  
          var wt = $w.scrollTop(),
              wb = wt + $w.height(),
              et = $e.offset().top,
              eb = et + $e.height();
  
          return eb &gt;= wt - th &amp;&amp; et &lt;= wb + th;
        });
  
        loaded = inview.trigger(&quot;unveil&quot;);
        images = images.not(loaded);
      }
  
      $w.on(&quot;scroll.unveil resize.unveil lookup.unveil&quot;, unveil);
  
      unveil();
  
      return this;
  
    };
  
  })(window.jQuery || window.Zepto);
  </code></pre>