HTL Responsive Images w Lazy Loading for Adobe AEM. Utilizing the lazysizes lazyloading library.

HTL Responsive Images w Lazy Loading

// LazyLoad Library: https://github.com/aFarkas/lazysizes

// Usage
<sly data-sly-use.template="/path/to/template/image.html"
     data-sly-call="${ template.imageMarkup @ xsvp=image.xsvpPath, svp=image.svpPath, mvp=image.mvpPath, lvp=image.lvpPath, altText=image.altText, lazyLoad=true }" />
     
// HTL Template
<template data-sly-template.imageMarkup="${ @ xsvp, svp, mvp, lvp, altText, lazyLoad }">
    <picture>
        <source media="(max-width: 480px)" data-srcset="${xsvp}" />
        <source media="(max-width: 768px)" data-srcset="${svp}" />
        <source media="(max-width: 992px)" data-srcset="${mvp}" />
        <source media="(min-width: 1400px)" data-srcset="${lvp}" />
        <img data-sly-test.lazy="${lazyLoad}" class="lazyload" data-src="${lvp}" alt="${altText}" />
        <img data-sly-test="${!lazy}" src="${lvp}" alt="${altText}" />
  </picture>
  <noscript data-sly-test="${lazy}"><img src="${lvp}" alt="${altText}" /></noscript>
</template>