Image Optimisation with next/image | Next.js 15

Why next/image?

Using a plain HTML <img> tag leads to large files and CLS (Cumulative Layout Shift) issues that hurt Core Web Vitals. next/image solves all of this automatically:

✅ Automatic WebP/AVIF conversion — reduces file size by 30–50%
✅ Lazy loading — images load only when they scroll into view
✅ CLS prevention — dimensions are reserved in advance
✅ Responsive — generates the right size for each screen

Local Images

import Image from "next/image";
import profilePhoto from "@/public/profile.jpg"; // auto-detects size

export default function Profile() {
  return (
    <Image
      src={profilePhoto}
      alt="My profile photo"
      // width & height are inferred from the import
    />
  );
}

Remote Images

// next.config.ts — you must allow the remote host first
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "images.unsplash.com",
      },
    ],
  },
};

// In your component
<Image
  src="https://images.unsplash.com/photo-xxx"
  alt="Description"
  width={800}
  height={600}
/>

fill Prop for Full-Coverage Images

<div className="relative h-64 w-full">
  <Image
    src="/hero.jpg"
    alt="Hero image"
    fill
    className="object-cover"
    priority  // Add this for images visible on first paint (LCP)
  />
</div>

💡 Tip: Add priority to images that are visible above the fold. This tells Next.js to preload them and improves your Largest Contentful Paint (LCP) score.

Önemli Noktalar

next/image provides automatic WebP conversion, lazy loading and CLS prevention
Remote images need remotePatterns permission in next.config.ts
Use fill for images that should cover their parent container
Add priority to above-the-fold images to improve LCP