feat: 画像の最適化

Yoshino-Yukitaro · Sep 16, 2024 · 502e352 · 502e352
1 parent 54b857d
commit 502e352
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 13 deletions.
diff --git a/src/content/post/4sdndar2n.mdx b/src/content/post/4sdndar2n.mdx
@@ -6,13 +6,14 @@ link: https://yukky-sandbox.dev/post/4sdndar2n
 pubDate: "2023-12-03"
 ---
 
-import { Image } from "astro:assets";
+import { Picture } from "astro:assets";
 import buildSystemVersionPng from "../../images/post/4sdndar2n/_build_system_version.png";
 
 Cloudflareでbunが使えないと思ってnカ月。。原因は`Build System Version`が1のままなことでした。。。
 
-<Image
+<Picture
   src={buildSystemVersionPng}
+  formats={["avif", "webp"]}
   alt="Build System Versionが1のままだった"
   width={974}
   height={405}

diff --git a/src/content/post/m2juo4dy7c.mdx b/src/content/post/m2juo4dy7c.mdx
@@ -6,9 +6,9 @@ link: https://yukky-sandbox.dev/post/m2juo4dy7c
 pubDate: "2023-02-01"
 ---
 
-import { Image } from "astro:assets";
-import successPinPng from "../../images/_google_map_pin2.png";
-import failedPinPng from "../../images/_google_map_pin.png";
+import { Picture } from "astro:assets";
+import successPinPng from "../../images/post/m2juo4dy7c/_google_map_pin2.png";
+import failedPinPng from "../../images/post/m2juo4dy7c/_google_map_pin.png";
 
 ## 初めに
 
@@ -77,8 +77,9 @@ export default Map
 
 ### 動かなかった場合の実行結果
 
-<Image
+<Picture
   src={failedPinPng}
+  formats={["avif", "webp"]}
   alt="ピンが表示されていない"
   width={1492}
   height={602}
@@ -141,7 +142,8 @@ export default Map
 
 ### 動いた場合の実行結果
 
-<Image
+<Picture
+  formats={["avif", "webp"]}
   src={successPinPng}
   alt="ピンが表示された"
   width={1498}

diff --git a/src/pages/introduction.astro b/src/pages/introduction.astro
@@ -1,6 +1,6 @@
 ---
 export const prerender = true;
-import { Image } from "astro:assets";
+import { Picture } from "astro:assets";
 import Layout from "../layouts/Layout.astro";
 import glaceon from "../images/glaceon.png";
 import twitterLikeBird from "../images/twitter_like_bird.png";
@@ -13,7 +13,7 @@ import qiita from "../images/qiita.png";
   <article class="flex flex-col justify-center text-center p-2">
     <h1 class="text-5xl p-10 dark:text-white">自己紹介</h1>
     <span class="flex justify-center"
-      ><Image src={glaceon} alt="ゆっきーのアイコン" width="150" height="150" class="align-center" fetchpriority="high" decoding="async" loading="eager" />
+      ><Picture src={glaceon} formats={['avif', 'webp']} alt="ゆっきーのアイコン" width="150" height="150" class="align-center" fetchpriority="high" decoding="async" loading="eager" />
     </span>
     <h3 class="text-4xl p-5 dark:text-white">ゆっきー</h3>
     <div>
@@ -26,7 +26,8 @@ import qiita from "../images/qiita.png";
         <li>
           <h3>Twitter</h3>
           <a href="https://twitter.com/Yu_yukk_Y">
-            <Image src={twitterLikeBird}
+            <Picture src={twitterLikeBird}
+            formats={['avif', 'webp']}
             alt="twitterアカウント"
             width="100"
             height="90"
@@ -36,7 +37,8 @@ import qiita from "../images/qiita.png";
         <li>
           <h3>Bluesky</h3>
           <a href="https://bsky.app/profile/yuyukky.bsky.social">
-            <Image src={soraAozora} alt="Blueskyアカウント"
+            <Picture src={soraAozora} alt="Blueskyアカウント"
+            formats={['avif', 'webp']}
             width="100"
             height="84"
             class="m-auto py-8 hover:opacity-50" decoding="async" loading="eager" />
@@ -45,7 +47,8 @@ import qiita from "../images/qiita.png";
         <li>
           <h3>Github</h3>
           <a href="https://github.com/Yoshino-Yukitaro" class="text-center">
-            <Image src={githubMark} alt="githubアカウント"
+            <Picture src={githubMark} alt="githubアカウント"
+            formats={['avif', 'webp']}
             width="100"
             height="100"
             class="m-auto py-8 hover:opacity-50" decoding="async" loading="eager" />
@@ -54,7 +57,8 @@ import qiita from "../images/qiita.png";
         <li>
           <h3>Qiita</h3>
           <a href="https://qiita.com/Yu_yukk_Y">
-            <Image src={qiita} alt="qiitaアカウント"
+            <Picture src={qiita} alt="qiitaアカウント"
+            formats={['avif', 'webp']}
             width="100"
             height="100"
             class="m-auto py-8 hover:opacity-50" decoding="async" loading="eager" />