ui: add Lazy loading for images>1MB (#14448)

inital loading of hompage was loading around 9MB of resources.
By lazy loading images we can reduce the intial loading by 5-6 MB.

templates/base_index.html

@@ -46,6 +46,7 @@ <h2 id="test-takeover-subtitle">Understanding real-time systems, their use cases
               src="https://assets.ubuntu.com/v1/fb1ea84e-Kernelt%[email protected]"
               width="508"
               height="364"
+              loading="lazy"
               alt="" />
         </div>
       </div>
@@ -70,7 +71,7 @@ <h1 id="takeover-title" class="u-no-margin--bottom">Ubuntu 24.04 LTS Noble Numba
           </div>
         </div>
         <div class="col-6 u-vertically-center u-align--center u-hide--medium u-hide--small">
-          <img id="takeover-image" src="https://assets.ubuntu.com/v1/d9fc87f3-Numbat.svg" width="300" alt="" />
+          <img id="takeover-image" src="https://assets.ubuntu.com/v1/d9fc87f3-Numbat.svg" width="300" alt="" loading="lazy" />
         </div>
       </div>
     </section>
@@ -749,7 +750,7 @@ <h2 class="p-heading--1 u-no-margin--bottom">Ultra secure things</h2>
     <section class="p-section ">
       <div class="u-fixed-width ">
         <div class="u-align--center u-vertically-center u-no-padding--bottom p-image-container--cinematic">
-          <img src="https://assets.ubuntu.com/v1/bb296524-Dell%20pcs.jpg" alt="" />
+          <img src="https://assets.ubuntu.com/v1/bb296524-Dell%20pcs.jpg" alt="" loading="lazy"/>
         </div>
         <hr class="p-rule" />
         <div class="p-section--shallow">
@@ -856,6 +857,7 @@ <h2 class="p-heading--1 u-no-margin--bottom">Workstations and desktops</h2>
       <div class="u-fixed-width">
         <div class="p-image-container--cinematic">
           <img src="https://assets.ubuntu.com/v1/39667d98-Open%20source%20security.jpg"
+              loading="lazy"
                alt="" />
         </div>
         <hr class="p-rule" />
@@ -962,6 +964,7 @@ <h2 class="p-heading--1 u-no-margin--bottom">Data centre automation</h2>
       <div class="u-fixed-width">
         <div class="p-image-container--cinematic">
           <img src="https://assets.ubuntu.com/v1/465d1258-Smart%20robots%20of%20all%20shapes%20and%20sizes.jpg"
+               loading="lazy"
                alt="" />
         </div>
         <hr class="p-rule" />
@@ -1053,7 +1056,9 @@ <h2 class="p-heading--1 u-no-margin--bottom">Smart robots of all shapes and size
         <div class="u-vertically-center u-align--center p-image-container--cinematic"
              style="background: rgba(0, 0, 0, 0.15)">
           <img src="https://assets.ubuntu.com/v1/6d657910-Multi-cloud%20Applications%C2%A0%C2%A0Beyond%20PAAS.png"
-               alt="" />
+               alt=""
+               loading="lazy" 
+               />
         </div>
         <hr class="p-rule" />
         <div class="p-section--shallow">