<script>
  window.lazySizesConfig = window.lazySizesConfig || {};
  window.lazySizesConfig.rias = window.lazySizesConfig.rias || {
    prefix:  'https://res.cloudinary.com/eitanpeer/image/fetch/q_auto,f_auto,w_{width}/',
    absUrl: true
  };
  
  //only for demo in production I would use normal expand option
  window.lazySizesConfig.expand = 9;
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/3.0.0/plugins/rias/ls.rias.min.js" async></script>
<script src="//cdn.jsdelivr.net/g/lazysizes(lazysizes.min.js)" async=""></script>

<div id="container" class="container">
</div>
*, :before, :after {
  box-sizing: border-box;
}

.container {
  img {
    width: 50%;
  }
}

.lazyloading {
  background: #f7f7f7 url(//afarkas.github.io/lazysizes/assets/imgs/loader.gif) no-repeat center;
  min-height: 60px;
}
View Compiled 
const imageSources = [
  'https://images.unsplash.com/photo-1493020258366-be3ead1b3027',
  'https://images.unsplash.com/photo-1492974886515-a4036e79e639',
  'https://images.unsplash.com/photo-1476901192299-9a86d0454988',
  'https://images.unsplash.com/photo-1493018245248-737b8728173f',
  'https://images.unsplash.com/photo-1492963892107-740cd39d9ff3',
  'https://images.unsplash.com/photo-1487001015975-73ae02e33d10',
  'https://images.unsplash.com/photo-1485426337939-af69cf101909',
  'https://images.unsplash.com/photo-1443381301867-5a36ffaafc42',
  'https://images.unsplash.com/photo-1464254654104-c690d2e93424'
]

imageSources.forEach(src => {
  const imgHtml = `
  <div class="img-wrapper"> 
    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="${src}" data-sizes="auto" class="lazyload">
  </div>`;
  document.getElementById("container").innerHTML += imgHtml;
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.