feat: 画像の最適化をした

Yoshino-Yukitaro · Mar 15, 2024 · 9f27244 · 9f27244
1 parent 37047c6
commit 9f27244
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 29 deletions.
diff --git a/public/glaceon.avif b/public/glaceon.avif
diff --git a/public/github-mark.png → src/images/github-mark.png b/public/github-mark.png → src/images/github-mark.png
diff --git a/public/glaceon.png → src/images/glaceon.png b/public/glaceon.png → src/images/glaceon.png
diff --git a/public/qiita.png → src/images/qiita.png b/public/qiita.png → src/images/qiita.png
diff --git a/public/sora_aozora.png → src/images/sora_aozora.png b/public/sora_aozora.png → src/images/sora_aozora.png
diff --git a/public/twitter_like_bird.png → src/images/twitter_like_bird.png b/public/twitter_like_bird.png → src/images/twitter_like_bird.png
diff --git a/src/pages/introduction.astro b/src/pages/introduction.astro
@@ -1,17 +1,19 @@
 ---
 export const prerender = true;
+import { Image } from "astro:assets";
 import Layout from "../layouts/Layout.astro";
+import glaceon from "../images/glaceon.png";
+import twitterLikeBird from "../images/twitter_like_bird.png";
+import soraAozora from "../images/sora_aozora.png";
+import githubMark from "../images/github-mark.png";
+import qiita from "../images/qiita.png";
 ---
 
 <Layout title="自己紹介" description="管理人の自己紹介ページです！">
   <article class="flex flex-col justify-center text-center p-2">
     <h1 class="text-5xl p-10">自己紹介</h1>
     <span class="flex justify-center"
-      ><picture class="align-center">
-        <source srcset="/glaceon.avif" type="image/avif" />
-        <source srcset="/glaceon.png" type="image/png" />
-        <img src="/glaceon.png" alt="ゆっきーのアイコン" width="150px" />
-      </picture>
+      ><Image src={glaceon} alt="ゆっきーのアイコン" width="150" height="150" class="align-center" />
     </span>
     <h3 class="text-4xl p-5">ゆっきー</h3>
     <div>
@@ -24,45 +26,38 @@ import Layout from "../layouts/Layout.astro";
         <li>
           <h3>Twitter</h3>
           <a href="https://twitter.com/Yu_yukk_Y">
-            <img
-              src="/twitter_like_bird.png"
-              alt="twitterアカウント"
-              width="100px"
-              class="m-auto py-8 hover:opacity-50"
-            />
+            <Image src={twitterLikeBird}
+            alt="twitterアカウント"
+            width="100"
+            height="90"
+            class="m-auto py-8 hover:opacity-50" />
           </a>
         </li>
         <li>
           <h3>Bluesky</h3>
           <a href="https://bsky.app/profile/yuyukky.bsky.social">
-            <img
-              src="/sora_aozora.png"
-              alt="Blueskyアカウント"
-              width="100px"
-              class="m-auto py-8 hover:opacity-50"
-            />
+            <Image src={soraAozora} alt="Blueskyアカウント"
+            width="100"
+            height="84"
+            class="m-auto py-8 hover:opacity-50" />
           </a>
         </li>
         <li>
           <h3>Github</h3>
           <a href="https://github.com/Yoshino-Yukitaro" class="text-center">
-            <img
-              src="/github-mark.png"
-              alt="githubアカウント"
-              width="100px"
-              class="m-auto py-8 hover:opacity-50"
-            />
+            <Image src={githubMark} alt="githubアカウント"
+            width="100"
+            height="100"
+            class="m-auto py-8 hover:opacity-50" />
           </a>
         </li>
         <li>
           <h3>Qiita</h3>
           <a href="https://qiita.com/Yu_yukk_Y">
-            <img
-              src="/qiita.png"
-              alt="qiitaアカウント"
-              width="100px"
-              class="m-auto py-8 hover:opacity-50"
-            />
+            <Image src={qiita} alt="qiitaアカウント"
+            width="100"
+            height="100"
+            class="m-auto py-8 hover:opacity-50" />
           </a>
         </li>
       </ul>