Merge pull request #95 from Yoshino-Yukitaro/develop

feat: 画像の最適化をした

src/layouts/Layout.astro

@@ -35,7 +35,8 @@ const { title, description, ogType } = Astro.props;
     <meta name="theme-color" content="#ffffff" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Reggae+One&display=swap&text=ゆっきーの砂場" rel="stylesheet">
+    <link rel="preload" as="style" fetchpriority="high" href="https://fonts.googleapis.com/css2?family=Reggae+One&display=swap&text=ゆっきーの砂場" >
+    <link href="https://fonts.googleapis.com/css2?family=Reggae+One&display=swap&text=ゆっきーの砂場" rel="stylesheet" media="print" onload='this.media="all"'>
     <script>
       if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
         document.documentElement.classList.add('dark')

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" fetchpriority="high" />
     </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>