feat: Hero Image webp변환

Author: ghbaekdev

images/Hero_Desktop.webp

@@ -81,9 +81,26 @@
     </header>
 
     <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
+          width="576"
+          height="576"
+          media="(max-width: 575px)"
+          srcset="images/Hero_Mobile.webp"
+        />
+        <source
+          width="960"
+          height="770"
+          media="(min-width: 576px) and (max-width: 960px)"
+          srcset="images/Hero_Tablet.webp"
+        />
+        <img
+          width="1920"
+          height="893"
+          src="images/Hero_Desktop.webp"
+          alt="Hero_Desktop_Img"
+        />
+      </picture>
 
       <div class="hero-content">
         <div class="container">