feat: add responsive images with srcset support for optimized loading

- Add widths and sizes props to Image component
- Update PostCard, Profile, Banner, AnimeCard, and post pages with responsive images
- Generated images stored in dist/ which is gitignored

Author: matsuzaka-yuki

src/components/atoms/Image/Image.astro

@@ -10,6 +10,8 @@ interface Props {
 	basePath?: string;
 	loading?: "eager" | "lazy";
 	fetchpriority?: "high" | "low" | "auto";
+	widths?: number[];
+	sizes?: string;
 }
 
 import { Image as AstroImage } from "astro:assets";
@@ -24,6 +26,8 @@ const {
 	basePath = "/",
 	loading = "lazy",
 	fetchpriority,
+	widths,
+	sizes,
 } = Astro.props;
 const className = Astro.props.class;
 
@@ -79,6 +83,8 @@ const referrerPolicy = !isLocal && isBilibiliImage ? "no-referrer" : undefined;
 				style={imageStyle}
 				loading={loading}
 				fetchpriority={fetchpriority}
+				widths={widths}
+				sizes={sizes}
 			/>
 		)
 	}

src/components/features/anime/AnimeCard.astro

@@ -45,6 +45,8 @@ const progressPercent =
 				src={anime.cover}
 				alt={anime.title}
 				class="w-full h-full object-cover transition-transform duration-200 group-hover:scale-110"
+				widths={[200, 400, 600]}
+				sizes="(max-width: 640px) 50vw, (max-width: 1024px) 25vw, 20vw"
 			/>
 			<div
 				class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"

src/components/features/posts/PostCard.astro

@@ -157,6 +157,8 @@ const { remarkPluginFrontmatter } = await render(entry);
 					basePath={getFileDirFromPath(entry.filePath || "")}
 					alt="Cover Image of the Post"
 					class="w-full h-full"
+					widths={[200, 400, 800]}
+					sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
 				/>
 			</a>
 		)

src/components/layout/Banner.astro

@@ -98,6 +98,8 @@ const hasBannerLink = !!siteConfig.banner.credit.url;
 										position={siteConfig.banner.position}
 										loading={index === 0 ? "eager" : "lazy"}
 										fetchpriority={index === 0 ? "high" : undefined}
+										widths={[640, 1024, 1536]}
+										sizes="100vw"
 									/>
 								)}
 								<!-- 桌面端/平板端：使用桌面端专用图片 -->
@@ -117,6 +119,8 @@ const hasBannerLink = !!siteConfig.banner.credit.url;
 										position={siteConfig.banner.position}
 										loading={index === 0 ? "eager" : "lazy"}
 										fetchpriority={index === 0 ? "high" : undefined}
+										widths={[1024, 1536, 2048, 2560]}
+										sizes="100vw"
 									/>
 								)}
 							</li>

src/components/widgets/profile/Profile.astro

@@ -28,6 +28,8 @@ import { i18n } from "../../../i18n/translation";
 			src={profileConfig.avatar || ""}
 			alt="Profile Image of the Author"
 			class="mx-auto lg:w-full h-full lg:mt-0"
+			widths={[96, 192, 384]}
+			sizes="(max-width: 1024px) 192px, 128px"
 		/>
 	</a>
 	<div class="px-2">

src/pages/[permalink].astro

@@ -218,6 +218,8 @@ const jsonLd = {
 							src={entry.data.image}
 							basePath={getFileDirFromPath(entry.filePath || "")}
 							class="mb-8 rounded-xl banner-container onload-animation"
+							widths={[640, 1024, 1536, 2048]}
+							sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1200px"
 						/>
 					</>
 				)

src/pages/posts/[...slug].astro

@@ -280,6 +280,8 @@ const jsonLd = {
 							src={entry.data.image}
 							basePath={getFileDirFromPath(entry.filePath || "")}
 							class="mb-8 rounded-xl banner-container onload-animation"
+							widths={[640, 1024, 1536, 2048]}
+							sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1200px"
 						/>
 					</>
 				)