<link href="//unpkg.com/progressive-image@1.2.0/dist/index.css" rel="stylesheet" type="text/css">

<div id="app">
  <figure class="progressive">
    <img class="preview lazy" data-src="https://www.ameamelog.com/wp/wp-content/uploads/2019/10/progressive-image_01.jpg" src="https://www.ameamelog.com/wp/wp-content/uploads/2019/10/progressive-image_01_thumb.jpg" alt="">
  </figure>
  
  <figure class="progressive">
    <img class="preview lazy" data-src="https://www.ameamelog.com/wp/wp-content/uploads/2019/10/progressive-image_02.jpg" src="https://www.ameamelog.com/wp/wp-content/uploads/2019/10/progressive-image_02_thumb.jpg" alt="">
  </figure>
  
  <figure class="progressive">
    <img class="preview lazy" data-src="https://www.ameamelog.com/wp/wp-content/uploads/2019/10/progressive-image_03.jpg" src="https://www.ameamelog.com/wp/wp-content/uploads/2019/10/progressive-image_03_thumb.jpg" alt="">
  </figure>
</div>

<script src="//unpkg.com/progressive-image/dist/index.js"></script>
<script>
(function(){
  new Progressive({
    el: '#app',
    lazyClass: 'lazy'
  }).fire()
})()
</script>

body {
  min-height: 100vh;
  margin: 0;
  padding: 10vh 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
figure {
  width: 400px;
  height: 250px;
}
figure:not(:last-of-type) {
  margin-bottom: 50vh;
}
img {
  vertical-align: middle;
}