feat: 이미지 최적화를 위한 WebP 포맷 변환 적용

Author: solbijae

images/Hero_Desktop.webp

@@ -56,9 +56,18 @@
 
         <section class="hero">
 
-            <img class="desktop" src="images/Hero_Desktop.jpg">
-            <img class="mobile" src="images/Hero_Mobile.jpg">
-            <img class="tablet" src="images/Hero_Tablet.jpg">
+            <picture>
+                <source srcset="images/Hero_Desktop.webp" type="image/webp">
+                <img class="desktop" src="images/Hero_Desktop.jpg">
+            </picture>
+            <picture>
+                <source srcset="images/Hero_Mobile.webp" type="image/webp">
+                <img class="mobile" src="images/Hero_Mobile.jpg">
+            </picture>
+            <picture>
+                <source srcset="images/Hero_Tablet.webp" type="image/webp">
+                <img class="tablet" src="images/Hero_Tablet.jpg">
+            </picture>
 
 
             <div class="hero-content">
@@ -84,7 +93,10 @@ <h1>Best Sellers</h1>
 
                     <div class="product new">
                         <div class="product-picture">
-                            <img src="images/vr1.jpg" alt="product: Penom Case">
+                            <picture>
+                                <source srcset="images/vr1.webp" type="image/webp">
+                                <img src="images/vr1.jpg" alt="product: Penom Case">
+                            </picture>
                         </div>
                         <div class="product-info">
                             <h5 class="categories">Headsets, Apple</h5>
@@ -98,7 +110,10 @@ <h3 class="price">
 
                     <div class="product new">
                         <div class="product-picture">
-                            <img src="images/vr2.jpg" alt="product: Noise Cancelling Headphone">
+                            <picture>
+                                <source srcset="images/vr2.webp" type="image/webp">
+                                <img src="images/vr2.jpg" alt="product: Noise Cancelling Headphone">
+                            </picture>
                         </div>
                         <div class="product-info">
                             <h5 class="categories">Headsets, PS</h5>
@@ -112,7 +127,10 @@ <h3 class="price">
 
                     <div class="product">
                         <div class="product-picture">
-                            <img src="images/vr3.jpg" alt="product: Canon Digital SLR EOS Rebel T6">
+                            <picture>
+                                <source srcset="images/vr3.webp" type="image/webp">
+                                <img src="images/vr3.jpg" alt="product: Canon Digital SLR EOS Rebel T6">
+                            </picture>
                         </div>
                         <div class="product-info">
                             <h5 class="categories">Headsets, Oculus</h5>