How to lazy load image with html

there is loading attribute provided by tag.

which is used to load the offscreen images lazy

<img src="image1.jpg" alt="image1" style="width:100%">
<img src="image2.jpg" alt="image2" style="width:100%">

<!-- off-screen images -->
<img src="image3.jpg" alt="image3" style="width:100%" loading="lazy">
<img src="image4.jpg" alt="image4" style="width:100%" loading="lazy">
<img src="image5.jpg" alt="image5" style="width:100%" loading="lazy">

you should only add loading lazy to images which are not immediately available to screen means user will later on scroll the image will be visible

note: there are also other options but this one is simple I didn't about it till today