feat : update

app/admin/[character]/[page]/page.tsx

@@ -75,7 +75,7 @@ export default async function StructuredEditorPage({
             <ArrowLeftIcon />
           </Button>
           <div className="relative size-16 shrink-0 overflow-hidden rounded-lg border">
-            <Image src={guide.coverUrl} alt={guide.name} fill className="object-cover" />
+            <Image src={guide.coverUrl} alt={guide.name} fill sizes="64px" className="object-cover" />
           </div>
           <div className="min-w-0">
             <p className="text-sm text-muted-foreground">{guide.name}</p>

app/admin/[character]/page.tsx

@@ -23,6 +23,8 @@ const sections = [
   { slug: "team", title: "Team Calc", description: "ตัวละคร 4 ตัว Damage share, DPS และ Combo" },
 ];
 
+export const instant = false;
+
 export default async function GuideOverviewPage({ params }: { params: Promise<{ character: string }> }) {
   await connection();
   if (!(await getAdminSession())) redirect("/admin/login");
@@ -42,7 +44,7 @@ export default async function GuideOverviewPage({ params }: { params: Promise<{
             <ArrowLeftIcon />
           </Button>
           <div className="relative size-16 overflow-hidden rounded-lg border">
-            <Image src={guide.coverUrl} alt={guide.name} fill className="object-cover" />
+            <Image src={guide.coverUrl} alt={guide.name} fill sizes="64px" className="object-cover" />
           </div>
           <div className="min-w-0 flex-1">
             <p className="text-sm text-muted-foreground">เลือกส่วนที่ต้องการแก้ไข</p>

app/admin/page.tsx

@@ -10,6 +10,8 @@ import {
 } from "@/lib/catalog/sync";
 import { listGuideCards } from "@/lib/guides/queries";
 
+export const instant = false;
+
 export default async function AdminPage() {
   await connection();
   if (!(await getAdminSession())) redirect("/admin/login");

components/admin/guide-section-editor.tsx

@@ -451,6 +451,7 @@ function CatalogPicker({
             src={selected.imageUrl}
             alt=""
             fill
+            sizes="40px"
             className="object-contain"
           />
         </div>
@@ -491,6 +492,7 @@ function CatalogPicker({
                       src={item.imageUrl}
                       alt=""
                       fill
+                      sizes="32px"
                       className="object-contain"
                     />
                   </div>
@@ -1336,6 +1338,7 @@ function WeaponEditor({ guide, weapons, characters, initial }: EditorBase) {
                                   src={selectedWeapon.imageUrl}
                                   alt=""
                                   fill
+                                  sizes="40px"
                                   className="object-contain"
                                 />
                               </div>
@@ -3840,7 +3843,7 @@ function ExtraCatalogItemsEditor({
                           <CardContent className="flex items-center gap-3">
                             {item ? (
                               <div className={cn("relative size-12 shrink-0 overflow-hidden rounded-md", rarityGradientClass(item.rarity))}>
-                                <Image src={item.imageUrl} alt="" fill className="object-contain" />
+                                <Image src={item.imageUrl} alt="" fill sizes="48px" className="object-contain" />
                               </div>
                             ) : null}
                             <div className="min-w-0 flex-1">

components/public/material-poster.tsx

@@ -147,6 +147,7 @@ export function MaterialPoster({
             src={characterArtUrl}
             alt={character.name}
             fill
+            unoptimized
             sizes={`${artworkImageSize}px`}
             quality={POSTER_IMAGE_QUALITY}
             className="object-contain object-center"
@@ -158,6 +159,7 @@ export function MaterialPoster({
               src={characterArtUrl}
               alt=""
               fill
+              unoptimized
               sizes={`${artworkImageSize}px`}
               quality={POSTER_IMAGE_QUALITY}
               className="object-contain object-center"

components/public/structured-guide.tsx

@@ -119,6 +119,7 @@ export function StructuredGuideShell({
               src={guide.coverUrl}
               alt={guide.name}
               fill
+              sizes="44px"
               className="object-cover"
             />
           </div>
@@ -217,6 +218,7 @@ function GuideOverview({
             src={guide.coverUrl}
             alt={`ไกด์ ${guide.name}`}
             fill
+            sizes="(min-width: 1280px) 600px, (min-width: 1024px) calc(50vw - 44px), calc(100vw - 32px)"
             priority
             className="object-cover"
           />

components/public/team-search.tsx

@@ -276,6 +276,7 @@ function TeamCard({
                     alt={member.character.name}
                     fill
                     loading={exporting ? "eager" : undefined}
+                    sizes="(min-width: 1280px) 184px, (min-width: 640px) 16vw, 25vw"
                     className="object-contain"
                   />
                 </div>
@@ -304,6 +305,7 @@ function TeamCard({
                         alt={member.weapon.name}
                         fill
                         loading={exporting ? "eager" : undefined}
+                        sizes="(min-width: 1280px) 86px, (min-width: 640px) 8vw, 12.5vw"
                         className="object-contain p-1"
                       />
                       <Kbd className="absolute top-0 right-0 h-3 min-w-3 bg-transparent p-0 text-white">