perf: Warenkorb-Miniaturen ueber den Bildoptimierer laden
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.
This commit is contained in:
1 parent
02d493dede
commit
0a44fecbe1
3 files changed
+15
-4
No files matched your search
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user