<link href="//unpkg.com/[email protected]/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;
}