To know about basics of progressive image, what it is and why it’s used. You may go through this documentation
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.
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.