feat: Image Optimizations

Author: zangeronimo

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

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