add lazy loading images to index.html

index.html

@@ -365,14 +365,14 @@ <h3>Standalone</h3>
           It will not be stretched or distorted, but will be displayed at its
           natural size; as long as enough space is available:
         </p>
-        <img src="https://picsum.photos/640/480?grayscale&random=1" alt="an example, depicting a random subject">
+        <img loading="lazy" src="https://picsum.photos/640/480?grayscale&random=1" alt="an example, depicting a random subject">
         <h3>In a Figure</h3>
         <p>
           Using a <code>&lt;figure&gt;</code> element, we can display the media
           element more prominently, and can also add a caption using a <code>&lt;figcaption&gt;</code> tag:
         </p>
         <figure>
-          <img src="https://picsum.photos/640/480?grayscale&random=2" alt="an example, depicting a random subject">
+          <img loading="lazy" src="https://picsum.photos/640/480?grayscale&random=2" alt="an example, depicting a random subject">
           <figcaption>This is the figure caption, is usually provides context.</figcaption>
         </figure>
       </section>