diff --git a/src/assets/images/main/hero.avif b/src/assets/images/main/hero.avif
new file mode 100644
index 00000000..a1b108a2
Binary files /dev/null and b/src/assets/images/main/hero.avif differ
diff --git a/src/assets/images/main/hero.webp b/src/assets/images/main/hero.webp
new file mode 100644
index 00000000..b86dc35c
Binary files /dev/null and b/src/assets/images/main/hero.webp differ
diff --git a/src/assets/images/main/join_breeder.avif b/src/assets/images/main/join_breeder.avif
new file mode 100644
index 00000000..2b7b55c0
Binary files /dev/null and b/src/assets/images/main/join_breeder.avif differ
diff --git a/src/assets/images/main/join_breeder.webp b/src/assets/images/main/join_breeder.webp
new file mode 100644
index 00000000..c1a66e4e
Binary files /dev/null and b/src/assets/images/main/join_breeder.webp differ
diff --git a/src/assets/images/main/join_hopeful_buyer.avif b/src/assets/images/main/join_hopeful_buyer.avif
new file mode 100644
index 00000000..f9243354
Binary files /dev/null and b/src/assets/images/main/join_hopeful_buyer.avif differ
diff --git a/src/assets/images/main/join_hopeful_buyer.webp b/src/assets/images/main/join_hopeful_buyer.webp
new file mode 100644
index 00000000..af89394d
Binary files /dev/null and b/src/assets/images/main/join_hopeful_buyer.webp differ
diff --git a/src/assets/images/main/service_left.avif b/src/assets/images/main/service_left.avif
new file mode 100644
index 00000000..e07fa0cf
Binary files /dev/null and b/src/assets/images/main/service_left.avif differ
diff --git a/src/assets/images/main/service_left.webp b/src/assets/images/main/service_left.webp
new file mode 100644
index 00000000..a74eb413
Binary files /dev/null and b/src/assets/images/main/service_left.webp differ
diff --git a/src/assets/images/main/start_background.avif b/src/assets/images/main/start_background.avif
new file mode 100644
index 00000000..9324abe8
Binary files /dev/null and b/src/assets/images/main/start_background.avif differ
diff --git a/src/assets/images/main/start_background.webp b/src/assets/images/main/start_background.webp
new file mode 100644
index 00000000..16b7b913
Binary files /dev/null and b/src/assets/images/main/start_background.webp differ
diff --git a/src/assets/images/main/team_mission_background.avif b/src/assets/images/main/team_mission_background.avif
new file mode 100644
index 00000000..53bc0817
Binary files /dev/null and b/src/assets/images/main/team_mission_background.avif differ
diff --git a/src/assets/images/main/team_mission_background.webp b/src/assets/images/main/team_mission_background.webp
new file mode 100644
index 00000000..28da3b8c
Binary files /dev/null and b/src/assets/images/main/team_mission_background.webp differ
diff --git a/src/components/common/Picture.tsx b/src/components/common/Picture.tsx
new file mode 100644
index 00000000..f8d2f0a2
--- /dev/null
+++ b/src/components/common/Picture.tsx
@@ -0,0 +1,28 @@
+import { styled } from 'styled-components';
+
+interface Props {
+  className?: string;
+  imgUrl: string;
+  imgAlt: string;
+  avifUrl?: string;
+  webpUrl?: string;
+}
+
+const PictureEl = styled.picture`
+  img {
+    width: 100%;
+    height: auto;
+  }
+`;
+
+const Picture = ({ className, imgUrl, imgAlt, avifUrl, webpUrl }: Props) => {
+  return (
+    <PictureEl className={className}>
+      <source srcSet={avifUrl} type="image/avif" />
+      <source srcSet={webpUrl} type="image/webp" />
+      <img src={imgUrl} alt={imgAlt} />
+    </PictureEl>
+  );
+};
+
+export default Picture;
diff --git a/src/components/main/HeroSection.tsx b/src/components/main/HeroSection.tsx
index 85e363c4..ee18523d 100644
--- a/src/components/main/HeroSection.tsx
+++ b/src/components/main/HeroSection.tsx
@@ -1,20 +1,33 @@
 import { styled } from 'styled-components';
 import HeroImage from 'assets/images/main/hero.png';
