Image Optimization using next.js

Introduction

Images are a prominent part of any web application. As the web grows and becomes more competitive, applications require more features like reduced page load time, responsiveness etc., to be able to scale. Developers at Next.js decided to preconfigure such things. We will look at Next/Image API (Application Programming Interface) and see how it handles automatic image optimization in next.js.

Using Next/Image API for image optimization in next.js

“next/image” exports <Image/> component which one can use just like an <img/> tag in HTML. It will automatically handle image optimization in next.js. Let’s look at the below example.

//importing from "next/image"
import Image from 'next/image 
<Image src={temp.jpeg} alt={"similar to <img/>"}/> // rendering an image

You can also try this code with Online Javascript Compiler

Run Code

Let’s discuss some of its props.

Src

In the ‘src’ prop, we can write the source of the image in multiple ways. First is just writing the path string, secondly by statically importing images from the file like below. We can also configure content delivery in the next.config.js file and write the absolute path string in this src prop.

<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
import VercelImg from './vercel.svg'
<Image src={VercelImg} alt={"similar to <img/>"}/>

Width, height

We can configure the width and height of the image in pixels.

<Image src="/vercel.svg" alt="width and height in pixels" width={72} height={16} />

Loader

It is a function responsible for resolving the URL. Refer to the below example:

const loader = ({ src, width, quality =50}) => {
   return `https://cdn.cloudinary.com/${src}?w=${width}&q=${quality}`
 }
  function LoaderExample() {
   return (
     <Image
       loader={loader}
       src="image"
       height={250}
       width={250}
       quality={100}
     />
   )
 }

Quality

we can define the optimization aspect of the image on a scale of 1 to 100. 

<Image
   src="image"
   alt="alt text"
   width={500}
   height={300}
   quality=50
 />

Priority

This prop is to indicate the preloading of the image. By default, images will get lazily loaded if this tag is not used.

<Image
   src="image"
   alt="alt text"
   width={500}
   height={300}
   priority
 />

Layouts

There can be four options to layout an image:

• Intrinsic: It automatically scales the image dimensions when viewport sizes reduce but maintains original dimensions in larger viewport sizes.
• Fixed: The image dimensions will remain fixed even if the viewport size is reduced.
• Responsive: The image dimensions can scale up with larger viewport sizes and scale down with the reduction in viewport size. It is not limited to the original dimension of the image when scaling up. The parent element must have displayed: block to scale up in dimension.
• Fill layout: This makes the dimension correspondingly change with the parent’s dimension only when a parent is relatively positioned. Object-fit property is used with fill layout mainly.

Placeholder

This prop is used as a fallback for the duration of image load. It has two properties, namely blur and empty. Empty is specified by default. If we use the blur property, we must select the “blurDataURL” property, used as a placeholder in the original image.

objectFit

It has four values, namely: ‘contain’, ‘cover’, ‘fill’, ‘none’ and ‘scale-down’. It is mostly used with an image whose dimensions are set, or layout=’fill’ property is set.

<Image
   src="image-src"
   alt="image-alt-text"
   layout="fill"
   objectFit="contain"
/>

objectPosition 

It positions the image in the container with a defined width and height, or layout=” fill” is used.

<Image
   src="image-src"
   alt="alt-text"
   layout="fill"
   objectPosition="top left"
/>

Unoptimized 

This prop serves the image without going through any optimization

<Image
   src="image"
   alt="alt text"
   width={500}
   height={300}
   unoptimized
 />