The latest articles on Forem by Raj rana (@missionraj). https://forem.com/missionraj https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F492697%2F23cec0aa-0c92-4d7e-b04a-acc82481f73a.jpeg https://forem.com/missionraj en Raj rana Mon, 12 Jun 2023 16:03:34 +0000 https://forem.com/missionraj/how-to-lazy-load-image-with-html-581h https://forem.com/missionraj/how-to-lazy-load-image-with-html-581h <p>there is loading attribute provided by <a href="" class="article-body-image-wrapper"><img></a> tag. </p> <p>which is used to load the offscreen images lazy<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>&lt;img src="image1.jpg" alt="image1" style="width:100%"&gt; &lt;img src="image2.jpg" alt="image2" style="width:100%"&gt; &lt;!-- off-screen images --&gt; &lt;img src="image3.jpg" alt="image3" style="width:100%" loading="lazy"&gt; &lt;img src="image4.jpg" alt="image4" style="width:100%" loading="lazy"&gt; &lt;img src="image5.jpg" alt="image5" style="width:100%" loading="lazy"&gt; </code></pre> </div> <p>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 </p> <p>note: there are also other options but this one is simple I didn't about it till today</p> webdev beginners html development