# Image Component in Next.js

# Key Features of Next.js Image Component

The Next.js Image component extends the HTML `<img>` element with automatic optimization:

* **Size Optimization**: Automatically serves correctly sized images for each device using modern formats like WebP
    
* **Visual Stability**: Prevents layout shift when images load
    
* **Faster Page Loads**: Images only load when they enter the viewport (lazy loading)
    
* **Asset Flexibility**: On-demand resizing works with remote images too
    

# Using the Image Component

## Basic Usage

```javascript
import Image from "next/image";
```

## Local Images

For local images, import the image file directly:

```javascript
import Image from "next/image";
import profilePic from "./me.png";

export default function Page() {
  return (
    <Image
      src={profilePic}
      alt="Picture of the author"
      // width and height are automatically provided
      // blurDataURL is automatically provided
      // placeholder="blur" // Optional blur-up while loading
    />
  );
}
```

Next.js automatically determines the width and height from the imported file, which helps prevent layout shift.

## Remote Images

For remote images, provide the URL as a string and manually specify width and height:

```javascript
import Image from "next/image";

export default function Page() {
  return (
    <Image
      src="https://s3.amazonaws.com/my-bucket/profile.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  );
}
```

For security, you must define allowed remote image sources in your Next.js config:

```javascript
// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "s3.amazonaws.com",
        pathname: "/my-bucket/**",
      },
    ],
  },
};
```

# The Priority Property for LCP Images

This is important: You should add the `priority` property to the image that will be the Largest Contentful Paint (LCP) element on each page.

```javascript
<Image src={heroImage} alt="Hero image" priority />
```

The `priority` property does two important things:

1. Disables lazy loading for the image
    
2. Preloads the image
    

Many developers overlook this and let their LCP image load lazily by default, which reduces performance. When you run `next dev`, you'll get a console warning if your LCP image lacks the `priority` attribute.

Without `priority`, the LCP image only begins loading when it appears on the screen, delaying this important performance metric. With `priority`, the image loads right away when the page loads.

# Image Sizing

To prevent layout shift, images must be sized in one of three ways:

1. **Automatically**: Using a static import
    
2. **Manually**: Specifying width and height
    
3. **Fill**: Using the `fill` property to expand to parent element
    

If you don't know your image sizes:

* Use `fill` and style the parent container
    
* Normalize your images to standard sizes
    
* Modify your API calls to return image dimensions
    

# Styling the Image Component

Style the Image component using:

* `className` prop (recommended for most cases)
    
* `style` prop for inline styles
    

When using `fill`:

* Parent element must have `position: relative`
    
* Parent element must have `display: block`
    

# Common Usage Patterns

## Responsive Images

```javascript
<Image
  src={mountains}
  alt="Mountains"
  sizes="100vw"
  style={{ width: "100%", height: "auto" }}
/>
```

## Fill Container (like a grid of images)

```javascript
<div style={{ position: "relative", height: "400px" }}>
  <Image
    src={mountains}
    alt="Mountains"
    fill
    sizes="(min-width: 808px) 50vw, 100vw"
    style={{ objectFit: "cover" }}
  />
</div>
```

## Background Image

```javascript
<Image
  src={mountains}
  alt="Mountains"
  placeholder="blur"
  quality={100}
  fill
  sizes="100vw"
  style={{ objectFit: "cover" }}
/>
```

# Configuration

You can [configure the Image component](https://nextjs.org/docs/app/api-reference/components/image#configuration-options) and optimization API in your `next.config.js` file to:

* Enable remote images
    
* Define custom breakpoints
    
* Change caching behavior
    
* And more