How does next/image optimize images for core web vitals?

Explanation & Concept

The `next/image` component automatically: 1. Converts images to modern formats (AVIF/WebP). 2. Resizes images based on device screen sizes using `sizes`. 3. Prevents Cumulative Layout Shift (CLS) by requiring explicit width/height or `fill`. 4. Lazy-loads images by default.

Code Example

typescript

import Image from "next/image";

export function HeroBanner() {
  return (
    <div className="relative h-96 w-full">
      <Image
        src="/hero-banner.jpg"
        alt="Hero visual"
        fill
        priority // Preloads critical above-the-fold image for Largest Contentful Paint (LCP)
        sizes="(max-width: 768px) 100vw, 1200px"
        className="object-cover"
      />
    </div>
  );
}

How It Works & Key Takeaways

Using `priority` on above-the-fold hero banners optimizes the Largest Contentful Paint (LCP) Core Web Vital score.

Mock Test · 1 Questions · Optional

Ready for Incremental Static Regeneration?

Take a quick test to evaluate yourself, or move straight to the next module.

Intermediate1 questions

Skip

Image OptimizationIntermediate

1Question 1 of 1

typescript

How does next/image optimize images for core web vitals?

Explanation & Concept

Code Example

typescript

import Image from "next/image";

export function HeroBanner() {
  return (
    <div className="relative h-96 w-full">
      <Image
        src="/hero-banner.jpg"
        alt="Hero visual"
        fill
        priority // Preloads critical above-the-fold image for Largest Contentful Paint (LCP)
        sizes="(max-width: 768px) 100vw, 1200px"
        className="object-cover"
      />
    </div>
  );
}

How It Works & Key Takeaways

Using `priority` on above-the-fold hero banners optimizes the Largest Contentful Paint (LCP) Core Web Vital score.

Mock Test · 1 Questions · Optional

Ready for Incremental Static Regeneration?

Take a quick test to evaluate yourself, or move straight to the next module.

Intermediate1 questions

Skip