Progressive Image Loading

To know about basics of progressive image, what it is and why it’s used. You may go through this documentation

Progressive image Implementaion

Wherever the Gumlet config is set, modify the Gumlet config by adding srcset: true. This will enable the srcset and the image will be rendered from one among the srcsets generated by Gumlet.

<script type="text/javascript">
  window.GUMLET_CONFIG = {
    ...
    ...
    srcset: true,
  };
</script>

Then, wherever an image tag is used:

• Load the low-resolution image while initial load :

  <img
    srcset="imgurl?blur=10 1024w, imgurl?blur=10 640w, imgurl?blur=10 480w"
    sizes="10vw"
  />
  

• And For the subsequent load of the high resolution image:

  <img
    srcset="imgurl?blur=0 1024w, imgurl?blur=0 640w, imgurl?blur=0 480w"
    sizes="25vw"
  />
  

The size and the blur value can be varied based on your preference.