perf(experimental): use avif and reduce transition length

Author: aster-void

src/components/ArticleList.astro

@@ -71,7 +71,7 @@ const articlesWithExcerpts = await Promise.all(
               width={48 * 4 * 4}
               src={article.data.image}
               class:list={[
-                "animate-move w-full rounded-xl object-center",
+                "w-full rounded-xl object-center",
                 additionalProps.imageClassName,
               ]}
             />

src/components/Header.astro

@@ -1,5 +1,5 @@
 ---
-import { ClientRouter } from "astro:transitions";
+import { ClientRouter, fade } from "astro:transitions";
 import { Icon } from "astro-icon/components";
 
 import banner from "../content/banner.ts";
@@ -20,7 +20,7 @@ interface Props {
 const { focus } = Astro.props;
 ---
 
-<ClientRouter />
+<ClientRouter transition:animate={fade({ duration: 30 })} />
 <header class="fixed top-0 z-20 w-full bg-gray-50">
   {
     banner.shown && (

src/pages/members.astro

@@ -1,5 +1,5 @@
 ---
-import { Image } from "astro:assets";
+import { Picture } from "astro:assets";
 import { getCollection } from "astro:content";
 import JoinUsCTA from "../components/JoinUsCTA.astro";
 import GlobalLayout from "../layouts/GlobalLayout.astro";
@@ -17,8 +17,9 @@ const members = (await getCollection("members")).sort(
   description="ut.code(); のメンバーの一覧"
   focus={Focus.members}
 >
-  <Image
+  <Picture
     loading="eager"
+    formats={["avif", "webp"]}
     alt=""
     src={MembersHeader}
     width="1920"
@@ -43,8 +44,8 @@ const members = (await getCollection("members")).sort(
               href={`/members/${member.id}`}
               class="relative block drop-shadow-lg transition-colors duration-150 hover:brightness-110 active:top-0.5"
             >
-              <Image
-                transition:animate="fade"
+              <Picture
+                formats={["avif", "webp"]}
                 transition:name={`member:image:${member.id}`}
                 alt={`${member.data?.nameJa} の写真`}
                 src={member.data.upperBodyImage}