diff --git a/src/components/common/avatar/AvartarList.tsx b/src/components/common/avatar/AvartarList.tsx
index de28daba..49fa7609 100644
--- a/src/components/common/avatar/AvartarList.tsx
+++ b/src/components/common/avatar/AvartarList.tsx
@@ -2,6 +2,7 @@ import * as S from './AvatarList.styled';
 import { ProjectSkillTag } from '../../../models/manageMyProject';
 import Avatar from './Avatar';
 import { UserSkillTag } from '../../../models/applicant';
+import { formatImgPath } from '../../../util/formatImgPath';
 export interface AvartarListProps {
   avatars: ProjectSkillTag[] | UserSkillTag[] | null;
   size?: string;
@@ -22,7 +23,9 @@ function AvartarList({
         <Avatar
           key={avatar.skillTagId}
           size={size}
-          image={avatar.SkillTag.img}
+          image={`${import.meta.env.VITE_APP_IMAGE_CDN_URL}/${formatImgPath(
+            avatar.SkillTag.img
+          )}?w=62&h=62&fit=crop&crop=entropy&q=60`}
         />
       ))}
     </S.Wrapper>
diff --git a/src/components/common/header/Header.tsx b/src/components/common/header/Header.tsx
index 7849da48..f5fb8794 100644
--- a/src/components/common/header/Header.tsx
+++ b/src/components/common/header/Header.tsx
@@ -12,6 +12,7 @@ import { UserCircleIcon } from '@heroicons/react/24/outline';
 import loadingImg from '../../../assets/loadingImg.svg';
 import { useModal } from '../../../hooks/useModal';
 import Modal from '../modal/Modal';
+import { formatImgPath } from '../../../util/formatImgPath';
 
 function Header() {
   const { isOpen, message, handleModalOpen, handleModalClose } = useModal();
@@ -32,7 +33,14 @@ function Header() {
             isLoading ? (
               <Avatar size='45px' image={loadingImg} />
             ) : isLoggedIn ? (
-              <Avatar size='45px' image={profileImg} />
+              <Avatar
+                size='45px'
+                image={`${
+                  import.meta.env.VITE_APP_IMAGE_CDN_URL
+                }/${formatImgPath(
+                  profileImg
+                )}?w=86&h=86&fit=crop&crop=entropy&auto=format,enhance&q=60`}
+              />
             ) : (
               <UserCircleIcon color='#6D6D6D' width='48' height='48' />
             )
diff --git a/src/util/__tests__/formatImgPath.test.ts b/src/util/__tests__/formatImgPath.test.ts
new file mode 100644
index 00000000..89663d26
--- /dev/null
+++ b/src/util/__tests__/formatImgPath.test.ts
@@ -0,0 +1,12 @@
+import { expect, test } from 'vitest';
+import { formatImgPath } from '../formatImgPath';
+
+test('formatImgPath 함수를 테스트합니다.', () => {
+  const date =
+    'https://example.com/users/profile_b4dc06af-410c-497e-9e01-f543e1682423.jpeg';
+  const formattedDate = formatImgPath(date);
+
+  expect(formattedDate).toBe(
+    'users/profile_b4dc06af-410c-497e-9e01-f543e1682423.jpeg'
+  );
+});
diff --git a/src/util/formatImgPath.ts b/src/util/formatImgPath.ts
new file mode 100644
index 00000000..ec32966c
--- /dev/null
+++ b/src/util/formatImgPath.ts
@@ -0,0 +1,4 @@
+export const formatImgPath = (imgPath: string) => {
+  const path = imgPath.split('/').slice(3).join('/');
+  return path;
+};