image optimization. Image resizing client side, index added to db, pagination

frontend/src/components/ItemCard.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { Item } from '../types';
-import { getPublicImageUrl } from '../services/uploadService';
+import { getImageUrl } from '../services/uploadService';
 
 interface ItemCardProps {
   item: Item;
@@ -50,9 +50,18 @@ const ItemCard: React.FC<ItemCardProps> = ({
       <div className="card h-100" style={{ cursor: 'pointer' }}>
         {item.imageFilenames && item.imageFilenames[0] ? (
           <img
-            src={getPublicImageUrl(item.imageFilenames[0])}
+            src={getImageUrl(item.imageFilenames[0], 'thumbnail')}
             className="card-img-top"
             alt={item.name}
+            loading="lazy"
+            onError={(e) => {
+              // Fallback to original for images uploaded before resizing was added
+              const target = e.currentTarget;
+              if (!target.dataset.fallback) {
+                target.dataset.fallback = 'true';
+                target.src = getImageUrl(item.imageFilenames[0], 'original');
+              }
+            }}
             style={{
               height: isCompact ? '150px' : '200px',
               objectFit: 'contain',