Next.js Image Optimization Tips You Should Know

This is part of the AI Automation Engineer Roadmap series.

TL;DR

Use the priority prop for LCP images, set proper sizes, add blur placeholders, and configure remote domains to get automatic format conversion and responsive serving for free.

Why This Matters

Your Next.js site ships large, unoptimized images. The hero banner loads as a 2MB PNG, below-the-fold images load eagerly, and Lighthouse flags your LCP as slow. You know next/image helps, but the default settings leave performance on the table.

Images frequently dominate page weight, especially on marketing pages, blog indexes, and project galleries. That means image handling affects:

• ›Largest Contentful Paint
• ›bandwidth usage
• ›mobile loading speed
• ›Core Web Vitals
• ›how polished the site feels

The good news is that Next.js solves a lot of this automatically. The bad news is that automatic optimization only works well if you provide the right inputs.

Tip 1: Mark LCP Images with priority

import Image from "next/image";
 
// Hero image - above the fold, critical for LCP
<Image
  src="/hero.jpg"
  alt="Hero banner"
  width={1200}
  height={600}
  priority // Disables lazy loading, adds preload link
/>

Only use priority on the largest above-the-fold image. Using it everywhere defeats lazy loading.

Use priority for:

• ›hero images
• ›main article banners if they are above the fold
• ›the image most likely to become LCP

Do not use it for:

• ›every card image
• ›gallery thumbnails
• ›below-the-fold media

Tip 2: Set Accurate sizes

// Without sizes: browser downloads the largest image
<Image src="/card.jpg" alt="Card" width={800} height={400} />
 
// With sizes: browser picks the right size for the viewport
<Image
  src="/card.jpg"
  alt="Card"
  width={800}
  height={400}
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
/>

Without sizes, the browser assumes the image is full-viewport width and downloads an oversized version.

This is one of the most commonly missed optimizations. If you use responsive layouts and omit sizes, the browser often downloads more image than the layout actually needs.

Tip 3: Use Blur Placeholders Strategically

// Static import - blur works automatically
import heroImg from "@/public/hero.jpg";
<Image src={heroImg} alt="Hero" placeholder="blur" />
 
// Remote image - provide a tiny base64 placeholder
<Image
  src="https://cdn.example.com/photo.jpg"
  alt="Photo"
  width={600}
  height={400}
  placeholder="blur"
  blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRg..."
/>

Blur placeholders improve perceived performance and make transitions feel smoother, especially on slower networks. They also help maintain layout stability when image dimensions are known.

Use them for:

• ›article covers
• ›portfolio thumbnails
• ›product cards

Do not overthink them for tiny icons or decorative assets where the effect is negligible.

Tip 4: Configure Remote Image Sources Correctly

// next.config.ts
const config: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "cdn.example.com",
        pathname: "/images/**",
      },
    ],
  },
};

If you load remote images, configuration is part of correctness, not just optimization. Without it, the app may fail to optimize the image at all.

This is also where teams should stay strict. Allow only the domains or URL patterns you actually need.

Tip 5: Always Preserve Dimensions or Aspect Ratio

One of the easiest ways to cause layout shift is to render images without a stable box.

Good patterns:

• ›provide explicit width and height
• ›use static imports when possible
• ›preserve aspect ratio in container-based layouts

Even when the image itself loads lazily, the page should already know how much space to reserve.

Tip 6: Choose the Right Image for the Right Surface

Not every image on the site deserves the same treatment.

Examples:

• ›use high-quality hero assets sparingly
• ›use compressed thumbnails for content grids
• ›avoid shipping giant originals to small cards
• ›prefer SVG for simple logos and icons when appropriate

The performance win often comes from choosing a more appropriate source asset before next/image does any processing.

Common Mistakes

Using priority Too Often

This turns off lazy loading and can make the initial page load heavier, which defeats the point.

Omitting sizes on Responsive Images

This is one of the biggest silent performance mistakes in Next.js image usage.

Loading Unbounded Remote Images

If remote image patterns are too broad, you make it easier to accidentally ship oversized or unexpected assets.

Treating next/image as a Magic Fix

The component helps a lot, but it does not compensate for poor source assets, missing layout constraints, or weak responsive strategy.

Practical Optimization Workflow

If you want a simple image performance checklist:

1. ›identify the likely LCP image
2. ›mark only that image with priority
3. ›define realistic sizes for responsive layouts
4. ›preserve dimensions or aspect ratio
5. ›compress and crop source images appropriately
6. ›verify improvements in Lighthouse and real-device testing

That workflow catches most of the high-value issues without turning image optimization into a rabbit hole.

Why This Works

The next/image component generates multiple image sizes at build time and serves the optimal format (WebP or AVIF) based on the browser's Accept header. The sizes attribute tells the browser which image to download before layout is computed. The priority prop injects a <link rel="preload"> tag in the document head, starting the download before React hydrates. Blur placeholders reserve the exact space in layout, preventing Cumulative Layout Shift.

Final Takeaway

next/image gives you strong defaults, but the real gains come from using it intentionally. Set priority only where it matters, define sizes honestly, preserve layout stability, and treat source-asset choice as part of performance work, not something separate from it.