+import HeroImageAvif from 'assets/images/main/hero.avif';
+import HeroImageWebp from 'assets/images/main/hero.webp';
 import LogoPawWhite from 'assets/images/logo_paw_white.svg';
 import LogoTextWhite from 'assets/images/logo_text_white.svg';
 import BottomArrow from 'assets/images/main/bottom_arrow.svg';
 import Layout from 'components/common/Layout';
+import Picture from 'components/common/Picture';
 
 const Hero = styled.section`
   width: 100%;
   height: 980px;
   background-color: #ddd;
-  background-image: url(${HeroImage});
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
+  position: relative;
+  overflow: hidden;
+  .background img {
+    z-index: 1;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 1920px;
+    height: 980px;
+  }
 `;
+
 const HeroSloganWrapper = styled.div`
+  z-index: 2;
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -53,6 +66,13 @@ const HeroSloganWrapper = styled.div`
 export default function HeroSection() {
   return (
     <Hero>
+      <Picture
+        className="background"
+        imgUrl={HeroImage}
+        avifUrl={HeroImageAvif}
+        webpUrl={HeroImageWebp}
+        imgAlt="히어로 이미지"
+      />
       <Layout>
         <HeroSloganWrapper id="hero-slogan-wrapper">
           <img id="logo-paw" src={LogoPawWhite} alt="logo-paw" />
diff --git a/src/components/main/JoinSection.tsx b/src/components/main/JoinSection.tsx
index 70c1fa9b..c8bdf190 100644
--- a/src/components/main/JoinSection.tsx
+++ b/src/components/main/JoinSection.tsx
@@ -1,7 +1,12 @@
 import Layout from 'components/common/Layout';
 import { styled } from 'styled-components';
 import breader from 'assets/images/main/join_breeder.png';
+import breaderAvif from 'assets/images/main/join_breeder.avif';
+import breaderWebp from 'assets/images/main/join_breeder.webp';
 import buyer from 'assets/images/main/join_hopeful_buyer.png';
+import buyerAvif from 'assets/images/main/join_hopeful_buyer.avif';
+import buyerWebp from 'assets/images/main/join_hopeful_buyer.webp';
+import Picture from 'components/common/Picture';
 
 const Join = styled.section`
   width: 100%;
@@ -91,7 +96,7 @@ const JoinSection = () => {
           <ThumbnailCard>
             <div className="thumbnailWrapper">
               <span className="tag">#브리더</span>
-              <img src={breader} alt="브리더" />
+              <Picture imgUrl={breader} imgAlt="브리더" avifUrl={breaderAvif} webpUrl={breaderWebp} />
             </div>
             <p>
               반려견의 속마음을 <br />잘 아는 브리더
@@ -100,7 +105,7 @@ const JoinSection = () => {
           <ThumbnailCard>
             <div className="thumbnailWrapper">
               <span className="tag">#분양희망자</span>
-              <img src={buyer} alt="분양희망자" />
+              <Picture imgUrl={buyer} imgAlt="분양희망자" avifUrl={buyerAvif} webpUrl={buyerWebp} />
             </div>
             <p>
               반려견을 잘 케어해 줄 <br />
diff --git a/src/components/main/ServiceSection.tsx b/src/components/main/ServiceSection.tsx
index 5a5081b6..a9234ca4 100644
--- a/src/components/main/ServiceSection.tsx
+++ b/src/components/main/ServiceSection.tsx
@@ -1,6 +1,9 @@
 import Layout from 'components/common/Layout';
 import { styled } from 'styled-components';
 import TwoPuppys from 'assets/images/main/service_left.png';
+import TwoPuppysAvif from 'assets/images/main/service_left.avif';
+import TwoPuppysWebp from 'assets/images/main/service_left.webp';
+import Picture from 'components/common/Picture';
 
 const Service = styled.section`
   width: 100%;
@@ -9,14 +12,13 @@ const Service = styled.section`
     display: flex;
     gap: 90px;
     margin: 222px 320px 184px;
+    .left-image img {
+      width: 480px;
+      height: 440px;
+    }
   }
 `;
 
-const TowPuppysImage = styled.img`
-  width: 480px;
-  height: 440px;
-`;
-
 const TextWrapper = styled.div`
   display: flex;
   flex-direction: column;
@@ -70,7 +72,13 @@ const ServiceSection = () => {
     <Service>
       <Layout>
         <div className="container">
-          <TowPuppysImage src={TwoPuppys} alt="두마리 강아지" />
+          <Picture
+            className="left-image"
+            imgUrl={TwoPuppys}
+            avifUrl={TwoPuppysAvif}
+            webpUrl={TwoPuppysWebp}
+            imgAlt="두마리 강아지"
+          />
           <TextWrapper>
             <h2>
               완전히 새로운 서비스
diff --git a/src/components/main/StartSection.tsx b/src/components/main/StartSection.tsx
index 04b30928..b8ff8a10 100644
--- a/src/components/main/StartSection.tsx
+++ b/src/components/main/StartSection.tsx
@@ -1,15 +1,31 @@
 import { styled } from 'styled-components';
 import Layout from 'components/common/Layout';
 import BgImage from 'assets/images/main/start_background.png';
+import BgImageAvif from 'assets/images/main/start_background.avif';
+import BgImageWebp from 'assets/images/main/start_background.webp';
+import Picture from 'components/common/Picture';
 
 const Start = styled.section`
   width: 100%;
   height: 717px;
   background: linear-gradient(324deg, #3cbe9f 8.33%, #8ff9b9 100%);
-  background-image: url(${BgImage});
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
+  position: relative;
+  overflow: hidden;
+  .background {
+    img {
+      z-index: 1;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 1920px;
+      height: 717px;
+    }
+    & + div {
+      z-index: 2;
+      position: relative;
+    }
+  }
   h2 {
     margin-top: 229px;
     color: ${({ theme }) => theme.colors.white};
@@ -62,6 +78,7 @@ const TagWrapper = styled.div`
 export default function StartSection() {
   return (
     <Start>
+      <Picture className="background" imgUrl={BgImage} avifUrl={BgImageAvif} webpUrl={BgImageWebp} imgAlt="강아지" />
       <Layout>
         <h2>
           펫트리와 함께,
diff --git a/src/components/main/TeamMissionSection.tsx b/src/components/main/TeamMissionSection.tsx
index afa874a6..81bae6f1 100644
--- a/src/components/main/TeamMissionSection.tsx
+++ b/src/components/main/TeamMissionSection.tsx
@@ -1,18 +1,30 @@
 import Layout from 'components/common/Layout';
 import { styled } from 'styled-components';
 import Background from 'assets/images/main/team_mission_background.png';
+import BackgroundAvif from 'assets/images/main/team_mission_background.avif';
+import BackgroundWebp from 'assets/images/main/team_mission_background.webp';
+import Picture from 'components/common/Picture';
 
 const TeamMission = styled.section`
   position: relative;
   width: 100%;
   height: 793px;
   background-color: #ddd;
-  background-image: url(${Background});
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
+  position: relative;
+  overflow: hidden;
+  .background img {
+    z-index: 1;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 1920px;
+    height: 793px;
+  }
 `;
 const Message = styled.div`
+  z-index: 2;
+  position: relative;
   display: inline-flex;
   height: 334px;
   padding: 24px 60px;
@@ -48,6 +60,13 @@ const Message = styled.div`
 const TeamMissionSection = () => {
   return (
     <TeamMission>
+      <Picture
+        className="background"
+        imgUrl={Background}
+        avifUrl={BackgroundAvif}
+        webpUrl={BackgroundWebp}
+        imgAlt="강아지들"
+      />
       <Layout>
         <Message>
           <h2>