From 0a44fecbe194ca68c3e27aacc0b21371f3289f66 Mon Sep 17 00:00:00 2001
From: Nick Szaunig <nick.szaunig@encry.de>
Date: Mon, 14 Sep 2026 20:55:50 +0200
Subject: [PATCH] perf: Warenkorb-Miniaturen ueber den Bildoptimierer laden
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Die letzte Stelle, an der ein hochgeladenes Bild noch als rohes <img>
ausgeliefert wurde. Der Warenkorb lud damit fuer JEDE Position das
vollstaendig gespeicherte Bild — bis MAX_IMAGE_DIMENSION Kantenlaenge, also
durchaus ein paar hundert Kilobyte — nur um es auf 64 bzw. 80 Pixel zu
verkleinern. Bei mehreren Positionen summierte sich das spuerbar, gerade im
Mobilfunknetz, und betraf sowohl die Warenkorb-Schublade als auch die
Warenkorbseite.

Der bisherige eslint-disable-Kommentar begruendete das rohe <img> mit einer
"noch unbekannten externen Bildquelle". Das trifft nicht zu: das Bild kommt
aus Product.images[0] und liegt damit immer same-origin unter /uploads/...
(beim Speichern geprueft von isValidUploadPath in lib/uploads.ts).
next/image ist dafuer zustaendig und liefert jetzt eine 80px-Variante statt
der Originaldatei.

Beide Verwendungsstellen bekommen dieselbe leichte Eckenrundung wie die
uebrigen Bilder; vorher war die Schublade rounded-sm und die Warenkorbseite
gar nicht gerundet.
---
 src/app/warenkorb/warenkorb-content.tsx |  2 +-
 src/components/cart-item-thumbnail.tsx  | 15 +++++++++++++--
 src/components/site-chrome.tsx          |  2 +-
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/app/warenkorb/warenkorb-content.tsx b/src/app/warenkorb/warenkorb-content.tsx
index 88e38f4..894fca1 100644
--- a/src/app/warenkorb/warenkorb-content.tsx
+++ b/src/app/warenkorb/warenkorb-content.tsx
@@ -80,7 +80,7 @@ export function WarenkorbContent({
                 const itemStock = stock?.[item.productId];
                 return (
                   <div key={item.productId} className="py-6 flex flex-wrap items-center gap-x-6 gap-y-3">
-                    <CartItemThumbnail image={item.image} className="w-20 h-20 flex-shrink-0" />
+                    <CartItemThumbnail image={item.image} className="w-20 h-20 flex-shrink-0 rounded-lg" />
                     <div className="flex-1 min-w-[160px]">
                       <Link href={`/honig/${item.slug}`} className="text-lg text-forest">
                         {item.name}
diff --git a/src/components/cart-item-thumbnail.tsx b/src/components/cart-item-thumbnail.tsx
index 8405da8..59ead08 100644
--- a/src/components/cart-item-thumbnail.tsx
+++ b/src/components/cart-item-thumbnail.tsx
@@ -1,3 +1,4 @@
+import Image from "next/image";
 import { PlaceholderImage } from "@/components/placeholder-image";
 
 /**
@@ -8,8 +9,18 @@ import { PlaceholderImage } from "@/components/placeholder-image";
 export function CartItemThumbnail({ image, className }: { image: string | null; className: string }) {
   if (image) {
     return (
-      // eslint-disable-next-line @next/next/no-img-element -- externe Bildquelle noch unbekannt, siehe product-gallery.tsx
-      <img src={image} alt="" className={`${className} object-cover`} />
+      // Ueber next/image statt als rohes <img>. Der frueher hier stehende
+      // Hinweis auf eine "noch unbekannte externe Bildquelle" trifft nicht
+      // mehr zu: das Bild kommt aus Product.images[0] und liegt damit immer
+      // same-origin unter /uploads/... (geprueft von isValidUploadPath in
+      // lib/uploads.ts). Als rohes <img> lud der Warenkorb fuer JEDE Position
+      // das vollstaendig gespeicherte Bild — bis MAX_IMAGE_DIMENSION
+      // Kantenlaenge — um es auf 64 bzw. 80 Pixel zu verkleinern. Bei
+      // mehreren Positionen summierte sich das spuerbar, gerade im
+      // Mobilfunknetz.
+      <div className={`relative overflow-hidden ${className}`}>
+        <Image src={image} alt="" fill sizes="80px" className="object-cover" />
+      </div>
     );
   }
   return <PlaceholderImage tone="honey" className={className} />;
diff --git a/src/components/site-chrome.tsx b/src/components/site-chrome.tsx
index 9136081..61cffc2 100644
--- a/src/components/site-chrome.tsx
+++ b/src/components/site-chrome.tsx
@@ -471,7 +471,7 @@ export function CartDrawer() {
                     const itemStock = stock?.[item.productId];
                     return (
                       <li key={item.productId} className="py-4 flex gap-4">
-                        <CartItemThumbnail image={item.image} className="w-16 h-16 flex-shrink-0 rounded-sm" />
+                        <CartItemThumbnail image={item.image} className="w-16 h-16 flex-shrink-0 rounded-lg" />
                         <div className="flex-1">
                           <p className="text-sm font-medium text-ink">{item.name}</p>
                           <p className="text-xs text-ink/65">{item.weightGrams} g</p>