Add lazy load markup to DCE image

Instead of:

<f:image src="uploads/pics/{field.sideBannerImage}" alt="" maxWidth="267" />

Define as:

<img class="lazy" data-src="{f:uri.image(src:'uploads/pics/{field.sideBannerImage}', maxWidth:'267')}" />

And when using inside foreach loop:

<f:image src="{fileReference.uid}" alt="" treatIdAsReference="1" maxWidth="{field.imageMaxWidth}" maxHeight="{field.imageMaxHeight}" />

Change to:

<img class="lazy" data-src="<f:uri.image image="{fileReference.uid}" maxWidth="{field.imageMaxWidth}" maxHeight="{field.imageMaxHeight}" />" />