quartz-progressive-image-loading.html

<figure class="progressive-image featured-image size-extra-large">
  <!-- a picture element with intrinsic ratio -->
  <picture style="padding-bottom: 56.1875%; background-image: url(https://qzprod.files.wordpress.com/2017/01/fish.jpg?quality=80&strip=all&w=50);">
    <!-- the small image that will be blurred -->
    <img src="https://qzprod.files.wordpress.com/2017/01/fish.jpg?quality=80&strip=all&w=50" class="progressive-image-thumbnail">
    <!-- a lazy responsive image with data-srcset -->
    <img
      itemprop="image"
      data-srcset="https://qzprod.files.wordpress.com/2017/01/fish.jpg?quality=80&strip=all&w=320 320w, https://qzprod.files.wordpress.com/2017/01/fish.jpg?quality=80&strip=all&w=640 640w, https://qzprod.files.wordpress.com/2017/01/fish.jpg?quality=80&strip=all&w=940 940w, https://qzprod.files.wordpress.com/2017/01/fish.jpg?quality=80&strip=all&w=1600 1600w, https://qzprod.files.wordpress.com/2017/01/fish.jpg?quality=80&strip=all&w=3200 3200w"
      data-src="https://qzprod.files.wordpress.com/2017/01/fish.jpg?quality=80&strip=all&w=320"
      class="progressive-image-large" alt="INDIA-fishermen"/>
    <!-- a noscript fallback -->
    <noscript>
      <img
        src="https://qzprod.files.wordpress.com/2017/01/fish.jpg?quality=80&strip=all&w=320"
        alt="INDIA-fishermen">
    </noscript>
  </picture>
  <figcaption>...</figcaption>
</figure>