From be5fb32a4a2f6071c8f05e01921ad88fd78bc7a9 Mon Sep 17 00:00:00 2001
From: Nick Szaunig <nick.szaunig@encry.de>
Date: Sun, 13 Sep 2026 23:16:35 +0200
Subject: [PATCH] perf: Admin-Bildvorschauen ueber next/image statt als rohes
 <img>

Die Vorschaukacheln in admin/inhalte, admin/produkte und admin/ernten
luden das vollstaendig gespeicherte Bild, um es auf 80x80 bzw. in einer
Vierer-Rasterkachel darzustellen. Bei einem Produktformular mit mehreren
Bildern summierte sich das zu mehreren Megabyte allein fuer Miniaturen.

Der urspruengliche Kommentar ("next/image lohnt hier nicht") stimmte, als
Uploads klein waren; gespeichert wird inzwischen bis MAX_IMAGE_DIMENSION
Kantenlaenge. Beide Felder rendern die Vorschau jetzt ueber next/image
mit passendem sizes, der Optimierer liefert damit genau die gebrauchte
Groesse. Layout und Bedienung bleiben unveraendert.
---
 src/components/admin-image-field.tsx      | 12 ++++++++++--
 src/components/admin-image-list-field.tsx | 10 ++++++++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/admin-image-field.tsx b/src/components/admin-image-field.tsx
index 3881c82..8382399 100644
--- a/src/components/admin-image-field.tsx
+++ b/src/components/admin-image-field.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Image from "next/image";
 import { useRef, useState, type ChangeEvent } from "react";
 import { useI18n } from "@/i18n/i18n-provider";
 
@@ -56,8 +57,15 @@ export function AdminImageField({ name, label, initialValue }: AdminImageFieldPr
       <input type="hidden" name={name} value={value} />
       <div className="mt-2 flex items-center gap-4">
         {value ? (
-          // eslint-disable-next-line @next/next/no-img-element -- kleine Admin-Vorschau, next/image lohnt hier nicht.
-          <img src={value} alt="" className="h-20 w-20 object-cover border border-ink/10" />
+          // Ueber next/image statt als rohes <img>: gespeichert wird ein Bild
+          // mit bis zu MAX_IMAGE_DIMENSION Kantenlaenge (siehe lib/uploads.ts),
+          // also durchaus ein paar hundert KB. Als rohes <img> laedt die
+          // Admin-Seite dieses Vollbild fuer eine 80x80-Kachel — bei einem
+          // Formular mit mehreren Bildern summiert sich das spuerbar. Der
+          // Optimierer liefert stattdessen genau die gebrauchte Groesse.
+          <div className="relative h-20 w-20 flex-shrink-0 overflow-hidden border border-ink/10">
+            <Image src={value} alt="" fill sizes="80px" className="object-cover" />
+          </div>
         ) : (
           <div className="h-20 w-20 border border-dashed border-ink/20 flex items-center justify-center text-center text-[10px] text-ink/40 px-1">
             {t.adminImageField.none}
diff --git a/src/components/admin-image-list-field.tsx b/src/components/admin-image-list-field.tsx
index 5d1d2b3..fff0d13 100644
--- a/src/components/admin-image-list-field.tsx
+++ b/src/components/admin-image-list-field.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Image from "next/image";
 import { useRef, useState, type ChangeEvent } from "react";
 import { useI18n } from "@/i18n/i18n-provider";
 
@@ -67,8 +68,13 @@ export function AdminImageListField({ name, label, initialValues }: AdminImageLi
         <div className="mt-2 grid grid-cols-4 gap-3">
           {images.map((src, i) => (
             <div key={`${i}-${src}`} className="relative">
-              {/* eslint-disable-next-line @next/next/no-img-element -- kleine Admin-Vorschau, next/image lohnt hier nicht. */}
-              <img src={src} alt="" className="aspect-square w-full object-cover border border-ink/10" />
+              {/* Ueber next/image statt als rohes <img> — siehe Begruendung in
+                  admin-image-field.tsx. Hier wiegt es schwerer, weil ein
+                  Produkt mehrere Bilder tragen kann und sonst JEDES davon in
+                  voller Groesse fuer eine Miniatur geladen wuerde. */}
+              <div className="relative aspect-square w-full overflow-hidden border border-ink/10">
+                <Image src={src} alt="" fill sizes="160px" className="object-cover" />
+              </div>
               <button
                 type="button"
                 onClick={() => removeAt(i)}