fix: Improving img

src/components/common/footer/FooterMobile/index.tsx

@@ -5,7 +5,15 @@ import { FooterMobileWrapper } from './styled';
 const FooterMobile: React.FC = () => {
   return (
     <FooterMobileWrapper>
-      <Image src="/assets/knu_logo.svg" alt="knu-logo" width={50} height={15.5} placeholder="empty" priority />
+      <Image
+        src="/assets/knu_logo.svg"
+        alt="knu-logo"
+        width={50}
+        height={15.5}
+        placeholder="empty"
+        priority
+        sizes="100vw"
+      />
 
       <p>vcd.knu.ac.kr</p>
       <p>{`[41566] 우)41566 대구광역시 북구 대학로80(산격동) 경북대학교 예술대학 디자인학과`}</p>

src/components/common/footer/FooterPC/index.tsx

@@ -7,7 +7,15 @@ const FooterPC: React.FC = () => {
   return (
     <FooterPCWrapper>
       <Row>
-        <Image src="/assets/knu_logo.svg" alt="knu-logo" width={123} height={38.5} placeholder="empty" priority />
+        <Image
+          src="/assets/knu_logo.svg"
+          alt="knu-logo"
+          width={123}
+          height={38.5}
+          placeholder="empty"
+          priority
+          sizes="100vw"
+        />
 
         <Column className="contact">
           <p>vcd.knu.ac.kr</p>

src/components/common/header/HeaderMobile/index.tsx

@@ -19,7 +19,15 @@ const HeaderMobile = React.forwardRef<HTMLAnchorElement, Props>((props, ref) =>
       <Row className="header-wrap">
         <Link href={AppPaths.home.href} passHref ref={ref}>
           <a>
-            <Image src="/assets/126_logo.svg" alt="126-logo" width={51} height={26} placeholder="empty" priority />
+            <Image
+              src="/assets/126_logo.svg"
+              alt="126-logo"
+              width={51}
+              height={26}
+              placeholder="empty"
+              priority
+              sizes="100vw"
+            />
           </a>
         </Link>
 

src/components/pages/ArchivePage/index.tsx

@@ -27,12 +27,13 @@ const ArchivePage: React.FC = () => {
             <div key={archive.title} className={'content'}>
               <Image
                 loader={nextImageLoader}
-                src={`/assets/archive/mobile/mobile_archive_${index + 1}.png`}
+                src={`/assets/archive/mobile/mobile_archive_${index + 1}.webp`}
                 alt={archive.title}
                 width={478}
                 height={611}
                 placeholder="empty"
                 priority
+                sizes="100vw"
                 onClick={() => linkToPortfolio(archive.producerInitial)}
               />
               <p className="title">{archive.title}</p>
@@ -48,12 +49,13 @@ const ArchivePage: React.FC = () => {
             <div key={index} className={'content'} onClick={() => linkToPortfolio(archive.producerInitial)}>
               <Image
                 loader={nextImageLoader}
-                src={`/assets/archive/pc/pc_archive_${index + 1}.png`}
+                src={`/assets/archive/pc/pc_archive_${index + 1}.webp`}
                 alt={archive.title}
                 width={1151}
                 height={818}
                 placeholder="empty"
                 priority
+                sizes="100vw"
               />
               <Row className="text-wrap">
                 <p className="producer">{archive.producer}</p>

src/components/pages/IdentityPage/index.tsx

@@ -5,9 +5,9 @@ import React from 'react';
 import { nextImageLoader } from 'utils/imageLoader';
 import { IdentityPageMobileWrapper, IdentityPagePCWrapper } from './styled';
 import posterImg from '/public/assets/identity/poster.gif';
-import fontImg from '/public/assets/identity/font.png';
-import dorokImg from '/public/assets/identity/dorok.png';
-import goodsImg from '/public/assets/identity/goods.png';
+import fontImg from '/public/assets/identity/font.webp';
+import dorokImg from '/public/assets/identity/dorok.webp';
+import goodsImg from '/public/assets/identity/goods.webp';
 import Video from 'components/common/Video';
 import useMobileDetect from 'utils/useMobileDetect';
 
@@ -34,18 +34,32 @@ const IdentityPage: React.FC = () => {
           <div className="item-list">
             <ItemFrame title="Poster">
               <Row>
-                <Image loader={nextImageLoader} src={posterImg} alt={'Poster'} priority className="poster" />
-                <Image loader={nextImageLoader} src={posterImg} alt={'Poster'} priority className="poster" />
+                <Image
+                  loader={nextImageLoader}
+                  src={posterImg}
+                  alt={'Poster'}
+                  priority
+                  className="poster"
+                  sizes="100vw"
+                />
+                <Image
+                  loader={nextImageLoader}
+                  src={posterImg}
+                  alt={'Poster'}
+                  priority
+                  className="poster"
+                  sizes="100vw"
+                />
               </Row>
             </ItemFrame>
             <ItemFrame title="Font">
-              <Image loader={nextImageLoader} src={fontImg} alt={'Font'} placeholder="empty" priority />
+              <Image loader={nextImageLoader} src={fontImg} alt={'Font'} placeholder="empty" priority sizes="100vw" />
             </ItemFrame>
             <ItemFrame title="Dorok">
-              <Image loader={nextImageLoader} src={dorokImg} alt={'Dorok'} placeholder="empty" priority />
+              <Image loader={nextImageLoader} src={dorokImg} alt={'Dorok'} placeholder="empty" priority sizes="100vw" />
             </ItemFrame>
             <ItemFrame title="Goods">
-              <Image loader={nextImageLoader} src={goodsImg} alt={'Goods'} placeholder="empty" priority />
+              <Image loader={nextImageLoader} src={goodsImg} alt={'Goods'} placeholder="empty" priority sizes="100vw" />
             </ItemFrame>
           </div>
         </IdentityPageMobileWrapper>
@@ -69,19 +83,40 @@ const IdentityPage: React.FC = () => {
 
           <ItemFrame title="Poster">
             <Row>
-              <Image loader={nextImageLoader} src={posterImg} alt={'Poster'} priority className="poster" />
-              <Image loader={nextImageLoader} src={posterImg} alt={'Poster'} priority className="poster" />
-              <Image loader={nextImageLoader} src={posterImg} alt={'Poster'} priority className="poster" />
+              <Image
+                loader={nextImageLoader}
+                src={posterImg}
+                alt={'Poster'}
+                priority
+                className="poster"
+                sizes="100vw"
+              />
+              <Image
+                loader={nextImageLoader}
+                src={posterImg}
+                alt={'Poster'}
+                priority
+                className="poster"
+                sizes="100vw"
+              />
+              <Image
+                loader={nextImageLoader}
+                src={posterImg}
+                alt={'Poster'}
+                priority
+                className="poster"
+                sizes="100vw"
+              />
             </Row>
           </ItemFrame>
           <ItemFrame title="Font">
-            <Image loader={nextImageLoader} src={fontImg} alt={'Font'} priority />
+            <Image loader={nextImageLoader} src={fontImg} alt={'Font'} priority sizes="100vw" />
           </ItemFrame>
           <ItemFrame title="Dorok">
-            <Image loader={nextImageLoader} src={dorokImg} alt={'Dorok'} priority />
+            <Image loader={nextImageLoader} src={dorokImg} alt={'Dorok'} priority sizes="100vw" />
           </ItemFrame>
           <ItemFrame title="Goods">
-            <Image loader={nextImageLoader} src={goodsImg} alt={'Goods'} priority />
+            <Image loader={nextImageLoader} src={goodsImg} alt={'Goods'} priority sizes="100vw" />
           </ItemFrame>
         </IdentityPagePCWrapper>
       )}

src/components/pages/TeamsPage/constants.ts

@@ -8,31 +8,31 @@ interface TeamDataInterface {
 export const TEAMS_DATA: TeamDataInterface[] = [
   {
     name: 'Planning Team',
-    imgSrc: '/assets/teams/planning_team.png',
+    imgSrc: '/assets/teams/planning_team.webp',
     leader: '조은지',
     members: ['곽나영', '송예빈', '양준녕', '이원준', '이지안'],
   },
   {
     name: 'Digital Media Team',
-    imgSrc: '/assets/teams/digital media_team.png',
+    imgSrc: '/assets/teams/digital media_team.webp',
     leader: '곽나영',
     members: ['김현주', '오지현', '이예림', '장수현', '정다은', '정유나'],
   },
   {
     name: ' Editorial Team',
-    imgSrc: '/assets/teams/editorial_team.png',
+    imgSrc: '/assets/teams/editorial_team.webp',
     leader: '이원준',
     members: ['김미현', '송희주', '이연주', '진수별'],
   },
   {
     name: ' Exhibition Team',
-    imgSrc: '/assets/teams/exhibition team.png',
+    imgSrc: '/assets/teams/exhibition team.webp',
     leader: '이지안',
     members: ['김의정', '서다은', '이아림', '윤지현', '한예리', '홍이도'],
   },
   {
     name: 'Graphic Team',
-    imgSrc: '/assets/teams/graphic_team.png',
+    imgSrc: '/assets/teams/graphic_team.webp',
     leader: '양준녕',
     members: ['김나현', '남시본', '배상진', '전유석'],
   },

src/components/pages/TeamsPage/index.tsx

@@ -5,7 +5,7 @@ import { TEAMS_DATA } from './constants';
 import { TeamsPageMobileWrapper, TeamsPagePCWrapper } from './styled';
 import Image from 'next/future/image';
 import { nextImageLoader } from 'utils/imageLoader';
-import allTeams from '../../../../public/assets/teams/all_teams.png';
+import allTeams from '../../../../public/assets/teams/all_teams.webp';
 import useMobileDetect from 'utils/useMobileDetect';
 
 const TeamsPage: React.FC = () => {
@@ -24,6 +24,7 @@ const TeamsPage: React.FC = () => {
             height={1500}
             placeholder="empty"
             priority
+            sizes="100vw"
           />
           <p className="description">
             안녕하세요 가을의 끝자락, 겨울에 초입에 서서 인사드립니다. 수많은 계절들 속에서 유독 마음이 설레는 계절이
@@ -43,6 +44,7 @@ const TeamsPage: React.FC = () => {
                 height={404}
                 placeholder="empty"
                 priority
+                sizes="100vw"
               />
 
               <Row>
@@ -69,6 +71,7 @@ const TeamsPage: React.FC = () => {
             height={1500}
             placeholder="empty"
             priority
+            sizes="100vw"
           />
           <Row className="description-wrapper">
             <p className="description">
@@ -94,6 +97,7 @@ const TeamsPage: React.FC = () => {
                   height={404}
                   placeholder="empty"
                   priority
+                  sizes="100vw"
                 />
 
                 <Column>

src/components/pages/ThanksToPage/constants.ts

@@ -7,25 +7,25 @@ interface ProfessorDataInterface {
 
 export const PROFESSOR_DATA: ProfessorDataInterface[] = [
   {
-    imgSrc: '/assets/partners/prof_img-1.png',
+    imgSrc: '/assets/partners/prof_img-1.webp',
     position: 'Prof',
     name: '홍순상',
     email: 'oh1005@knu.ac.kr',
   },
   {
-    imgSrc: '/assets/partners/prof_img-2.png',
+    imgSrc: '/assets/partners/prof_img-2.webp',
     position: 'Prof',
     name: '김성년',
     email: 'kimsn@knu.ac.kr',
   },
   {
-    imgSrc: '/assets/partners/prof_img-3.png',
+    imgSrc: '/assets/partners/prof_img-3.webp',
     position: 'Prof',
     name: '이경용',
     email: 'yong@knu.ac.kr',
   },
   {
-    imgSrc: '/assets/partners/prof_img-4.png',
+    imgSrc: '/assets/partners/prof_img-4.webp',
     position: 'Prof',
     name: '조철희',
     email: 'chery@knu.ac.kr',
@@ -42,13 +42,13 @@ interface PartnersDataInterface {
 
 export const PARTNERS_DATA: PartnersDataInterface[] = [
   {
-    imgSrc: '/assets/partners/partners_moorim.png',
+    imgSrc: '/assets/partners/partners_moorim.webp',
     name: '무림',
     contact: '@ moorim_gallery',
     site: 'linktr.ee/moorim_gallery',
   },
   {
-    imgSrc: '/assets/partners/partners_raum.png',
+    imgSrc: '/assets/partners/partners_raum.webp',
     name: '라움',
     contact: '053 - 591 - 6293',
     email: 'email.jiwon97@paran.com',

src/components/pages/ThanksToPage/index.tsx

@@ -6,7 +6,7 @@ import { PARTNERS_DATA, PROFESSOR_DATA } from './constants';
 import { ThanksToPageMobileWrapper, ThanksToPagePCWrapper } from './styled';
 import Image from 'next/future/image';
 import { nextImageLoader } from 'utils/imageLoader';
-import allProf from '../../../../public/assets/partners/all-prof_img.png';
+import allProf from '../../../../public/assets/partners/all-prof_img.webp';
 import useMobileDetect from 'utils/useMobileDetect';
 
 const ThanksToPage: React.FC = () => {
@@ -26,6 +26,7 @@ const ThanksToPage: React.FC = () => {
               height={670}
               placeholder="empty"
               priority
+              sizes="100vw"
             />
             <p className="description">
               지난 4년간, 우리 디자인학과 학생들은 각자의 고정된 시각에서 벗어나 세상을 새롭고 다르게 보는 법을
@@ -47,6 +48,7 @@ const ThanksToPage: React.FC = () => {
                     alt={professor.name}
                     placeholder="empty"
                     priority
+                    sizes="100vw"
                   />
                   <Column>
                     <p className="name">
@@ -70,6 +72,7 @@ const ThanksToPage: React.FC = () => {
                     height={800}
                     placeholder="empty"
                     priority
+                    sizes="100vw"
                   />
 
                   <p className="name">{partner.name}</p>
@@ -105,6 +108,7 @@ const ThanksToPage: React.FC = () => {
               height={670}
               placeholder="empty"
               priority
+              sizes="100vw"
             />
             <Row className="description-wrapper">
               <p className="description">
@@ -131,6 +135,7 @@ const ThanksToPage: React.FC = () => {
                     height={400}
                     placeholder="empty"
                     priority
+                    sizes="100vw"
                   />
 
                   <Column>
@@ -155,6 +160,7 @@ const ThanksToPage: React.FC = () => {
                     height={800}
                     placeholder="empty"
                     priority
+                    sizes="100vw"
                   />
 
                   <p className="name">{partner.name}</p>

src/components/templates/DefaultLayoutPC/index.tsx

@@ -23,7 +23,15 @@ const DefaultLayoutPC: React.FC<Props> = (props) => {
       <Row className="nav">
         <Link href={AppPaths.home.href} passHref>
           <a>
-            <Image src="/assets/126_logo.svg" alt="126-logo" width={81.5} height={41} placeholder="empty" priority />
+            <Image
+              src="/assets/126_logo.svg"
+              alt="126-logo"
+              width={81.5}
+              height={41}
+              placeholder="empty"
+              priority
+              sizes="100vw"
+            />
           </a>
         </Link>