Optimize blog images and profile avatar assets

Author: Yusaku01

src/assets/images/blog/learn-cachedir-astro/cache-dir-flow-display.webp

@@ -8,8 +8,8 @@ tags: ['Personal blog', 'cacheDir', 'Astro', 'cache', 'Vite']
 ---
 
 import { Image } from 'astro:assets';
-import cacheDirFlowImage from '../../../assets/images/blog/learn-cachedir-astro/cache-dir-flow.png';
-import generatedFilesMapImage from '../../../assets/images/blog/learn-cachedir-astro/generated-files-map.png';
+import cacheDirFlowImage from '../../../assets/images/blog/learn-cachedir-astro/cache-dir-flow-display.webp';
+import generatedFilesMapImage from '../../../assets/images/blog/learn-cachedir-astro/generated-files-map-display.webp';
 
 In this article, I will learn about Astro's `cacheDir` and cache-related features. Or more accurately, I will organize my understanding of them.
 
@@ -27,6 +27,9 @@ I will basically not cover HTTP cache here. Instead, I will mainly use cache in
   src={cacheDirFlowImage}
   alt="A diagram showing the flow from src through cache to dist, with Hiyao placing notes along the way"
   class="w-full h-auto"
+  loading="eager"
+  fetchpriority="high"
+  decoding="async"
 />
 
 Astro's `cacheDir` is the directory where cache files are stored. By default, they are saved in `node_modules/.astro`.
@@ -59,6 +62,8 @@ For example, when implementing a website, HTML, CSS, JavaScript, image assets, a
   src={generatedFilesMapImage}
   alt="A diagram separating dist as delivery files from .astro, cacheDir, and .vite as development and build working data"
   class="w-full h-auto"
+  loading="lazy"
+  decoding="async"
 />
 
 Some details may differ depending on `astro.config` settings or the package manager being used, but I hope this can be useful as a small cheat sheet.

src/assets/images/blog/learn-cachedir-astro/generated-files-map-display.webp

@@ -8,8 +8,8 @@ tags: ['個人ブログ', 'cacheDir', 'Astro', 'cache', 'Vite']
 ---
 
 import { Image } from 'astro:assets';
-import cacheDirFlowImage from '../../../assets/images/blog/learn-cachedir-astro/cache-dir-flow.png';
-import generatedFilesMapImage from '../../../assets/images/blog/learn-cachedir-astro/generated-files-map.png';
+import cacheDirFlowImage from '../../../assets/images/blog/learn-cachedir-astro/cache-dir-flow-display.webp';
+import generatedFilesMapImage from '../../../assets/images/blog/learn-cachedir-astro/generated-files-map-display.webp';
 
 この記事では、AstroのcacheDirおよびキャッシュに関連する機能？について学びます。というか整理します。
 
@@ -26,6 +26,9 @@ import generatedFilesMapImage from '../../../assets/images/blog/learn-cachedir-a
   src={cacheDirFlowImage}
   alt="srcからcacheを経由してdistへ出力する流れを、ヒヤオが途中メモを置く様子で表した図"
   class="w-full h-auto"
+  loading="eager"
+  fetchpriority="high"
+  decoding="async"
 />
 
 AstroのcacheDirは、キャッシュを保存するディレクトリのことです。デフォルトでは、`node_modules/.astro`に保存されます。
@@ -58,6 +61,8 @@ Astroでプロジェクトを構築する場合、共通で生成・保存され
   src={generatedFilesMapImage}
   alt="distは配信用ファイル、.astroやcacheDirや.viteは開発やビルドの作業用データとして分けて整理した図"
   class="w-full h-auto"
+  loading="lazy"
+  decoding="async"
 />
 
 一部astro.configによる設定や使用するパッケージマネージャーによって異なる部分はあると思いますが、チートシート代わりにお役立ていただければと思います。

src/assets/images/img_profile-avatar.webp

@@ -7,7 +7,7 @@ import PostCard from '../../components/Blog/PostCard.astro';
 import SectionHeading from '../../components/Section/SectionHeading.astro';
 import { getAllBlogPosts } from '../../lib/blog/posts';
 import { localizedPath, siteDescription, uiText } from '../../lib/i18n';
