Use next/image Instead of Raw img Tags

// ❌ Full-size image downloaded on every device, causes layout shift
export default function ProductCard({ product }) {
  return (
    <div>
      <img src={product.imageUrl} alt={product.name} />
      <h3>{product.name}</h3>
    </div>
  )
}
 
// ❌ CSS background images skip all optimization
<div style={{ backgroundImage: `url(${hero.url})` }} />
 
// ❌ Eager loading large images in below-the-fold content
<img src="/huge-banner.jpg" alt="Banner" loading="eager" />

import Image from 'next/image'
 
// ✅ Local images — dimensions inferred automatically
export default function ProductCard({ product }) {
  return (
    <div>
      <Image
        src={product.imageUrl}
        alt={product.name}
        width={400}
        height={300}
        sizes="(max-width: 768px) 100vw, 400px"
      />
      <h3>{product.name}</h3>
    </div>
  )
}
 
// ✅ Hero/LCP images — set priority to preload
<Image
  src="/hero.jpg"
  alt="Welcome to our store"
  width={1200}
  height={600}
  priority              // Preloads the image, disables lazy loading
  sizes="100vw"
  placeholder="blur"    // Shows blurred version while loading
  blurDataURL={blurHash} // Base64 blur placeholder
/>
 
// ✅ Fill mode for unknown dimensions (e.g., user uploads)
<div className="relative aspect-video">
  <Image
    src={user.avatarUrl}
    alt={user.name}
    fill
    className="object-cover"
    sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
  />
</div>

// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'images.example.com',
        pathname: '/uploads/**',
      },
    ],
  },
}

# Find raw img tags that should use next/image
grep -rn "<img " src/ --include="*.tsx" --include="*.jsx" | grep -v "node_modules"
# Find Image components missing sizes prop
grep -rn "<Image" src/ --include="*.tsx" -A 5 | grep -B 3 "width=" | grep -L "sizes="