refactor: 최적화한 asset 파일의 확장자에 맞추어 태그 변경 및 최적화 코드 추가

woowacourse · Sep 5, 2023 · a40d31b · a40d31b
1 parent bf88563
commit a40d31b
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
@@ -2,10 +2,10 @@ import { useRef } from 'react';
 import { Link } from 'react-router-dom';
 import classNames from 'classnames/bind';
 
-import heroImage from '../../assets/images/hero.png';
-import trendingGif from '../../assets/images/trending.gif';
-import findGif from '../../assets/images/find.gif';
-import freeGif from '../../assets/images/free.gif';
+import heroImage from '../../assets/images/hero.webp';
+import trendingGif from '../../assets/images/trending.mp4';
+import findGif from '../../assets/images/find.mp4';
+import freeGif from '../../assets/images/free.mp4';
 
 import FeatureItem from './components/FeatureItem/FeatureItem';
 import CustomCursor from './components/CustomCursor/CustomCursor';
@@ -19,7 +19,10 @@ const Home = () => {
   return (
     <>
       <section className={styles.heroSection}>
-        <img className={styles.heroImage} src={heroImage} alt="hero image" />
+        <picture>
+          <source type="image/webp" className={styles.heroImage} />
+          <img className={styles.heroImage} src={heroImage} alt="hero" />
+        </picture>
         <div className={styles.projectTitle}>
           <h1 className={styles.title}>Memegle</h1>
           <h3 className={styles.subtitle}>gif search engine for you</h3>

diff --git a/src/pages/Home/components/FeatureItem/FeatureItem.tsx b/src/pages/Home/components/FeatureItem/FeatureItem.tsx
@@ -8,7 +8,7 @@ type FeatureItemProps = {
 const FeatureItem = ({ title, imageSrc }: FeatureItemProps) => {
   return (
     <div className={styles.featureItem}>
-      <img className={styles.featureImage} src={imageSrc} />
+      <video src={imageSrc} className={styles.featureImage} autoPlay muted loop playsInline />
       <div className={styles.featureTitleBg}></div>
       <h4 className={styles.featureTitle}>{title}</h4>
     </div>

diff --git a/src/types/images.d.ts b/src/types/images.d.ts
@@ -2,3 +2,5 @@ declare module '*.png';
 declare module '*.jpg';
 declare module '*.gif';
 declare module '*.svg';
+declare module '*.webp';
+declare module '*.mp4';