-import myImage from '../../assets/images/img_profile.png';
+import profileAvatarImage from '../../assets/images/img_profile-avatar.webp';
 
 export const transition = { name: 'fade' };
 
@@ -55,11 +55,13 @@ const POSTS_PER_SECTION = 4;
           <div class="flex flex-col md:flex-row gap-4 md:gap-8 items-center">
             <div class="w-32 h-32 rounded-full overflow-hidden flex-shrink-0">
               <Image
-                src={myImage}
+                src={profileAvatarImage}
                 alt={uiText.profile.imageAlt[locale]}
                 class="w-full h-full object-cover"
-                width="128"
-                height="128"
+                width={128}
+                height={128}
+                loading="lazy"
+                decoding="async"
               />
             </div>
             <div class="flex-grow">

src/content/blog/en/learn-cachedir-astro.mdx

@@ -5,7 +5,7 @@ import Layout from '../../layouts/Layout.astro';
 import HeroSection from '../../components/Hero/HeroSection.astro';
 import ProfileSection from '../../components/Profile/ProfileSection.astro';
 import { uiText } from '../../lib/i18n';
-import myImage from '../../assets/images/img_profile.png';
+import profileAvatarImage from '../../assets/images/img_profile-avatar.webp';
 
 export const transition = { name: 'fade' };
 
@@ -28,11 +28,14 @@ const locale = 'en';
               class="w-40 h-40 rounded-full overflow-hidden relative z-10 bg-white dark:bg-gray-700"
             >
               <Image
-                src={myImage}
+                src={profileAvatarImage}
                 alt={uiText.profile.imageAlt[locale]}
                 class="w-full h-full object-cover"
-                width="160"
-                height="160"
+                width={160}
+                height={160}
+                loading="eager"
+                fetchpriority="high"
+                decoding="async"
               />
             </div>
             <div class="text-center md:text-left">

src/content/blog/ja/learn-cachedir-astro.mdx

@@ -15,7 +15,7 @@ const allPosts = await getAllBlogPosts(locale);
 const POSTS_PER_SECTION = 4;
 
 import { Image } from 'astro:assets';
-import myImage from '../assets/images/img_profile.png';
+import profileAvatarImage from '../assets/images/img_profile-avatar.webp';
 ---
 
 <Layout title="SAKUSPACE" locale={locale}>
@@ -57,11 +57,13 @@ import myImage from '../assets/images/img_profile.png';
           <div class="flex flex-col md:flex-row gap-4 md:gap-8 items-center">
             <div class="w-32 h-32 rounded-full overflow-hidden flex-shrink-0">
               <Image
-                src={myImage}
+                src={profileAvatarImage}
                 alt={uiText.profile.imageAlt[locale]}
                 class="w-full h-full object-cover"
-                width="128"
-                height="128"
+                width={128}
+                height={128}
+                loading="lazy"
+                decoding="async"
               />
             </div>
             <div class="flex-grow">

src/pages/en/index.astro

@@ -9,7 +9,7 @@ import { uiText } from '../lib/i18n';
 export const transition = { name: 'fade' };
 
 import { Image } from 'astro:assets';
-import myImage from '../assets/images/img_profile.png';
+import profileAvatarImage from '../assets/images/img_profile-avatar.webp';
 
 const locale = 'ja';
 const profileEntry = await getEntry('profile', 'main');
@@ -40,11 +40,14 @@ const { Content } = await render(profileEntry);
               class="w-40 h-40 rounded-full overflow-hidden relative z-10 bg-white dark:bg-gray-700"
             >
               <Image
-                src={myImage}
+                src={profileAvatarImage}
                 alt={uiText.profile.imageAlt[locale]}
                 class="w-full h-full object-cover"
-                width="160"
-                height="160"
+                width={160}
+                height={160}
+                loading="eager"
+                fetchpriority="high"
+                decoding="async"
               />
             </div>
             <!-- 名前と肩書き -->