@appstractdk/as-progressive-image

Package for a progressive loading of an image

Usage no npm install needed!

<script type="module">
  import appstractdkAsProgressiveImage from 'https://cdn.skypack.dev/@appstractdk/as-progressive-image';
</script>

README

as-progressive-image

Component for loading images progressively.

Usage

The following HTML is needed for the progressive loading to work:

<div class="progressive-image-container" data-srcset="" data-sizes="" data-full-resolution-image="">
    <img src="" class="preview" alt="image" />
</div>

<img> sourse should contain a link to a small preview image(e.g. 20px width highly-compressed jpeg). The actual full-resolution image source should be defined under data-full-resolution-image attribute. IMPORTANT: all of the images have to have an exact same aspect ratio.

*You are also welcome to use HTML5 image srcset and sizes attributes.