Progressive Image Rendering

The progressive image rendering works something like this:

The working demo of the progressive image rendering can be found here

It can be implemented using the following code

import Image from "[filepath]?sizes=100w+200w+400w+800w&placeholder";
import Picture from "../../../core/components/picture/picture";
  
//include this wherever you want a progressive image rendering
<Picture
  pictureClassName="d-inline-block w-100 my-4"
  image={Image}
  alt="Image"
  imgClassName="w-100"
/>

PropName	Type	Description
pictureClassName	string	This will add class to the Picture component
imgClassName	string	This will add class to the <img /> tag.
alt	string	It will add alt text to the <img /> tag.
image	object	It takes the image object and adjusts the image from the srcSet generated.