# Next.js Image Optimization — Series #3

If you don’t have time to read but want to know what’s there in this post. Find the quick read 👇

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055203861/5660f4e0-1386-4fa8-b0b7-c7c5bbf2c6dc.png align="left")

### What will you learn?

1. How to use the image component in Next.js (Local, Remote images)
    
2. Image Sizing
    
3. Image Styling
    

### 1\. How to use the image component in Next.js (Local, Remote images)

The Next.js Image component, `next/image`, is an extension of the HTML `<img>` element.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055206001/2c68ada0-9004-446f-b168-110284c3ce03.png align="left")

Some of the optimizations built into the Image component

To add the image component in the application import the `next/image` like below

```javascript
import Image from 'next/image'
```

Now we can define the image src either from local or from remote like below

#### Local Images

To use a local image, `import` your `.jpg`, `.png`, or `.webp` files like below

```javascript
import profilePic from '../public/me.png'
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055207631/bb70dc06-c2f8-47ee-b1c5-69802ce25a2a.gif align="left")

The `import` must be static so it can be analyzed at build time.Next.js will automatically determine the `width` and `height` of your image based on the imported file.

```javascript
import Image from 'next/image'  
import profilePic from '../public/me.png'  
  
function Home() {  
  return (  
    <>  
      <h1>Profile Picture</h1>  
      <Image  
        src={profilePic}  
        alt="Picture of the author"  
        // width={500} automatically provided  
        // height={500} automatically provided  
        // blurDataURL="data:..." automatically provided  
        // placeholder="blur" // Optional blur-up while loading  
      />  
      <p>Profile Picture Page</p>  
    </>  
  )  
}
```

#### Remote Images

To use a remote image, the `src` property should be a URL string, which can be [relative](https://nextjs.org/docs/basic-features/image-optimization#loaders) or [absolute](https://nextjs.org/docs/api-reference/next/image#domains). Next.js does not have access to remote files during the build process, you'll need to provide the `[width](https://nextjs.org/docs/api-reference/next/image#width)`, `[height](https://nextjs.org/docs/api-reference/next/image#height)` and optional `[blurDataURL](https://nextjs.org/docs/api-reference/next/image#blurdataurl)` props manually

```javascript
import Image from 'next/image'  
  
export default function Home() {  
  return (  
    <>  
      <h1>My Homepage</h1>  
      <Image  
        src="/me.png"  
        alt="Picture of the author"  
        width={500}  
        height={500}  
      />  
      <p>Welcome to my homepage!</p>  
    </>  
  )  
}
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055210029/2ec40dd4-7f39-43bf-ac4e-2835332cded2.png align="left")

### 2\. Image Sizing

One of the ways that images most commonly hurt performance is through **layout shift**, where the image pushes other elements around on the page as it loads in. **This performance problem is so annoying to users that it has its own Core Web Vital, called Cumulative Layout Shift**. The way to avoid image-based layout shifts is to always size your images. This allows the browser to reserve precisely enough space for the image before it loads.

`next/image` is designed to guarantee good performance results, it cannot be used in a way that will contribute to layout shift, and **must** be sized in one of three ways:

* Automatically, using a [static import](https://nextjs.org/docs/basic-features/image-optimization#local-images)
    
* Explicitly, by including a `[width](https://nextjs.org/docs/api-reference/next/image#width)` and `[height](https://nextjs.org/docs/api-reference/next/image#height)` property
    
* Implicitly, by using `[layout="fill"](https://nextjs.org/docs/api-reference/next/image#layout)` which causes the image to expand to fill its parent element.
    

If none of the suggested methods works for sizing your images, the `next/image` component is designed to work well on a page alongside standard `<img>` elements.

### 3\. Image Styling

Styling the Image component is not that different from styling a normal `<img>` element, but there are a few guidelines to keep in mind.

* Pick the **correct layout mode**
    
* Target the image with **className**, not based on DOM structure
    
* When using **layout=’fill’**, the parent element must have **position: relative**
    
* When using **layout=’responsive’**, the parent element must have **display: block**
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055212057/0824f9c0-3869-4478-97d9-840ca69916f5.png align="left")

### Congratulations!

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055213907/84b33d04-c91c-4765-b413-a036c848ffba.gif align="left")