perf: image optimization (#118)

1. Change every `.png` file to `.webp` and change markdown's URL accordingly. 2. Install `sharp` package for image optimizations. * perf: change every `.png` file to `webp` and change markdown's URL accordingly * chore: install `sharp` package * refactor: add `unoptimized` option to loading image for an error of Next.js
lumirlumir · Oct 27, 2024 · ead3f07 · ead3f07
1 parent b2bcb41
commit ead3f07
Show file tree

Hide file tree

Showing 73 changed files with 511 additions and 41 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,7 +31,8 @@
     "next": "^14.2.15",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-icons": "^5.3.0"
+    "react-icons": "^5.3.0",
+    "sharp": "^0.33.5"
   },
   "devDependencies": {
     "@types/node": "^22.7.7",

diff --git a/public/images/posts/composition-of-javascript/1.png b/public/images/posts/composition-of-javascript/1.png
diff --git a/public/images/posts/composition-of-javascript/1.webp b/public/images/posts/composition-of-javascript/1.webp
diff --git a/public/images/posts/composition-of-javascript/2.png b/public/images/posts/composition-of-javascript/2.png
diff --git a/public/images/posts/composition-of-javascript/2.webp b/public/images/posts/composition-of-javascript/2.webp
diff --git a/public/images/posts/composition-of-javascript/3.png b/public/images/posts/composition-of-javascript/3.png
diff --git a/public/images/posts/composition-of-javascript/3.webp b/public/images/posts/composition-of-javascript/3.webp
diff --git a/public/images/posts/composition-of-javascript/4.png b/public/images/posts/composition-of-javascript/4.png
diff --git a/public/images/posts/composition-of-javascript/4.webp b/public/images/posts/composition-of-javascript/4.webp
diff --git a/public/images/posts/composition-of-javascript/5.png b/public/images/posts/composition-of-javascript/5.png
diff --git a/public/images/posts/composition-of-javascript/5.webp b/public/images/posts/composition-of-javascript/5.webp
diff --git a/public/images/posts/composition-of-javascript/6.png b/public/images/posts/composition-of-javascript/6.png
diff --git a/public/images/posts/composition-of-javascript/6.webp b/public/images/posts/composition-of-javascript/6.webp
diff --git a/public/images/posts/composition-of-javascript/7.png b/public/images/posts/composition-of-javascript/7.png
diff --git a/public/images/posts/composition-of-javascript/7.webp b/public/images/posts/composition-of-javascript/7.webp
diff --git a/public/images/posts/composition-of-javascript/8.png b/public/images/posts/composition-of-javascript/8.png
diff --git a/public/images/posts/composition-of-javascript/8.webp b/public/images/posts/composition-of-javascript/8.webp
diff --git a/public/images/posts/convention-of-git-commit-message/1.png b/public/images/posts/convention-of-git-commit-message/1.png
diff --git a/public/images/posts/convention-of-git-commit-message/1.webp b/public/images/posts/convention-of-git-commit-message/1.webp
diff --git a/public/images/posts/convention-of-git-commit-message/2.png b/public/images/posts/convention-of-git-commit-message/2.png
diff --git a/public/images/posts/convention-of-git-commit-message/2.webp b/public/images/posts/convention-of-git-commit-message/2.webp
diff --git a/public/images/posts/difference-between-console-log-and-console-dir/1.png b/public/images/posts/difference-between-console-log-and-console-dir/1.png
diff --git a/public/images/posts/difference-between-console-log-and-console-dir/1.webp b/public/images/posts/difference-between-console-log-and-console-dir/1.webp
diff --git a/public/images/posts/difference-between-console-log-and-console-dir/2.png b/public/images/posts/difference-between-console-log-and-console-dir/2.png
diff --git a/public/images/posts/difference-between-console-log-and-console-dir/2.webp b/public/images/posts/difference-between-console-log-and-console-dir/2.webp
diff --git a/public/images/posts/difference-between-console-log-and-console-dir/3.png b/public/images/posts/difference-between-console-log-and-console-dir/3.png
diff --git a/public/images/posts/difference-between-console-log-and-console-dir/3.webp b/public/images/posts/difference-between-console-log-and-console-dir/3.webp
diff --git a/public/images/posts/difference-between-console-log-and-console-dir/4.png b/public/images/posts/difference-between-console-log-and-console-dir/4.png
diff --git a/public/images/posts/difference-between-console-log-and-console-dir/4.webp b/public/images/posts/difference-between-console-log-and-console-dir/4.webp
diff --git a/public/images/posts/difference-between-console-log-and-console-dir/5.png b/public/images/posts/difference-between-console-log-and-console-dir/5.png
diff --git a/public/images/posts/difference-between-console-log-and-console-dir/5.webp b/public/images/posts/difference-between-console-log-and-console-dir/5.webp
diff --git a/public/images/posts/difference-between-framework-and-library/1.png b/public/images/posts/difference-between-framework-and-library/1.png
diff --git a/public/images/posts/difference-between-framework-and-library/1.webp b/public/images/posts/difference-between-framework-and-library/1.webp
diff --git a/public/images/posts/difference-between-framework-and-library/2.png b/public/images/posts/difference-between-framework-and-library/2.png
diff --git a/public/images/posts/difference-between-framework-and-library/2.webp b/public/images/posts/difference-between-framework-and-library/2.webp
diff --git a/public/images/posts/difference-between-framework-and-library/3.png b/public/images/posts/difference-between-framework-and-library/3.png
diff --git a/public/images/posts/difference-between-framework-and-library/3.webp b/public/images/posts/difference-between-framework-and-library/3.webp
diff --git a/public/images/posts/everything-about-markdown/1.png b/public/images/posts/everything-about-markdown/1.png
diff --git a/public/images/posts/everything-about-markdown/1.webp b/public/images/posts/everything-about-markdown/1.webp
diff --git a/public/images/posts/everything-about-markdown/10.png b/public/images/posts/everything-about-markdown/10.png
diff --git a/public/images/posts/everything-about-markdown/10.webp b/public/images/posts/everything-about-markdown/10.webp
diff --git a/public/images/posts/everything-about-markdown/4.png b/public/images/posts/everything-about-markdown/4.png
diff --git a/public/images/posts/everything-about-markdown/4.webp b/public/images/posts/everything-about-markdown/4.webp
diff --git a/public/images/posts/everything-about-markdown/5.png b/public/images/posts/everything-about-markdown/5.png
diff --git a/public/images/posts/everything-about-markdown/5.webp b/public/images/posts/everything-about-markdown/5.webp
diff --git a/public/images/posts/everything-about-markdown/6.png b/public/images/posts/everything-about-markdown/6.png
diff --git a/public/images/posts/everything-about-markdown/6.webp b/public/images/posts/everything-about-markdown/6.webp
diff --git a/public/images/posts/everything-about-markdown/7.png b/public/images/posts/everything-about-markdown/7.png
diff --git a/public/images/posts/everything-about-markdown/7.webp b/public/images/posts/everything-about-markdown/7.webp
diff --git a/public/images/posts/everything-about-markdown/8.png b/public/images/posts/everything-about-markdown/8.png
diff --git a/public/images/posts/everything-about-markdown/8.webp b/public/images/posts/everything-about-markdown/8.webp
diff --git a/public/images/posts/npm-package-react/1.png b/public/images/posts/npm-package-react/1.png
diff --git a/public/images/posts/npm-package-react/1.webp b/public/images/posts/npm-package-react/1.webp
diff --git a/public/images/posts/what-is-github-issues/1.png b/public/images/posts/what-is-github-issues/1.png
diff --git a/public/images/posts/what-is-github-issues/1.webp b/public/images/posts/what-is-github-issues/1.webp
diff --git a/public/images/posts/what-is-github-issues/2.png b/public/images/posts/what-is-github-issues/2.png
diff --git a/public/images/posts/what-is-github-issues/2.webp b/public/images/posts/what-is-github-issues/2.webp
diff --git a/...sts/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly/1.png b/...sts/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly/1.png
diff --git a/...images/posts/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly/1.webp b/...images/posts/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly/1.webp
diff --git a/...sts/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly/2.png b/...sts/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly/2.png
diff --git a/...images/posts/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly/2.webp b/...images/posts/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly/2.webp
diff --git a/...sts/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly/3.png b/...sts/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly/3.png
diff --git a/...images/posts/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly/3.webp b/...images/posts/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly/3.webp
diff --git a/src/components/common/Loading/Loading.jsx b/src/components/common/Loading/Loading.jsx
@@ -12,6 +12,7 @@ export default function Loading({ content }) {
             width={48}
             height={48}
             alt="GitHub GIF loading image"
+            unoptimized
           />
         </div>
         <div className={styles.content}>{content} 불러오는 중...</div>

diff --git a/src/posts/docs/composition-of-javascript.md b/src/posts/docs/composition-of-javascript.md
@@ -19,13 +19,13 @@ tags:
 
 아래 그림은 호스트 환경이 웹 브라우저(클라이언트)일 때 사용할 수 있는 기능을 개괄적으로 보여준다.
 
-![window, JavaScript, DOM, BOM](/public/images/posts/composition-of-javascript/1.png?raw=true)
+![window, JavaScript, DOM, BOM](/public/images/posts/composition-of-javascript/1.webp?raw=true)
 
 ## 1. `window` 객체
 
 ***JavaScript***의 <u>최상위(루트) 객체</u>이자, 모든 객체가 소속된 <u>전역(***Global***)</u> 객체이다. 어디서든 접근이 가능하다고 하여 전역 객체라 불리며, 객체화된 수많은 구성 요소들로 이루어져 있다.
 
-![window object](/public/images/posts/composition-of-javascript/2.png?raw=true)
+![window object](/public/images/posts/composition-of-javascript/2.webp?raw=true)
 
 ### 1-1. 역할
 
@@ -85,11 +85,11 @@ console.log(window.a.id); // 1
 
 ***DOM***은 전체페이지를 노드 계층(Node Tree) 구조의 객체들로 변환하며, ***HTML*** 페이지의 각 부분을 각기 다른 데이터를 포함하는 다양한 타입의 노드로 표현한다.
 
-![Document Object](/public/images/posts/composition-of-javascript/3.png?raw=true)
+![Document Object](/public/images/posts/composition-of-javascript/3.webp?raw=true)
 
 ### 3-1. ***DOM***의 구조 (The ***HTML*** ***DOM*** tree of objects)
 
-![The HTML DOM tree of objects](/public/images/posts/composition-of-javascript/4.png?raw=true)
+![The HTML DOM tree of objects](/public/images/posts/composition-of-javascript/4.webp?raw=true)
 
 노드 종류 | 역할
 :--- | :---
@@ -111,19 +111,19 @@ Comment Node | ***HTML*** 문서의 <u>***Comment***(주석)</u>
 
 `navigator` 객체는 브라우저와 운영체제에 대한 정보를 제공한다. 객체에는 다양한 ***Property***가 있는데, 가장 잘 알려진 ***Property***는 현재 사용 중인 브라우저 정보를 알려주는 `navigator.userAgent`와 브라우저가 실행 중인 운영체제(***Windows***, ***Linux***, ***Mac*** 등) 정보를 알려주는 `navigator.platform`이다. 이는 주로 호환성 문제를 해결하기 위해 사용된다.
 
-![navigator object](/public/images/posts/composition-of-javascript/5.png?raw=true)
+![navigator object](/public/images/posts/composition-of-javascript/5.webp?raw=true)
 
 ### 4-2. `screen`
 
 `screen` 객체는 화면에 대한 정보를 알려준다. 너비(`width`), 높이(`height`), 픽셀(`pixelDepth`), 컬러(`colorDepth`), 화면 방향(`orientation`), 작업표시줄을 제외한 너비와 높이(`availWidth`, `availHeight`) 등이 있다. 화면 크기에 따라 다른 동작을 하고 싶을 때 사용한다.
 
-![screen object](/public/images/posts/composition-of-javascript/6.png?raw=true)
+![screen object](/public/images/posts/composition-of-javascript/6.webp?raw=true)
 
 ### 4-3. `location`
 
 `location` 객체는 ***URL*** 주소에 대한 정보를 제공하여, 현재 ***URL***을 읽을 수 있게 해주고 새로운 ***URL***로 변경(redirect)할 수 있게 해준다.
 
-![location object](/public/images/posts/composition-of-javascript/7.png?raw=true)
+![location object](/public/images/posts/composition-of-javascript/7.webp?raw=true)
 
 ### 4-4. `frames`
 
@@ -135,7 +135,7 @@ Returns the `window` itself, which is an ***array-like object***, listing the di
 
 `history` 객체는 브라우저의 세션 기록, 즉 현재 페이지를 불러온 탭 또는 프레임의 방문 기록을 조작할 수 있는 방법을 제공한다.
 
-![history object](/public/images/posts/composition-of-javascript/8.png?raw=true)
+![history object](/public/images/posts/composition-of-javascript/8.webp?raw=true)
 
 ### 4-6. `XMLHttpRequest`
 

diff --git a/src/posts/docs/convention-of-git-commit-message.md b/src/posts/docs/convention-of-git-commit-message.md
@@ -107,8 +107,8 @@ $ git commit -m "fix: Safari에서 모달을 띄웠을 때 스크롤 이슈 수
 > Resolves: #1137"
 ```
 
-![Ailbaba Fusion commit](/public/images/posts/convention-of-git-commit-message/1.png?raw=true "Ailbaba Fusion commit")
-![NHN tui.calendar commit](/public/images/posts/convention-of-git-commit-message/2.png?raw=true "NHN tui.calendar commit")
+![Ailbaba Fusion commit](/public/images/posts/convention-of-git-commit-message/1.webp?raw=true "Ailbaba Fusion commit")
+![NHN tui.calendar commit](/public/images/posts/convention-of-git-commit-message/2.webp?raw=true "NHN tui.calendar commit")
 
 ## Reference
 

diff --git a/src/posts/docs/difference-between-console-log-and-console-dir.md b/src/posts/docs/difference-between-console-log-and-console-dir.md
@@ -68,28 +68,28 @@ tags:
 
 - `console.log()`: ***HTML*** 형태의 트리구조 출력.
 
-  ![console.log()](/public/images/posts/difference-between-console-log-and-console-dir/1.png?raw=true)
+  ![console.log()](/public/images/posts/difference-between-console-log-and-console-dir/1.webp?raw=true)
 
 - `console.dir()`: ***JSON*** 형태의 트리구조 출력.
 
-  ![console.dir()](/public/images/posts/difference-between-console-log-and-console-dir/2.png?raw=true)
+  ![console.dir()](/public/images/posts/difference-between-console-log-and-console-dir/2.webp?raw=true)
 
 ### 4-2. `document.body` 출력
 
 - `console.log()`: 해당 `<body>`의 요소 출력.
 
-  ![console.log()](/public/images/posts/difference-between-console-log-and-console-dir/3.png?raw=true)
+  ![console.log()](/public/images/posts/difference-between-console-log-and-console-dir/3.webp?raw=true)
 
 - `console.dir()`: 전체 요소 출력.
 
-  ![console.dir()](/public/images/posts/difference-between-console-log-and-console-dir/4.png?raw=true)
+  ![console.dir()](/public/images/posts/difference-between-console-log-and-console-dir/4.webp?raw=true)
 
 ### 4-3. 함수 `a()` 출력
 
 - 함수(객체)도 마찬가지로 출력된다.
 - 만약, `console.log(a());` 및 `console.dir(a());`를 사용할 경우, `()`로 인해 함수를 실행하는 것이 되므로, 둘 다 `true`가 출력된다.
 
-  ![console.log() vs console.dir()](/public/images/posts/difference-between-console-log-and-console-dir/5.png?raw=true)
+  ![console.log() vs console.dir()](/public/images/posts/difference-between-console-log-and-console-dir/5.webp?raw=true)
 
 ## Reference
 

diff --git a/src/posts/docs/difference-between-framework-and-library.md b/src/posts/docs/difference-between-framework-and-library.md
@@ -61,7 +61,7 @@ tags:
 
 ### 2-2. ***React.js***는 프레임워크가 아닌가?
 
-![React 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리](/public/images/posts/difference-between-framework-and-library/1.png?raw=true)
+![React 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리](/public/images/posts/difference-between-framework-and-library/1.webp?raw=true)
 
 ***React***는 프론트엔드 라이브러리이며 프레임워크가 아니다. 하지만, 많은 개발자들이 프레임워크인 것처럼 언급하고 비교한다. 프레임워크의 중요한 특징 중 하나는 바로 '제어의 역전'이다.
 
@@ -77,7 +77,7 @@ tags:
 
 ### 2-3. 그럼 ***Express.js***는?
 
-![Express Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크](/public/images/posts/difference-between-framework-and-library/2.png?raw=true)
+![Express Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크](/public/images/posts/difference-between-framework-and-library/2.webp?raw=true)
 
 홈페이지에 명시된 바와 같이 ***Express.js***는 웹 프레임워크이다. ***Node.js***의 견고한 비동기 통신 지원의 장점을 활용하여 가볍고 빠르며, 쉽게 적용 가능한 웹 앱과 REST API를 쓸 수 있다.
 
@@ -105,7 +105,7 @@ tags:
 
 ### 3-2. 요약
 
-![alt text](/public/images/posts/difference-between-framework-and-library/3.png?raw=true)
+![alt text](/public/images/posts/difference-between-framework-and-library/3.webp?raw=true)
 
 Library | Framework
 :--- | :---

diff --git a/src/posts/docs/everything-about-markdown.md b/src/posts/docs/everything-about-markdown.md
@@ -742,8 +742,8 @@ HTML에서 이용하는 `<!-- -->` 기호를 사용한다.
 
 - 출력
 
-  ![석촌호수 러버덕](/public/images/posts/everything-about-markdown/1.png?raw=true)
-  ![석촌호수 러버덕](/public/images/posts/everything-about-markdown/1.png?raw=true "RubberDuck")
+  ![석촌호수 러버덕](/public/images/posts/everything-about-markdown/1.webp?raw=true)
+  ![석촌호수 러버덕](/public/images/posts/everything-about-markdown/1.webp?raw=true "RubberDuck")
 
 ##### 2-9-1-2. 참조 이미지
 
@@ -773,8 +773,8 @@ HTML에서 이용하는 `<!-- -->` 기호를 사용한다.
   ![석촌호수 러버덕][Ref1]
   ![석촌호수 러버덕][Ref2]
 
-  [Ref1]: /public/images/posts/everything-about-markdown/1.png?raw=true
-  [Ref2]: /public/images/posts/everything-about-markdown/1.png?raw=true "RubberDuck"
+  [Ref1]: /public/images/posts/everything-about-markdown/1.webp?raw=true
+  [Ref2]: /public/images/posts/everything-about-markdown/1.webp?raw=true "RubberDuck"
 
 ##### 2-9-1-3. 이미지에 링크 추가
 
@@ -787,7 +787,7 @@ Markdown style 이미지 문법 코드를 링크 문법 코드로 감싸준다.
   ```
 
 - 출력
-  [![석촌호수 러버덕](/public/images/posts/everything-about-markdown/1.png?raw=true "RubberDuck Wiki")](https://en.wikipedia.org/wiki/Rubber_duck)
+  [![석촌호수 러버덕](/public/images/posts/everything-about-markdown/1.webp?raw=true "RubberDuck Wiki")](https://en.wikipedia.org/wiki/Rubber_duck)
 
 #### 2-9-2. HTML style
 
@@ -802,8 +802,8 @@ Markdown style은 사이즈 조절 기능이 없기 때문에, HTML `<img src=""
 
 - 출력
 
-  <img src="/public/images/posts/everything-about-markdown/1.png?raw=true" width="450px" height="300px" title="px(픽셀) 크기 설정" alt="RubberDuck"></img><br>
-  <img src="/public/images/posts/everything-about-markdown/1.png?raw=true" width="40%" height="30%" title="%(비율) 크기 설정" alt="RubberDuck"></img>
+  <img src="/public/images/posts/everything-about-markdown/1.webp?raw=true" width="450px" height="300px" title="px(픽셀) 크기 설정" alt="RubberDuck"></img><br>
+  <img src="/public/images/posts/everything-about-markdown/1.webp?raw=true" width="40%" height="30%" title="%(비율) 크기 설정" alt="RubberDuck"></img>
 
 ### 2-10. 코드(Code)
 
@@ -1232,9 +1232,9 @@ Markdown style은 사이즈 조절 기능이 없기 때문에, HTML `<img src=""
 
 Color|구문|예시|출력
 :---:|:---:|:---:|:---:
-HEX|`#RRGGBB`|`#0969DA`|![HEX 값 #0969DA 파란색 원으로 표시되는 방법을 보여 주는 렌더링된 GitHub Markdown의 스크린샷.](/public/images/posts/everything-about-markdown/4.png?raw=true)
-RGB|`rgb(R,G,B)`|`rgb(9, 105, 218)`|![RGB 값 9, 105, 218이 파란색 원으로 표시되는 방법을 보여 주는 렌더링된 GitHub Markdown의 스크린샷.](/public/images/posts/everything-about-markdown/5.png?raw=true)
-HSL|`hsl(H,S,L)`|`hsl(212, 92%, 45%)`|![HSL 값 212, 92%, 45%가 파란색 원으로 표시되는 방법을 보여 주는 렌더링된 GitHub Markdown의 스크린샷.](/public/images/posts/everything-about-markdown/6.png?raw=true)
+HEX|`#RRGGBB`|`#0969DA`|![HEX 값 #0969DA 파란색 원으로 표시되는 방법을 보여 주는 렌더링된 GitHub Markdown의 스크린샷.](/public/images/posts/everything-about-markdown/4.webp?raw=true)
+RGB|`rgb(R,G,B)`|`rgb(9, 105, 218)`|![RGB 값 9, 105, 218이 파란색 원으로 표시되는 방법을 보여 주는 렌더링된 GitHub Markdown의 스크린샷.](/public/images/posts/everything-about-markdown/5.webp?raw=true)
+HSL|`hsl(H,S,L)`|`hsl(212, 92%, 45%)`|![HSL 값 212, 92%, 45%가 파란색 원으로 표시되는 방법을 보여 주는 렌더링된 GitHub Markdown의 스크린샷.](/public/images/posts/everything-about-markdown/6.webp?raw=true)
 
 - 입력
 
@@ -1244,7 +1244,7 @@ HSL|`hsl(H,S,L)`|`hsl(212, 92%, 45%)`|![HSL 값 212, 92%, 45%가 파란색 원
 
 - 출력
 
-  ![output](/public/images/posts/everything-about-markdown/7.png?raw=true)
+  ![output](/public/images/posts/everything-about-markdown/7.webp?raw=true)
 
 > [!NOTE]
 >
@@ -1273,7 +1273,7 @@ HSL|`hsl(H,S,L)`|`hsl(212, 92%, 45%)`|![HSL 값 212, 92%, 45%가 파란색 원
 
 - 출력
 
-  ![팀 멘션 "@github/support"을(를) 굵고 클릭 가능한 텍스트로 렌더링하는 방법을 보여 주는 렌더링된 GitHub Markdown의 스크린샷.](/public/images/posts/everything-about-markdown/8.png?raw=true)
+  ![팀 멘션 "@github/support"을(를) 굵고 클릭 가능한 텍스트로 렌더링하는 방법을 보여 주는 렌더링된 GitHub Markdown의 스크린샷.](/public/images/posts/everything-about-markdown/8.webp?raw=true)
 
 ### 3-8. 이슈 및 끌어오기 요청 참조
 
@@ -1323,7 +1323,7 @@ HSL|`hsl(H,S,L)`|`hsl(212, 92%, 45%)`|![HSL 값 212, 92%, 45%가 파란색 원
 
 섹션 제목을 마우스로 가리켜 렌더링된 파일의 섹션에 직접 연결할 수 있다.
 
-![section link](/public/images/posts/everything-about-markdown/10.png?raw=true)
+![section link](/public/images/posts/everything-about-markdown/10.webp?raw=true)
 
 ### 3-11. 상대 링크
 

diff --git a/src/posts/docs/npm-package-react.md b/src/posts/docs/npm-package-react.md
@@ -33,7 +33,7 @@ DOM에서 `react`를 사용하기 위한 라이브러리이다. 웹 인터페이
 
 ## 4. 정리
 
-![react react-dom](/public/images/posts/npm-package-react/1.png?raw=true)
+![react react-dom](/public/images/posts/npm-package-react/1.webp?raw=true)
 
 ## Reference
 

diff --git a/src/posts/docs/what-is-github-issues.md b/src/posts/docs/what-is-github-issues.md
@@ -79,9 +79,9 @@ tags:
 
 대신, ***Github Markdown***의 `- []` 체크리스트 기능만을 이용하여 세부 태스크를 관리하는 것은 가능하다. 제목 바로 아래쪽에서 몇개의 태스크를 진행했는지 상세 진행내역을 확인할 수 있다.
 
-![6 tasks done](/public/images/posts/what-is-github-issues/1.png?raw=true)
+![6 tasks done](/public/images/posts/what-is-github-issues/1.webp?raw=true)
 
-![tasklist](/public/images/posts/what-is-github-issues/2.png?raw=true)
+![tasklist](/public/images/posts/what-is-github-issues/2.webp?raw=true)
 
 ## 4. ***Projects Classic***
 

diff --git a/...s/docs/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly.md b/...s/docs/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly.md
@@ -22,15 +22,15 @@ Favicon은 브라우저가 강하게 캐싱하는 대표적인 파일이기에,
 
 - 개발자 도구를 켜지 않은 경우의 툴팁.
 
-    ![alt text](/public/images/posts/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly/1.png)
+    ![alt text](/public/images/posts/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly/1.webp)
 
 - 개발자 도구를 켠 경우의 툴팁.
 
-    ![alt text](/public/images/posts/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly/2.png)
+    ![alt text](/public/images/posts/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly/2.webp)
 
 - 개발자 도구를 켠 상태로, 마우스 좌측 버튼을 길게 누르고 있는 경우.
 
-    ![alt text](/public/images/posts/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly/3.png)
+    ![alt text](/public/images/posts/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly/3.webp)
 
 ## Reference