Enable Lazy loading in Image Component

Here are the steps to get the lazy loading of the images working :-

1. Generic step :-

a. Load core.wcm.components.image.v2 clientLib on the template/embed this category in any of the clientlibs loaded on the page:
 


2. For exisitng component:-

a. As Image (/apps/some-project/components/content/image) is a wrapper component, set component policy with below shown fields configured

3. For other components with image :-

a. Have sling:resourceSuperType  set to some-project/components/content/image

b. Hide the dialog fields pulled from the OOTB image component(if needed)  by setting sling:hideResource = true  on /cq:dialog/content/items/tabs node

c. Ensure that the image is saved with property name :-  fileReference  (name = ./fileReference)

d. Set the policy as per #2.a

e. Render the component with some-project/components/content/image in the markup as below :-
<sly data-sly-resource="${resource.path @ appendPath='', resourceType='some-project/components/content/image'}"></sly>
This will make the image render with the markup of the OOTB image component.

Once above changes are made, image will start loading lazily.