The Image Component

Next.js has a built in image component called next/image.

• The image component is an extension of the HTML `<img>` element, it is just evolved for the modern web.

• It includes built-in performance optimizations to help you achieve good Core Web Vitals.

• These scores are import to measure how good the user experience is on your website and are then factored in to Google's search rankings.

Built-in Optimizations

Next.js already does a few things to optimize performance. The only things you have to do to make these optimizations possible is use the image component instead of the regular HTML image tag (img). The other things, Next.js does for you:

1. Improved Performance: Serve correctly sized images on each device and use modern image formats.

2. Visual Stability: Prevent Cumulative Layout Shift automatically.

3. Faster Page Loads: Images get loaded once they enter the viewport and have optional blurred placeholders.

4. Asset Flexibility: Image resizing can happen on-demand, even for images stored on remote servers.

Using the Image Component

You can import the image component at the top of your file by adding the next line of code:

import Image from 'next/image'

Local Images

import ProfilePic from '../public/me.png'

• Next.js will automatically determine the width and height of the image based on the imported file.

• These values prevent Cumulative Layout Shift while your page is loading.

Remote Images

• The src property should be a URL string.

• You have to provide your own width and height.

Domains, Loaders and Priority

It is possible to access a remote image and still use the built-in Next.js Image Optimization API.

To do this, leave the loader at the default setting and enter an absolute URL for the Image src.

What is a Loader?

A loader is a function that generates the URLs for your image.

• It appends a root domain to your provided src.

• Then it generated multiple URLs to request the image at different sizes.

• The multiple URLs are used in the automatic srcset generation.

• Visitors to your site will get the correct sized image for their viewport served.

Next.js applications have a default loader that uses the built-in Image Optimization directly from the Next.js web server.

What is Priority?

You should add the priority property to the image that will be the Largest Contentful Paint element on each page.
This allows Next.js to specially prioritize the image for loading, which gives a meaningful boost in LCP.

The LCP is usually the largest image or text block that is visible within the viewport of the page.

Image Sizing

You have to try and avoid Cumulative Layout Shift. This can be prevented by giving images the correct size. This gives the browser the possibility to reserve a precise enough space for the image before that loads.

There are rules for image sizing

1. Use static import automatically.

2. When using explicitly, include a height and width property.

3. When using implicitly, use layout="fill" since this will cause the image to expand to fill its parent element.

Styling the Image Component

Rules

1. Pick the correct layout mode: there are a few different layout modes that define how the image component is sized on the page.

2. Target the image with className, not based on DOM structure: set a className prop on the image component, do not style it based on it's DOM structure and do not use styled JSX.

3. When using layout="fill" the parent element must have position: relative.

4. When using layout="responsive" the parent element must have display: block.

External sources

Image from Axelerant