Optimized images for better performance

Author: kfoolable

starter/07-Omnifood-Desktop/img/hero-min.png

@@ -83,11 +83,23 @@ <h1 class="heading-primary">
             </div>
           </div>
           <div class="hero-image-box">
+            <picture>
+              <source srcset="img/hero.webp" type="image/webp" />
+              <source srcset="img/hero-min.png" type="image/png" />
+
+              <img
+                src="img/hero.webp"
+                class="hero-img"
+                alt="Woman enjoying food, meals in storage container, and food bowls on a table"
+              />
+            </picture>
+            <!-- <div class="hero-image-box">
             <img
-              src="img/hero.png"
+              src="img/hero-min.png"
               class="hero-img"
               alt="Woman enjoying food, meals in storage container, and food bowls on a table"
             />
+          </div> -->
           </div>
         </div>
       </section>