Images resized to max 1200px and compressed to 200KB or less before storage

Uncompressed images are the single most common cause of poor Core Web Vitals scores on directory sites. A listing page that loads 10 unresized user-uploaded photos — each 3–5 MB at 4000px width — produces a Largest Contentful Paint well above Google's 4-second failure threshold, directly lowering the page's performance score and search ranking. iso-25010:2011 performance-efficiency treats resource utilization as a quality attribute: serving a 4.5 MB JPEG when a 180 KB WebP would be equivalent is a measurable resource waste paid by every visitor. Mobile users on constrained bandwidth experience this as a broken product.

Process images with sharp before writing to storage. Resize to max 1200px on the long edge, encode as JPEG at quality 75 (or WebP for better compression), and reject files that exceed 200 KB after processing.

// lib/image-upload.ts
import sharp from 'sharp';

export async function processAndUploadImage(raw: Buffer): Promise<string> {
  const optimized = await sharp(raw)
    .resize(1200, 1200, { fit: 'inside', withoutEnlargement: true })
    .webp({ quality: 75 })
    .toBuffer();

  if (optimized.byteLength > 200 * 1024) {
    throw new Error('Image exceeds 200 KB after compression');
  }

  return uploadToStorage(optimized, 'image/webp');
}

Apply this in the upload API route (src/app/api/listings/[id]/images/route.ts) before any call to S3 or Supabase Storage.