You would have observed that on some web pages, there is often an increase in load time because of the number of images on the site. This behaviour is attributed to the fact that images take up a large portion of the webpage. Recently, Next.js 10 came along with a new feature called the Image component which helps a user manage resources by image optimization. In this article, we will see how the Next.js Image Component optimizes, resizes and serves images in a format supported by your browser.

Image component

The Next.js Image Component is an extension of the HTML img element for the modern web. This feature allows for developers using Next.js to quickly import a native component('next/image'), that automatically optimizes your images hence, improve the performance of your web application.

What Does The Image Component Do?

• Allows you to specify the different image sizes for custom resolutions to be used dynamically.
• Optimizes the image automatically to avoid usage of large images on smaller viewports.
• Serves images in next-generation formats (like WebP) if the browser supports them.
• Changes the quality of the photo automatically to a lower threshold set to 75%. This can be changed for every invocation.
• Works with any image source even if it’s hosted by an external data source such as Cloudinary, Imgix, etc.
• Optimizes images on-demand as users request them so that the build time won’t increase.
• Provides lazy load functionality so that the images load as they are scrolled into the viewport.

How to use it

1. Install the Next version 10+ using the command below:

   yarn add next@latest react@latest react-dom@latest
   

2. Create a Project using this command:

   npx create-next-app
   

   or

   yarn create next-app
   

3. Run your application by changing directory into this new project folder you created by running this command :

   npm run dev
   

   or

   yarn run dev
   

4. Add an image into your Public folder: Always prefix your src prop with a / or it will not interpret your image from the public/ folder!

5. In your pages/index.js, replace everything with this code snippet:

import Image from 'next/image';

export default function Home() {
  return (
    <>
      <Image src='/cat.jpg' alt='my cat' height='428' width='1100' />
    </>
  );
}

Note:

• Always import the Image from 'next/image'
• When using the component, it is important to include the height and width attribute. Although, they can be substituted with the prop of Layout .

For External Image Links: To use an external image link for our Image component, Vercel requires us to configure the allowed domains explicitly in order to ensure that external URLs are not abused. So, create a file in the root directory named next.config.js and fill it with the information below:

// you can add more that one domain name.
module.exports = {
  images: {
    domains: ['domain name.com'],
    domains: ['domain name.com'],
   domains: ['domain name'],
  },
};

Layout types

There are four types of layouts, but the default is Intrinsic Layout

• Fixed: The image dimension does not change as the viewport changes (responsiveness with the image).
• Intrinsic: The image will scale the dimensions down for smaller viewports but maintain the original dimensions for larger viewports.
• Responsive: The image will scale the dimensions down for smaller viewports and scale up for larger viewports.
• Fill: The image will stretch both width and height to the dimensions of the parent element.

  Conclusion

  You will observe now that our image is indeed converted to the WebP format, it is optimized and lazy load functionality is also present. Thanks for reading this article!