feat : update

components/public/material-poster.tsx

@@ -21,6 +21,10 @@ type PosterCharacter = {
   leveling: Array<Omit<CatalogAscensionGroup, "items"> & { items: PosterMaterial[] }>;
 };
 
+const POSTER_EXPORT_WIDTH = 1600;
+const POSTER_IMAGE_QUALITY = 100;
+const MAX_OPTIMIZED_IMAGE_WIDTH = 3840;
+
 const statLabels: Record<string, string> = {
   hp: "HP",
   atk: "ATK",
@@ -77,6 +81,10 @@ export function MaterialPoster({
   const materials = mergePosterMaterials(
     [...character.ascension, ...character.leveling].flatMap((group) => group.items),
   );
+  const artworkImageSize = Math.min(
+    MAX_OPTIMIZED_IMAGE_WIDTH,
+    Math.max(POSTER_EXPORT_WIDTH, Math.ceil(POSTER_EXPORT_WIDTH * artworkScale / 100)),
+  );
   const background = `linear-gradient(180deg, ${topColors[0]} 0%, ${topColors[1]} 22%, rgba(0,0,0,0) 42%, rgba(0,0,0,0) 62%, ${bottomColors[0]} 88%, ${bottomColors[1]} 100%)`;
 
   function handlePointerDown(event: PointerEvent<HTMLDivElement>) {
@@ -120,7 +128,8 @@ export function MaterialPoster({
           src={character.nameCardImageUrl}
           alt=""
           fill
-          sizes="(min-width: 1024px) 800px, 100vw"
+          sizes={`${POSTER_EXPORT_WIDTH}px`}
+          quality={POSTER_IMAGE_QUALITY}
           className="object-cover opacity-75"
           priority={!interactive}
         />
@@ -135,7 +144,8 @@ export function MaterialPoster({
             src={characterArtUrl}
             alt={character.name}
             fill
-            sizes="(min-width: 1024px) 800px, 100vw"
+            sizes={`${artworkImageSize}px`}
+            quality={POSTER_IMAGE_QUALITY}
             className="object-contain object-center"
             priority={!interactive}
           />
@@ -145,7 +155,8 @@ export function MaterialPoster({
               src={characterArtUrl}
               alt=""
               fill
-              sizes="(min-width: 1024px) 800px, 100vw"
+              sizes={`${artworkImageSize}px`}
+              quality={POSTER_IMAGE_QUALITY}
               className="object-contain object-center"
               style={{ opacity: Math.max(0, Math.min(100, layer.amount)) / 100, mixBlendMode: layer.blendMode }}
             />
@@ -156,7 +167,8 @@ export function MaterialPoster({
         src="/img/mat/fade.png"
         alt=""
         fill
-        sizes="(min-width: 1024px) 800px, 100vw"
+        sizes={`${POSTER_EXPORT_WIDTH}px`}
+        quality={POSTER_IMAGE_QUALITY}
         className="pointer-events-none object-cover opacity-50"
         priority={!interactive}
       />
@@ -185,6 +197,7 @@ export function MaterialPoster({
                       alt=""
                       width={64}
                       height={64}
+                      quality={POSTER_IMAGE_QUALITY}
                       className="size-[3.5cqw] shrink-0 object-contain brightness-0 invert"
                     />
                   ) : null}
@@ -204,7 +217,7 @@ export function MaterialPoster({
           {materials.map((material, index) => (
             <div key={`${material.key}-${index}`} className="aspect-[0.72] overflow-hidden rounded-[1.3cqw] bg-black/95 ring-1 ring-white/10">
               <div className="flex h-[68%] items-center justify-center rounded-br-[1.3cqw] bg-[#c1c1c1] p-[8%]">
-                {material.imageUrl ? <Image src={material.imageUrl} alt="" width={96} height={96} className="size-full object-contain" /> : null}
+                {material.imageUrl ? <Image src={material.imageUrl} alt="" width={192} height={192} quality={POSTER_IMAGE_QUALITY} className="size-full object-contain" /> : null}
               </div>
               <div className="flex h-[32%] items-center justify-center px-[4%] text-center text-[2.2cqw] leading-none">
                 <span className="whitespace-nowrap text-[1.8cqw]">×{material.amount.toLocaleString("en-US")}</span>

next.config.ts

@@ -14,6 +14,7 @@ const nextConfig: NextConfig = {
   allowedDevOrigins: ["astral"],
   output: "standalone",
   images: {
+    qualities: [75, 100],
     remotePatterns: [
       { protocol: "https", hostname: "buzz-cdn.astrxl.dev", pathname: "/**" },
     ],