Next.js Image Optimization

Next.js provides built-in image optimization using the next/image component to deliver responsive, efficient images and improve performance and Core Web Vitals.

• Supports lazy and eager loading for faster page loads.
• Uses caching and custom loaders for efficient delivery.
• Prevents layout shift by reserving image space.
• Enables priority loading and responsive layouts.

Note: <Image /> in Next.js is similar to the HTML <img> element as both accept src and alt, but <Image /> adds automatic optimization, lazy loading, and performance benefits.

Core Web Vitals

Core Web Vitals are performance metrics that measure the loading speed, responsiveness, and visual stability of a web page. Next.js Image Optimization helps improve these metrics by optimizing how images are loaded and displayed.

• Largest Contentful Paint (LCP): Measures how quickly the largest visible content loads.
• Interaction to Next Paint (INP): Measures how quickly the page responds to user interactions.
• Cumulative Layout Shift (CLS): Measures the visual stability of a page by tracking unexpected layout shifts.

Steps to Run Next.js and Use the Image component

Step 1: Create a new Next.js application using the following command:

npx create-next-app@latest my-app

Step 2: Navigate to the project directory:

cd my-app

Step 3: Import the Image component into your page or component:

import Image from "next/image";

Image Optimization

The Image component in Next.js automatically optimizes images added to the application. It also provides various properties to further optimize and control image loading and rendering.

1. Image loading

You can control how an image is loaded using the loading prop. The Image component supports two loading strategies:

• eager: Loads image immediately.
• lazy: By default in the image component. Loading until an image is visible. 

Example:

import Image from "next/image";

const index = () => {
    return (
        <>
            <h1 style={{ color: 'green' }}>GeeksForGeeks</h1>
            <Image src="/gfgg.png" alt="Loading"
                width={500}
                height={550}
                loading="eager"
            />
        </>
    );
};
export default index;

Note: eager is not good for optimization use priority prop instead.

Step to run the application: Run your Next app using the following command:

npm run dev

Output:

2. Priority Prop

Use the priority prop to preload above-the-fold images. This helps improve Largest Contentful Paint (LCP).

Example:

import Image from "next/image";

export default function Home() {
    return (
        <>
            <h1 style={{ color: "green" }}>GeeksForGeeks</h1>
            <Image
                src="/gfgg.png"
                alt="Loading"
                width={500}
                height={550}
                priority
            />
        </>
    );
}

3. Image Sizing

Specifying the width and height props helps prevent Cumulative Layout Shift (CLS) by reserving space for the image before it loads. This improves page stability and user experience.

If you want the image to automatically fill its parent container instead of specifying fixed dimensions, use the fill prop. The parent element must have position: relative and a defined width and height.

Example:

import Image from "next/image";

export default function Home() {
    return (
        <div
            style={{
                position: "relative",
                width: "100%",
                height: "400px",
            }}
        >
            <Image
                src="/gfgg.png"
                alt="Loading"
                fill
                style={{ objectFit: "cover" }}
            />
        </div>
    );
}

Output:

4. ObjectFit Prop

When using the fill prop, you can use the CSS object-fit property to control how the image is resized within its parent container.

Common values of object-fit include:

• contain: Scales the image to fit inside the container while maintaining its aspect ratio.
• cover: Fills the container while maintaining the aspect ratio. Parts of the image may be cropped.
• fill: Stretches the image to fill the container, which may distort its aspect ratio.
• none: Displays the image at its original size without resizing.

Example:

import Image from "next/image";

export default function Home() {
    return (
        <div
            style={{
                position: "relative",
                width: "100%",
                height: "400px",
            }}
        >
            <Image
                src="/gfgg.png"
                alt="Loading"
                fill
                sizes="100vw"
                style={{ objectFit: "contain" }}
            />
        </div>
    );
}

Output:

5. Placeholder Prop

It is used as a fallback image when an image is loading. It is also called a temporary alternative or loading indicator. The placeholder indicates that the image is being loaded.

Placeholder provides two values:

• blur
• empty

Example:

// Placeholder
import Image from "next/image";

export default function Home() {
    return (
        <>
            <h1 style={{ color: "green" }}>GeeksForGeeks</h1>
            <Image
                src="/gfgg.png"
                alt="Loading"
                width={600}
                height={450}
                placeholder="blur"
                blurDataURL="data:image/png;base64,[IMAGE_CODE_FROM_PNG_PIXEL]"
            />
        </>
    );
}

Note: If you're using a statically imported local image, you usually don't need to provide blurDataURL manually. Next.js automatically generates a blur placeholder for supported image formats.

Output:

6. Quality Prop

You can set the image quality by passing a value between 1 and 100 to the quality prop.

In the above image, we can see

"http://localhost:3000/_next/image?url=/gfgg.png&w=640&q=75"

q= 75 which is the default value of quality.

We can adjust the value of quality by using the command like this:

quality={100}

Example:

// Quality of the image
import Image from "next/image";

export default function Home() {
    return (
        <>
            <h1 style={{ color: "green" }}>GeeksForGeeks</h1>
            <Image
                src="/gfgg.png"
                alt="Loading"
                width={500}
                height={550}
                quality={100}
            />
        </>
    );
}

Output: