画像をwebpに変換

MurakawaTakuya · Jan 7, 2025 · b84ba29 · b84ba29
1 parent 1c7f1e3
commit b84ba29
Show file tree

Hide file tree

Showing 24 changed files with 12 additions and 12 deletions.
diff --git a/public/img/app.png b/public/img/app.png
diff --git a/public/img/app.webp b/public/img/app.webp
diff --git a/public/img/blur.png b/public/img/blur.png
diff --git a/public/img/blur.webp b/public/img/blur.webp
diff --git a/public/img/competition.png b/public/img/competition.png
diff --git a/public/img/competition.webp b/public/img/competition.webp
diff --git a/public/img/completed1.png b/public/img/completed1.png
diff --git a/public/img/completed1.webp b/public/img/completed1.webp
diff --git a/public/img/completed2.png b/public/img/completed2.png
diff --git a/public/img/completed2.webp b/public/img/completed2.webp
diff --git a/public/img/copyGoal.png b/public/img/copyGoal.png
diff --git a/public/img/copyGoal.webp b/public/img/copyGoal.webp
diff --git a/public/img/create.png b/public/img/create.png
diff --git a/public/img/create.webp b/public/img/create.webp
diff --git a/public/img/failed.png b/public/img/failed.png
diff --git a/public/img/failed.webp b/public/img/failed.webp
diff --git a/public/img/notification.jpg b/public/img/notification.jpg
diff --git a/public/img/notification.webp b/public/img/notification.webp
diff --git a/public/img/post.png b/public/img/post.png
diff --git a/public/img/post.webp b/public/img/post.webp
diff --git a/public/img/todoListImage.jpg b/public/img/todoListImage.jpg
diff --git a/public/img/todoListImage.webp b/public/img/todoListImage.webp
diff --git a/src/app/page.module.scss b/src/app/page.module.scss
@@ -49,5 +49,5 @@
   background-color: var(--primary-color);
   color: white;
   margin: 0 2px;
-  padding: 2px 3px 0;
+  padding: 1px 3px 0;
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -33,7 +33,7 @@ export default function Top() {
           <FormatListBulletedIcon className={styles.svg} />
           <StyledTypography level="h1">TODO REAL</StyledTypography>
         </div>
-        <img src="/img/app.png" />
+        <img src="/img/app.webp" />
       </div>
 
       <div>
@@ -42,7 +42,7 @@ export default function Top() {
           やりたいことがつい後回しになってしまったり、毎日続けたいと思っていた習慣が途切れてしまったり…そんな経験はありませんか?
           <br />
           TODO REALはあなたの目標達成・継続を手助けします!
-          <img src="/img/todoListImage.jpg" />
+          <img src="/img/todoListImage.webp" />
           TODO REALでは目標を完了したら写真を投稿することができ、
           <Highlight>
             SNS感覚でTODOリストを使ったり友達と共有できます!
@@ -61,7 +61,7 @@ export default function Top() {
         <StyledTypography level="body-md">
           完了したTODOリストは友達に公開されます。友達に共有することで、達成感を共有できます。
         </StyledTypography>
-        <img src="/img/completed1.png" />
+        <img src="/img/completed1.webp" />
       </div>
 
       <div>
@@ -71,7 +71,7 @@ export default function Top() {
         <StyledTypography level="body-md">
           失敗してもペナルティの無いTODOリストとは異なり、期限内に完了しなかったTODOリストも公開されます。なんて恥ずかしい。
         </StyledTypography>
-        <img src="/img/failed.png" />
+        <img src="/img/failed.webp" />
       </div>
 
       <div>
@@ -82,7 +82,7 @@ export default function Top() {
           5分前になると通知を送信します。通知を受け取ることで、TODOリストの達成を手助けします。
           {/* TODO: 画像を差し替える */}
         </StyledTypography>
-        <img src="/img/notification.jpg" />
+        <img src="/img/notification.webp" />
       </div>
 
       <div>
@@ -94,7 +94,7 @@ export default function Top() {
           <br />
           また、達成率や達成回数で友達と競うこともできます!
         </StyledTypography>
-        <img src="/img/competition.png" />
+        <img src="/img/competition.webp" />
       </div>
 
       <div>
@@ -106,7 +106,7 @@ export default function Top() {
           <br />
           完了投稿をすると投稿ボタンが変化して同じ目標をワンクリックで複製できるように!
         </StyledTypography>
-        <img src="/img/copyGoal.png" />
+        <img src="/img/copyGoal.webp" />
       </div>
 
       <div>
@@ -117,7 +117,7 @@ export default function Top() {
           友達の投稿を表示するには、あなたの完了した目標をシェアしましょう。あなたが最後に投稿した時間より後の目標の画像はモザイクがかかっています。
         </StyledTypography>
         {/* TODO: 正式に実装したら画像を新しくする */}
-        <img src="/img/blur.png" />
+        <img src="/img/blur.webp" />
       </div>
 
       <div>
@@ -130,20 +130,20 @@ export default function Top() {
         <StyledTypography level="body-md">
           画面右下の+ボタンから目標を作成できます。
         </StyledTypography>
-        <img src="/img/create.png" style={{ marginBottom: "15px" }} />
+        <img src="/img/create.webp" style={{ marginBottom: "15px" }} />
 
         <StyledTypography level="h4" component="h3">
           2. 投稿
         </StyledTypography>
         <StyledTypography level="body-md">
           目標を完了したら写真をアップロードして共有しましょう!
         </StyledTypography>
-        <img src="/img/post.png" style={{ marginBottom: "10px" }} />
+        <img src="/img/post.webp" style={{ marginBottom: "10px" }} />
 
         <StyledTypography level="body-md">
           アップロードしたら自動で友達に公開されます!
         </StyledTypography>
-        <img src="/img/completed2.png" />
+        <img src="/img/completed2.webp" />
       </div>
 
       <div>