added lazy-load in homepage images

Author: shivamgupta2020

overrides/home.html

@@ -59,7 +59,7 @@ <h1>Why serverless containers?</h1>
             <div class="reason-img">
               <img src="images/home-images/blue_simple_abstractions_icon.svg"
                 onmouseover="this.src='images/home-images/dkblue_simple_abstractions_icon.svg'"
-                onmouseout="this.src='images/home-images/blue_simple_abstractions_icon.svg'" alt="" draggable="false">
+                onmouseout="this.src='images/home-images/blue_simple_abstractions_icon.svg'" alt="" draggable="false" loading="lazy">
             </div>
             <div class="reason-text">
               <h2>Simpler Abstractions</h2>
@@ -72,7 +72,7 @@ <h2>Simpler Abstractions</h2>
             <div class="reason-img">
               <img src="images/home-images/blue_autoscaling_icon.svg"
                 onmouseover="this.src='images/home-images/dkblue_autoscaling_icon.svg'"
-                onmouseout="this.src='images/home-images/blue_autoscaling_icon.svg'" alt="" draggable="false">
+                onmouseout="this.src='images/home-images/blue_autoscaling_icon.svg'" alt="" draggable="false" loading="lazy">
             </div>
             <div class="reason-text">
               <h2>Autoscaling</h2>
@@ -85,7 +85,7 @@ <h2>Autoscaling</h2>
             <div class="reason-img">
               <img src="images/home-images/blue_progressive_rollouts_icon.svg"
                 onmouseover="this.src='images/home-images/dkblue_progressive_rollouts_icon.svg'"
-                onmouseout="this.src='images/home-images/blue_progressive_rollouts_icon.svg'" alt="" draggable="false">
+                onmouseout="this.src='images/home-images/blue_progressive_rollouts_icon.svg'" alt="" draggable="false" loading="lazy">
             </div>
             <div class="reason-text">
               <h2>Progressive Rollouts</h2>
@@ -100,7 +100,7 @@ <h2>Progressive Rollouts</h2>
             <div class="reason-img">
               <img src="images/home-images/blue_event_intergrations_icon.svg"
                 onmouseover="this.src='images/home-images/dkblue_event_intergrations_icon.svg'"
-                onmouseout="this.src='images/home-images/blue_event_intergrations_icon.svg'" alt="" draggable="false">
+                onmouseout="this.src='images/home-images/blue_event_intergrations_icon.svg'" alt="" draggable="false" loading="lazy">
             </div>
             <div class="reason-text">
               <h2>Event Integrations</h2>
@@ -113,7 +113,7 @@ <h2>Event Integrations</h2>
             <div class="reason-img">
               <img src="images/home-images/blue_handle_events_icon.svg"
                 onmouseover="this.src='images/home-images/dkblue_handle_events_icon.svg'"
-                onmouseout="this.src='images/home-images/blue_handle_events_icon.svg'" alt="" draggable="false">
+                onmouseout="this.src='images/home-images/blue_handle_events_icon.svg'" alt="" draggable="false" loading="lazy">
             </div>
             <div class="reason-text">
               <h2>Handle Events</h2>
@@ -126,7 +126,7 @@ <h2>Handle Events</h2>
             <div class="reason-img">
               <img src="images/home-images/blue_plugable_icon.svg"
                 onmouseover="this.src='images/home-images/dkblue_plugable_icon.svg'"
-                onmouseout="this.src='images/home-images/blue_plugable_icon.svg'" alt="" draggable="false">
+                onmouseout="this.src='images/home-images/blue_plugable_icon.svg'" alt="" draggable="false" loading="lazy">
             </div>
             <div class="reason-text">
               <h2>Plugable</h2>
@@ -148,7 +148,7 @@ <h1>Knative Components</h1>
         Eventing work together to automate and manage tasks and applications.
       </p>
       <div class="components-content">
-        <img class="components-img" src="images/home-images/knative_flowchart_graphic.svg" alt="" draggable="false" />
+        <img class="components-img" src="images/home-images/knative_flowchart_graphic.svg" alt="" draggable="false" loading="lazy" />
         <div class="text-table">
           <p class="normal-text">
             Run serverless containers in Kubernetes with ease. Knative takes care of the details of networking,
@@ -171,7 +171,7 @@ <h1>Trying it all together</h1>
         <div class="img-row">
           <div class="img-col">
             <div class="reason-img">
-              <img src="images/home-images/dev_focus_code_icon.svg" alt="" draggable="false">
+              <img src="images/home-images/dev_focus_code_icon.svg" alt="" draggable="false" loading="lazy">
             </div>
             <div class="reason-text">
               <h2>Developers focus on code</h2>
@@ -184,7 +184,7 @@ <h2>Developers focus on code</h2>
 
           <div class="img-col">
             <div class="reason-img">
-              <img src="images/home-images/dkblue_scale_icon.svg" alt="" draggable="false">
+              <img src="images/home-images/dkblue_scale_icon.svg" alt="" draggable="false" loading="lazy">
             </div>
             <div class="reason-text">
               <h2>Scale up and down</h2>
@@ -197,7 +197,7 @@ <h2>Scale up and down</h2>
 
           <div class="img-col">
             <div class="reason-img">
-              <img src="images/home-images/cloud_agnostic_icon.svg" alt="" draggable="false">
+              <img src="images/home-images/cloud_agnostic_icon.svg" alt="" draggable="false" loading="lazy" >
             </div>
             <div class="reason-text">
               <h2>Cloud agnostic</h2>
@@ -224,7 +224,7 @@ <h1>
         <div class="col">
           <a href="{{ 'about/case-studies/sva/' | url }}">
             <div class="logo">
-              <img class="sva" src="images/case-studies/sva.png" alt="" draggable="false" />
+              <img class="sva" src="images/case-studies/sva.png" alt="" draggable="false" loading="lazy" />
             </div>
             <hr>
             <p class="normal-text">
@@ -236,7 +236,7 @@ <h1>
         <div class="col">
           <a href="{{ 'about/case-studies/ibm/' | url }}">
             <div class="logo">
-              <img class="ibm" src="images/case-studies/ibm.png" alt="IBM logo" draggable="false" width="75" />
+              <img class="ibm" src="images/case-studies/ibm.png" alt="IBM logo" draggable="false" width="75" loading="lazy" />
             </div>
             <hr>
             <p class="normal-text">
@@ -248,7 +248,7 @@ <h1>
         <div class="col">
           <a href="{{ 'about/case-studies/pnc/' | url }}">
             <div class="logo">
-              <img class="pnc" src="images/case-studies/pnc_bank.png" alt="" draggable="false" />
+              <img class="pnc" src="images/case-studies/pnc_bank.png" alt="" draggable="false" loading="lazy" />
             </div>
             <hr>
             <p class="normal-text">
@@ -263,7 +263,7 @@ <h1>
 
   <section class="cncf-notice-container">
     <h3>Knative is a <a href="https://www.cncf.io/">Cloud Native Computing Foundation</a> incubation project</h3>
-    <img class="cncf-logo" src="images/home-images/cncf-color.png" alt="" draggable="false" />
+    <img class="cncf-logo" src="images/home-images/cncf-color.png" alt="" draggable="false" loading="lazy" />
   </section>
 
   <section class="whats-next-container">
@@ -370,6 +370,7 @@ <h2>Follow us</h2>
         adopterImg.src = adopter.logoPath;
         adopterImg.alt = "Adopters";
         adopterImg.classList.add("logo");
+        adopterImg.loading = "lazy";
 
         adopterLink.appendChild(adopterImg);
         container.appendChild(adopterLink);