Images are not significantly larger than their display size

A product card image with 2000px intrinsic width displayed at 400px wastes 97% of the downloaded pixels and commonly adds 400KB–2MB of avoidable payload. Multiply this across a catalog page with 12 products and users are downloading 5–24MB of image data that serves no visual purpose. Beyond raw bandwidth, the browser must decode every pixel before painting — a CPU-intensive operation that extends Time to Interactive and drains mobile batteries. ISO 25010 performance-efficiency.resource-utilization classifies this pattern as disproportionate resource consumption relative to the output produced.

Resize image files to match their largest display size (no more than 2x for high-DPI screens). Use an image optimization service at build time or serve through a CDN that resizes on demand. The Next.js Image component auto-resizes via Vercel's image optimization pipeline.

// Before — 2000px image displayed at 400px
<img src="/product-original.jpg" style={{ width: '400px' }} />

// After — correctly sized source
<img src="/product-400w.jpg" style={{ width: '400px' }} />

// Next.js — auto-resizes to the width you specify
import Image from 'next/image'
<Image src="/product.jpg" alt="Product" width={400} height={300} />
// Vercel delivers a 400×300 optimized image, not the raw file

// Build-time resize with Sharp
// scripts/optimize-images.ts
import sharp from 'sharp'
await sharp('public/product-original.jpg')
  .resize(400, 300, { fit: 'cover' })
  .webp({ quality: 82 })
  .toFile('public/product-400w.webp')